文章目录

一、盒子测量及样式
- 1、总体盒子测量及样式
- 2、左侧盒子测量及样式
- 3、中间盒子测量及样式
- 4、右侧盒子测量及样式
二、横版导航栏代码示例
- 1、HTML 标签结构
- 2、CSS 样式
- 3、显示效果

绘制矩形框中的部分 :

一、盒子测量及样式

盒子样式如下 :

1、总体盒子测量及样式

该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ;

/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {width: 1200px;margin: auto;
}

该盒子大小为 1200x60 像素 ,

该大盒子 , 可以分为如下三个小盒子 , 小盒子中的元素都是垂直居中的 , 可以在大盒子中设置一个行高 , 小盒子自动继承 ;

font-xxx , line-xxx , text-xxx , color 等样式可以被子元素继承 ;

该盒子有 2 像素的阴影 ;

最终的盒子样式如下 :

/* 横向导航栏模块 总体盒子模型 样式 */
.goods {/* 内容高度 60 像素 */height: 60px;/* 盒子总体背景 - 白色 */background-color: #fff;/* 顶部 10 像素外边距 */margin-top: 10px;/* 垂直居中 - 内容高度 = 行高 , 子元素中行高可继承 */line-height: 60px;/* 设置盒子的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

2、左侧盒子测量及样式

左侧盒子区域如下 , 盒子高度充满父容器 , 继承父容器的高度为 60 像素 , 行高继承父容器也是 60 像素 , 左右两侧各有 30 像素的外边距 ;

文字大小 16像素 , 加粗 , 颜色 #00a4ff ;

左侧盒子样式为 :

/* 左侧盒子 */
.goods h3 {/* 设置左浮动 */float: left;/* 左右设置 30 像素外边距 */margin: 0 30px;/* 文字大小 16 像素 */font-size: 16px;/* 设置文字颜色 */color: #00a4ff;}

3、中间盒子测量及样式

中间盒子内容为 :

     <div class="goods-item">|  <a href="#">jQuery</a>|  <a href="#">Spark</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a></div>

中间黑盒子的大概区域如下 , 竖线中间的文字都是链接标签 ,

每个链接标签左右两侧各有 30 像素的间隔 , 这里使用外边距实现 ;

文本的高度和行高继承父元素的样式 , 都为 60 , 会自动垂直居中 , 文本大小为 16 像素 , 颜色为 #050505 ;

最终样式为 :

/* 设置 竖线和课程名称所在盒子 的文本颜色这是所有的文本样式 课程在链接里面 由 a 标签设置样式除 a 标签外 只剩下竖线 的样式*/
.goods-item {float: left;color: #bfbfbf;
}/* 链接标签的样式 */
.goods-item a {/* 设置 链接 字体大小和颜色值 */font-size: 16px;color: #050505;/* 左右设置 30 像素样式 */margin: 0 30px;
}

链接文本需要清除下划线样式 , 该配置几乎所有的网页都要设置 ;

/* 清除所有链接的下划线样式 */
a {text-decoration: none;
}

4、右侧盒子测量及样式

右侧盒子宽高如下图所示 , 设置右浮动即可悬浮在右侧 ;

右侧盒子文本大小 14 像素 , 颜色 #00a4ff ;

最终样式为 :

/* 设置 右侧盒子样式 */
.mod {/* 设置右浮动 */float: right;/* 右侧设置 300 像素外边距 */margin-right: 30px;/* 字体大小和颜色 */font-size: 14px;color: #00a4ff;
}

二、横版导航栏代码示例

盒子样式如下 :

1、HTML 标签结构

核心代码 :

 <!-- 横向导航栏 模块 - 开始 --><div class="goods w"><h3> 精品推荐 </h3><div class="goods-item">|  <a href="#">jQuery</a>|  <a href="#">Spark</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a></div><div class="mod"> 修改兴趣 </div>                                                                </div><!-- 横向导航栏 模块 - 结束 -->

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 头部模块 - 开始 --><div class="header w"><!-- 1. 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="data:images/logo.png" alt=""></div><!-- 2. 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 3. 搜索栏盒子 --><div class="search"><!-- 文本输入框表单 --><input type="text" value="输入关键词"><button></button></div><!-- 4. 用户栏盒子 --><div class="user"><div class="user-img"><img src="data:images/head_icon.png" alt=""></div><div class="user-name">用户1</div></div></div><!-- 头部模块 - 结束 --><!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏  --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div><!-- 右侧 课程栏 --><div class="course"><!-- 顶部的标题 --><div class="course-hd">我的课程表</div><div class="course-bd"><!-- 中部的 列表 --><ul><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li></ul><!-- 底部的 全部课程 按钮 --><a href="#" class="all">全部课程</a></div></div></div></div><!-- Banner 模块 - 结束 --><!-- 横向导航栏 模块 - 开始 --><div class="goods w"><h3> 精品推荐 </h3><div class="goods-item">|  <a href="#">jQuery</a>|  <a href="#">Spark</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a>|  <a href="#">MySQL</a>|  <a href="#">JavaWeb</a></div><div class="mod"> 修改兴趣 </div>                                                                </div><!-- 横向导航栏 模块 - 结束 --></body>
</html>

2、CSS 样式