hbuilder制作简单网页边框-网页设计-锦华智联科技

第一步：在 HBuilder 中创建项目

打开 HBuilder。
点击顶部菜单栏的 文件 -> 新建 -> 项目...。
在弹出的窗口中，选择 普通项目，然后点击 创建。
给你的项目起个名字，MyBorderDemo，然后点击 完成。
在左侧的文件管理器中，右键点击你的项目，选择 新建 -> HTML文件。
给文件起个名字，index.html,然后按回车。

你已经创建了一个基础的 HTML 文件，双击打开它，你会看到一些默认的 HTML 代码,我们就在这个文件里添加内容。

（图片来源网络，侵删）

最简单的实线边框

这是最基础的边框，适用于给图片、文本框或整个页面添加一个简单的轮廓。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">简单边框示例</title>
    <style>
        /* 为整个页面内容添加一个边框 */
        body {
            border: 5px solid black; /* 5像素宽的黑色实线边框 */
            padding: 20px; /* 为了不让文字紧贴着边框，添加一些内边距 */
            margin: 0; /* 去掉页面默认的外边距 */
        }
    </style>
</head>
<body>
    <h1>这是一个带有简单边框的页面</h1>
    <p>这个页面的 body 元素有一个黑色的实线边框。</p>
</body>
</html>

代码解释：

<style> 标签里的代码是 CSS（层叠样式表）,用来控制网页的样式。
body { ... } 表示我们为 <body> 标签（也就是整个页面的可见内容）设置样式。
border: 5px solid black; 是核心代码，它由三部分组成：
- 5px：边框的宽度（5像素）。
- solid：边框的样式（实线），还有 dashed（虚线）、dotted（点线）等。
- black：边框的颜色（黑色），你也可以使用颜色代码，如 #000000 或 red。

为特定元素添加边框

我们不会给整个页面加边框，而是给某个具体的元素,比如一张图片或一个盒子。

（图片来源网络，侵删）

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">为特定元素添加边框</title>
    <style>
        /* 给图片添加一个红色虚线边框 */
        #my-image {
            border: 3px dashed red;
            /* border-radius: 10px; /* (可选) 让边框四个角变圆滑 */
        }
        /* 创建一个内容盒子并添加蓝色边框 */
        .content-box {
            border: 2px solid blue;
            padding: 15px;
            margin-top: 20px; /* 在盒子顶部添加一些外边距，与图片隔开 */
            width: 300px; /* 设置盒子的宽度 */
        }
    </style>
</head>
<body>
    <h1>元素边框示例</h1>
    <!-- 给 id 为 "my-image" 的图片添加边框 -->
    <img id="my-image" src="https://picsum.photos/200/150" alt="示例图片">
    <!-- 给 class 为 "content-box" 的 div 添加边框 -->
    <div class="content-box">
        <h2>这是一个内容盒子</h2>
        <p>这个 div 元素拥有一个蓝色的实线边框，并且内部有内边距，让内容不会太拥挤。</p>
    </div>
</body>
</html>

代码解释：

#my-image：这是ID选择器，通过 id="my-image" 来精确找到那个图片元素。
.content-box：这是类选择器，通过 class="content-box" 可以给多个元素应用相同的样式，这里我们用 <div> 标签创建了一个“盒子”来包裹内容。
padding：内边距,指边框和内容之间的空间。
margin：外边距,指元素与其他元素之间的空间。
border-radius: 10px;：这是一个非常实用的属性，可以让边框的角变成圆角,让设计更美观。

更丰富的边框效果（复合边框）

CSS 允许你为边框的四个边分别设置不同的样式,创造出更丰富的效果。

代码示例：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">复合边框示例</title>
    <style>
        .fancy-box {
            border-top: 5px solid green;   /* 上边框：5px 绿色实线 */
            border-right: 3px dotted orange; /* 右边框：3px 橙色点线 */
            border-bottom: 5px solid green;  /* 下边框：5px 绿色实线 */
            border-left: 3px dotted orange;  /* 左边框：3px 橙色点线 */
            padding: 20px;
            width: 250px;
        }
    </style>
</head>
<body>
    <h1>复合边框效果</h1>
    <div class="fancy-box">
        <p>这个盒子的上下边框是绿色实线，左右边框是橙色点线。</p>
    </div>
</body>
</html>

使用“轮廓”作为边框

你可能需要一个不占空间的边框，比如在用户点击输入框时显示高亮，这时可以使用 outline 属性。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">轮廓示例</title>
    <style>
        input[type="text"] {
            /* border: 1px solid #ccc; */ /* 可以有一个默认的边框 */
            outline: 2px solid blue; /* 当输入框被选中（聚焦）时，显示一个蓝色的轮廓 */
        }
    </style>
</head>
<body>
    <h1>轮廓 效果</h1>
    <p>点击下面的输入框，看看会发生什么。</p>
    <input type="text" placeholder="点击我试试...">
</body>
</html>

border vs outline 的关键区别：

border 会增加元素的尺寸,可能会影响页面布局。
outline 不会增加元素的尺寸,它绘制在元素的外部。

总结与 HBuilder 实战技巧

代码提示：HBuilder 对 HTML 和 CSS 有很好的代码提示功能，当你输入 border: 或 outline: 时，它会自动列出可选的属性值,非常方便。
实时预览：在 HBuilder 中编写完代码后，可以直接右键点击 index.html 文件，选择 在浏览器中打开，或者使用 HBuilder 自带的预览功能（通常是一个闪电图标或 运行 菜单下的选项）来查看效果，这是前端开发最重要的习惯：写一点，看一点。
调试：如果边框没有显示出来，检查一下：
- 元素是否被其他元素（margin 或 padding）遮挡了？
- 元素的尺寸是否为 0？（比如一个空的 <div>，需要设置 width 和 height 或填充内容才能看到边框）
- CSS 选择器是否正确？（和有没有用错）

从最简单的 border: 1px solid black; 开始，尝试改变它的宽度、样式和颜色，然后逐步探索更复杂的属性,你很快就能掌握网页边框的制作技巧！