7.（css）使用浮动布局学成网案例

最新推荐文章于 2024-10-26 18:13:01 发布

溜_x_i_a_o_迪

最新推荐文章于 2024-10-26 18:13:01 发布

阅读量646

点赞数

本文链接：https://blog.csdn.net/u013946061/article/details/112373875

版权

CSS学习手册同时被 2 个专栏收录

19 篇文章

订阅专栏

CSS 0基础快速入门

16 篇文章

订阅专栏

1. 页面制作重点提炼

理解
- 写单页面我们基本的流程
- 常见的css初始化语句
- 我们CSS属性书写顺序
应用
- 利用ps切图
- 引入外部样式表
- 把psd文件转换为html页面

2. 前期准备素材

学成在线PSD源文件
开发工具 = PS（切图） + sublime/webstorm/vscode…（代码） + chrome（测试）

3. 前期准备工作

欲先善其事，必先利其器。先把我们的前期准备工作做好，我们本次采取结构与样式相分离思想。

创建study目录文件夹 (用于存放我们这个页面的相关内容)
study目录内新建images文件夹用于保存图片。
新建index.html首页html文件（以后我们的网站首页统一规定为index.html)
新建style.css 样式文件。我们本次采用外链样式表。
将样式引入到我们HTML页面文件中。
样式表写入清除内外边距样式，来检测样式表是否引入成功。

\study\index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
123
</body>
</html>

\study\style.css

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.95
Branch： branch03

commit description：a0.95（学成在线实例框子）

tag：a0.95

4. CSS属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow （建议 display 第一个写，毕竟关系到模式）
自身属性（盒模型）：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    /*布局定位属性*/
    display: block;
    position: relative;
    float: left;
    /*自身属性*/
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    /*文本属性*/
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    /*其他属性*/
    background: rgba(0,0,0,.5);  /*透明背景*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

如小米官网的样式表也是按照如上顺序排列的，display没有放在第一，但细微的顺序不是重要的。

京东基本是按照顺序写明的。

5. 布局流程

为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：

1、必须确定页面的版心（可视区），我们测量可得知，一般都是水平居中。

2、分析页面中的行模块，以及每个行模块中的列模块。简单而言其实页面布局，就是一行行罗列而成（先确定行再确定列）

3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要（结构写对，样式就好写，结构写不对，样式怎么写都写不对）。

4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

我们按照步骤，量取我们的案例的版心宽度 => 1200px

6. 页面制作

这个页面的版心是 1200像素每个版心都要水平居中对齐，所以，我们干脆把版心定义为：

.w {
    width: 1200px;
    /*水平居中对齐*/
    margin: auto;
}

剩下一行一行的往下布局即可。

6.1 1) 头部制作

结构图如下：
在这里插入图片描述

1号是版心盒子header 1200 * 42的盒子水平居中对齐, 上下给一个margin值就好了。
版心盒子里面包含 2号盒子logo
版心盒子里面包含 3号盒子 nav导航栏
版心盒子里面包含 4号盒子 search搜索框
版心盒子里面包含 5号盒子 user个人信息
注意，要求里面的 4个盒子必须都浮动

（1）1号是版心盒子header 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。

上下边距30px

头部也在版心里，我们也同时把样式融合起来 => class="header w"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">

	</div>
	<!-- header头部模块结束 -->
</body>
</html>

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*版心 12000 水平居中*/
.w {
	width: 1200px;
	/*水平居中对齐*/
	margin: auto;
}
.header {
	width: 1200px;
	height: 42px;
	background-color: pink;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.96
Branch： branch03

commit description：a0.96（头部制作——测量尺寸）

tag：a0.96

上下刚刚测量的边距是30px，水平居中。

.header {
	width: 1200px;
	height: 42px;
	background-color: pink;
    margin: 30px auto;
}

注意版心专门写一类，后面调用就行了，后面在版心里的元素，直接融合就行，这就是css的多类名使用。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.97
Branch： branch03

commit description：a0.97（头部制作——测量尺寸多类名使用）

tag：a0.97

注意，首先四个盒子都是嵌套在头部中的，并且里面的 4个盒子必须都浮动，因为四个盒子都在一行上，因为这里有块级盒子，如导航栏就用到了无序列表。

（2）版心盒子里面包含 2号盒子 logo

先抠图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
	</div>
	<!-- header头部模块结束 -->
</body>
</html>

我们发现logo底色不是纯白色，说明背景色不是纯白色，我们用拾色器 => #f3f5f7

body {
	background-color: #f3f5f7;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.98
Branch： branch03

commit description：a0.98（头部制作——设置logo）

tag：a0.98

（3）版心盒子里面包含 3号盒子nav导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
	</div>
	<!-- header头部模块结束 -->
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.99
Branch： branch03

commit description：a0.99（头部制作——导航基本框子）

tag：a0.99

li去除列表样式

/*清除列表样式*/
li {
	list-style: none;
}

logo和导航是div，都是块级元素，属于标准流，我们需要添加浮动

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
body {
	background-color: #f3f5f7;
}
/*版心 12000 水平居中*/
.w {
	width: 1200px;
	/*水平居中对齐*/
	margin: auto;
}
.header {
	width: 1200px;
	height: 42px;
	background-color: pink;
	margin: 30px auto;
}
.logo {
	float: left;
}
.nav {
	float: left;
}

li又是块级元素，因此也需要加浮动

.nav ul li {
	float: left;
}

在这里插入图片描述

测量导航与logo的距离 => 70px

可以设置logo => margin-right

或者设置导航 => margin-left

.logo {
	float: left;
	margin-right: 70px;
}

导航的每项字数可能不同，因此不要设置宽度，而是通过padding值挤开。

高度 => 40px ，且文字垂直居中，注意鼠标放上去该项会有下边框

字体内边距9px （撑开盒子），a标签属于行内元素，没有大小，因此一定要转成块级元素。同时再去掉下划线。

.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	line-height: 40px;
	text-decoration: none;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.01
Branch： branch03

commit description：a1.01（头部制作——导航的a标签一字排开）

tag：a1.01

底边框高度2px，颜色#00a4ff

/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}

不同的字数，下边框长度不同，是因为我们没有设置宽度

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.02
Branch： branch03

commit description：a1.02（头部制作——导航的a标签一鼠标停留出现下边框）

tag：a1.02

测量字体大小，18点就代表18px像素。

取颜色 => #050505

.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	line-height: 40px;
    font-size: 18px;
	color: #050505;
	text-decoration: none;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.03
Branch： branch03

commit description：a1.03（头部制作——导航的a标签一设置文字）

tag：a1.03

实际我们发现文字之间过于紧凑了，我们再测测距离。

35 - 9 = 24px => 设置a或li都可以

.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	margin-right: 24px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.04
Branch： branch03

commit description：a1.04（头部制作——导航的a标签完成）

tag：a1.04

（4）版心盒子里面包含 4号盒子 search搜索框

观察是一个input和一个按钮

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!--	.search  	-->
		<div class="search">
			<input type="text">
			<button>按钮</button>
		</div>
	</div>
	<!-- header头部模块结束 -->
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.05
Branch： branch03

commit description：a1.05（头部制作——搜索框-html框子）

tag：a1.05

这一行同样也得浮动，脱离标准流

95-35 = 60px =>

.search {
	float: left;
	margin-left: 60px;
}

量取尺寸

高38px

边框1px

宽度360px

宽度50px 拾色：#00a4ff，按钮是行内块元素，会有缝隙，因此也需要加浮动。

.search {
	float: left;
	margin-left: 60px;
}
.search input {
	float: left;
	width: 360px;
	height: 38px;
	border: 1px solid #00a4ff;
}
.search button {
	float: left;
	width: 50px;
	height: 38px;
}

不好看，这因为设计图的原因，我们调一下输入框高度，让其和a标签的高度一样

按钮没有边框因此还需要加两个像素高度

.search {
   float: left;
   margin-left: 60px;
}
.search input {
   float: left;
   width: 360px;
   height: 40px;
   border: 1px solid #00a4ff;
}
.search button {
   float: left;
   width: 50px;
   height: 42px;
}

输入框提示文字是灰色（color: #ccc;），并且有距离19px

.search input {
	float: left;
	width: 360px;
	height: 40px;
	border: 1px solid #00a4ff;
	padding-left: 19px;
	color: #ccc;
}

设置padding会把盒子撑大，因此宽度需要减去19px，为了方便都设置成20px

.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	padding-left: 20px;
	color: #ccc;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.06
Branch： branch03

commit description：a1.06（头部制作——搜索框-input框完成）

tag：a1.06

按钮暂时我们就切成图片，input框就别要右边框了，这样方便切图计算

.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}

.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}

统一所有按钮去除边框

/*去掉button 默认自带的边框*/
button {
	border: none;
}

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.07
Branch： branch03

commit description：a1.07（头部制作——搜索框-完成）

tag：a1.07

（5）版心盒子里面包含 5号盒子user个人信息

切图，头像比较重要，因此采用jpg格式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.08
Branch： branch03

commit description：a1.08（头部制作—— user个人信息-html框子）

tag：a1.08

user也需要浮动，去除标准流

距离左侧31px

文字14px，颜色#666666

高度同左42px，垂直居中行高也是42px

在这里插入图片描述

.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 31px;
	font-size: 14px;
	color: #666;
}

然而我们发现文字和图都没有垂直居中 => 因为高度和行高相等，只能让单行文本垂直居中。而这里的图片是没法垂直居中的。后面我们说到css高级特效，再来优化这里的问题，这个问题暂时留着。

在这里插入图片描述

我们可以把盒子整体背景色，基本就实现了头部了。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.09
Branch： branch03

commit description：a1.09（头部制作基本完成）

tag：a1.09

6.2 2）banner制作

结构图如下：
在这里插入图片描述

1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景。
2号盒子是版心，要水平居中对齐。
3号盒子版心内，左对齐 subnav侧导航栏。
4号盒子版心内，右对齐 course 课程。

（1）1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景。

量取高度420px

背景颜色#1c036c

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
	</div>
	<!-- banner 部分end -->
</body>
</html>

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
}
/*版心 12000 水平居中*/
.w {
	width: 1200px;
	/*水平居中对齐*/
	margin: auto;
}
.header {
	width: 1200px;
	height: 42px;
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 70px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	margin-right: 24px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 60px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 31px;
	font-size: 14px;
	color: #666;
}
/*banner start*/
.banner {
	height: 420px;
	background: #1c036c;
}
/*banner end*/

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.10
Branch： branch03

commit description：a1.10（banner制作-基本框子）

tag：a1.10

用cutterman切图插件切图

.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg);
}

不平铺

.banner {
   height: 420px;
   background: #1c036c url(images/banner2.jpg) no-repeat;
}

大图应该在版心居中的位置

垂直向上，水平居中

/*banner start*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}

（2）2号盒子是版心，要水平居中对齐。

<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			11111111111111111111111111111111111
		</div>
	</div>
	<!-- banner 部分end -->
</body>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.11
Branch： branch03

commit description：a1.11（banner制作-设置版心）

tag：a1.11

（3）3号盒子版心内，左对齐subnav侧导航栏。

宽度190px

背景黑色半透明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">

			</div>
		</div>
	</div>
	<!-- banner 部分end -->
</body>
</html>

.subnav {
	width: 190px;
	height: 420px;
	background-color: pink;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.12
Branch： branch03

commit description：a1.12（banner制作-左侧导航栏框子）

tag：a1.12

设置半透明

.subnav {
	width: 190px;
	height: 420px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}

里面装内容 => 设置padding值

左右20px => 注意padding撑开后，需要压缩宽度 190-40=150px

.subnav {
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.13
Branch： branch03

commit description：a1.13（banner制作-左侧导航栏设置尺寸）

tag：a1.13

里面内容实际用ul和li就行了

li中最右端有>符号，用span包起来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
	</div>
	<!-- banner 部分end -->
</body>
</html>

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.14
Branch： branch03

commit description：a1.14（banner制作-左侧导航栏内容框子）

tag：a1.14

令span右对齐

.subnav  span {
	float: right;
}

测量行高 => 45px，再垂直居中

.subnav li {
   height: 45px;
   line-height: 45px;
}

文字 14px 颜色#fffff

去除下划线

.subnav li a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

鼠标经过字体颜色#00b4ff

.subnav li a:hover {
	color: #00b4ff;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.15
Branch： branch03

commit description：a1.15（banner制作-左侧导航栏中的内容完成）

tag：a1.15

（4）4号盒子版心内，右对齐 course课程。

宽度228px

高度300px

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">

			</div>
		</div>
	</div>
	<!-- banner 部分end -->
</body>
</html>

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
}
/*版心 12000 水平居中*/
.w {
	width: 1200px;
	/*水平居中对齐*/
	margin: auto;
}
.header {
	width: 1200px;
	height: 42px;
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 70px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	margin-right: 24px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 60px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 31px;
	font-size: 14px;
	color: #666;
}
/*banner start*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}
.subnav li {
	height: 45px;
	line-height: 45px;
}
.subnav li a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.subnav li a:hover {
	color: #00b4ff;
}
.subnav  span {
	float: right;
}
.course {
	width: 228px;
	height: 300px;
	background-color: pink;
}
/*banner end*/

右侧框跑到左下去了，那是因为没有浮动的原因

在这里插入图片描述

上边距50px

.course {
	float: right;
	width: 228px;
	height: 300px;
	background-color: pink;
	margin-top: 50px;
}

（补充：小迪同样忘记给左侧导航栏浮动了，导致了右侧导航没有上来）

注意：因为course子盒子有了浮动（或者有定位，也会防止塌陷），则就不会外边距塌陷的问题了

.subnav {
	float: left;
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}

（塌陷问题请参考——1.5.7.2 (2). 嵌套块元素垂直外边距的合并（塌陷））

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.16
Branch： branch03
commit description：a1.16（banner制作-右侧导航栏框子）

tag：a1.16

6.3 3）课程表模块

结构图如下：
在这里插入图片描述

1号盒子是 228 * 300 的盒子右浮动注意浮动的元素不会有外边距塌陷的问题
1号盒子内分为上下两个子盒子
2号子盒子是上部分我们命名为 course-hd (hd 是 head 的简写头部的意思，我们经常用)
3号子盒子是下部分我们命名为 course-bd (bd 是 body 的简写主体的意思，我们经常用)

（1）1号盒子是 228 * 300 的盒子右浮动注意浮动的元素不会有外边距塌陷的问题

上一环节以及做完

（2）1号盒子内分为上下两个子盒子

（3） 2号子盒子是上部分我们命名为 course-hd (hd 是 head 的简写头部的意思，我们经常用)

都不用设置宽，因为块级元素默认和父级一样宽

高：48px

背景颜色： #9bceea

<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">

				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->

.course {
	float: right;
	width: 228px;
	height: 300px;
	background-color: pink;
	margin-top: 50px;
}
.course-hd {
	height: 48px;
	background-color: #9bceea;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.17
Branch： branch03
commit description：a1.17（课程表模块-右侧导航栏-2号盒子尺寸）

tag：a1.17

			<div class="course">
				<div class="course-hd">
					我的课程表
				</div>
			</div>

设置字体样式

大小 18px

背景 #ffffff

加粗

水平居中

垂直居中

文字加粗提倡用数字 blod = 700

.course-hd {
	height: 48px;
	background-color: #9bceea;
	font-size: 18px;
	text-align: center;
	line-height: 48px;
	color: #fff;
	/*文字加粗*/
	/*font-weight: bold;*/
	font-weight: 700;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.18
Branch： branch03
commit description：a1.18（课程表模块-右侧导航栏-2号盒子完成）

tag：a1.18

（3）3号子盒子是下部分我们命名为 course-bd (bd 是 body 的简写主体的意思，我们经常用)

左右边距14px => 设置成padding，注意没有宽度的盒子 padding 不会撑开盒子

.course-bd {
	padding: 0 14px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.19
Branch： branch03
commit description：a1.19（课程表模块-右侧导航栏-3号盒子设置padding）

tag：a1.19

内容用ul和li

下方全部课程是个链接

这里有一个问题，li是两行，怎么垂直居中呢？之前说的行高和高度相等，只适用于单行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行高等与高度只能让单行文本垂直居中</title>
	<style>
		div {
			width: 200px;
			height: 60px;
			line-height: 60px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>
		1111111111111111 <br>
		22222
	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.20
Branch： branch03
commit description：a1.20（课程表模块-右侧导航栏-3号盒子设置内容-行高等与高度只能让单行文本垂直居中）

tag：a1.20

回归正题如何解决呢？可以给li设置上边距，然后甚至固定大小，文字默认左上角对齐即可。

文字上边的稍微大一些，我们设置为h4

下方设置p

				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
				</div>

li高度50px

下边框1px灰色

.course-bd li {
   /*行高等与高度 只能让单行文本垂直居中*/
   height: 50px;
   border-bottom: 1px solid #ccc;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.21
Branch： branch03
commit description：a1.21（课程表模块-3号盒子设置内容-设置li）

tag：a1.21

设置边距13px

.course-bd li {
	/*行高等与高度 只能让单行文本垂直居中*/
	height: 50px;
	border-bottom: 1px solid #ccc;
	margin-top: 13px;
}

在这里插入图片描述

文字 16px #4e4e4e

文字 12px #a5a5a5

.course-bd li h4 {
	font-size: 16px;
	color: #4e4e4e;
}
.course-bd li p {
	font-size: 12px;
	color: #a5a5a5;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.22
Branch： branch03
commit description：a1.22（课程表模块-3号盒子设置内容-设置li字体）

tag：a1.22

第一行文字外边距稍微长一些，给ul设置一个margin-top 19-13=6px

.course-bd ul {
	margin-top:6px;
}

但是刷新页面后没有任何效果

=> 因为父亲div里装了一个ul，ul是标准流 => 外边距塌陷的问题（塌陷问题请参考——1.5.7.2 (2). 嵌套块元素垂直外边距的合并（塌陷））

可以用内边距，因为ul没大小，所以也不会被撑开

.course-bd ul {
	/*外边距塌陷的问题
	margin-top: 6px;*/
	padding-top: 6px;
}

注意：有的时候外边距合并有问题，我们可以使用内边距来解决。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.23
Branch： branch03
commit description：a1.23（课程表模块-3号盒子设置内容-解决边距塌陷问题）

tag：a1.23

完成下方按钮

				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
					<a href="#" class="all">全部课程</a>
				</div>

高度38px

.all {
	height: 38px;
	border: 1px solid #00a4ff;
}

a属性行内元素，没有大小需要设置为块级元素

.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.24
Branch： branch03
commit description：a1.24（课程表模块-3号盒子设置a标签框子）

tag：a1.24

量取外边距

.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 5px;
}

文字格式

可以给所有的a，都不要下边框

a {
	text-decoration: none;
}

.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 5px;
	font-size: 16px;
	color:  #00a4ff;
	text-align: center;
	line-height: 38px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.25
Branch： branch03
commit description：a1.25（课程表模块-3号盒子设置a标签文字格式）

tag：a1.25

实现鼠标经过 => 背景色变蓝，文字变白

.all:hover {
	background-color: #00a4ff;
	color: #fff;
}

去除背景色换白色

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.26
Branch： branch03
commit description：a1.26（课程表模块完成）

tag：a1.26

6.4 4）精品推荐小模块

结构图如下：
在这里插入图片描述

复习点： 因为里面三个盒子都要垂直居中，我们利用继承性，给最大的盒子一个垂直居中的代码就好了，还记得那些样式可以继承吗？？？font- line- text- color
大盒子水平居中 goods 精品，注意此处有个盒子阴影
1号盒子是标题 H3 左侧浮动
2号盒子里面放链接左侧浮动 goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
3号盒子右浮动mod修改

（1）三个盒子都要垂直居中，我们利用继承性，给最大的盒子一个垂直居中的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">
					我的课程表
				</div>
				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- goods START -->
	<div class="good w">
        123
	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.27
Branch： branch03
commit description：a1.27（精品推荐小模块-html框子）

tag：a1.27

（2）大盒子水平居中goods精品，注意此处有个盒子阴影

量取高度

盒子阴影（参考2.2）

box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

.goods {
	height: 60px;
	background-color: pink;
	margin-top: 8px;
	/*利用行高可以继承的特性*/
	line-height: 60px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.28
Branch： branch03
commit description：a1.28（精品推荐小模块-大盒子）

tag：a1.28

添加内容 => 1、2、3盒子

左右对齐 => 均需要添加浮动

垂直居中 => 三个盒子都需要，使用继承，在它们父级上设置行高

.goods {
	height: 60px;
	background-color: pink;
	margin-top: 8px;
	/*利用行高可以继承的特性*/
	line-height: 60px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

（3）1号盒子是标题H3左侧浮动

	<div class="goods w">
		<h3> 精品推荐 </h3>
	</div>

.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color: #00a4ff;

}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.29
Branch： branch03
commit description：a1.29（精品推荐小模块-完成1号盒子）

tag：a1.29

（4）2号盒子里面放链接左侧浮动 goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）

实际这里的导航不是很重要，我们就不用li，直接用a

	<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>

加浮动及竖杠颜色

.goods-item {
	float: left;
	color: #bfbfbf;
}

设置大概个30px就行，因为竖杠也有空隙

.goods-item a {
   font-size: 16px;
   color: #050505;
   margin: 0 30px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.30
Branch： branch03
commit description：a1.30（精品推荐小模块-完成2号盒子）

tag：a1.30

（5）3号盒子右浮动 mod修改

修改兴趣，不会跳转页面，直接写进div中即可，比如弹出框等效果由js完成。

	<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>

.mod {
	float: right;
	margin-right: 26px;
	font-size: 14px;
	color: #00a4ff;
}

背景去粉色

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.31
Branch： branch03
commit description：a1.31（精品推荐小模块-完成3号盒子）

tag：a1.31

6.5 5）精品推荐大模块

结构图如下：

在这里插入图片描述

1号盒子为最大的盒子 box 版心水平居中对齐
2号盒子为上面部分box-hd – 里面左侧标题H3左浮动右侧链接 a右浮动
3号盒子为底下部分box-bd — 里面是无序列表有 10个小li组成
小li 外边距的问题，这里有个小技巧。给box-hd宽度为 1215 就可以一行装开5个 li了
复习点：我们用到清除浮动因为 box-hd 里面的盒子个数不一定多少，我们就不给高度了，但是里面的盒子浮动了，影响下面的布局，此时需要浮动

（1）1号盒子为最大的盒子 box 版心水平居中对齐

宽度跟着版心继承即可，高度不给，不一定是几排，不方便给高度。

字体尺寸20px

字体下21px

因此我们可以设置高度60px，顶部外边距15px即可，这也字体顶部就是 20 + 15 =35，刚好对应上部分距离

.box {
	margin-top: 15px;
}
.box-hd {
	height: 60px;
	line-height: 60px;
	background-color: pink;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.32
Branch： branch03
commit description：a1.32（精品推荐大模块-完成1号盒子）

tag：a1.32

（2）2号盒子为上面部分box-hd – 里面左侧标题H3 左浮动右侧链接a右浮动

加浮动，和字体尺寸

h3字体加粗，改不加粗 => 让粗体不加粗 400 == normal

.box-hd h3 {
	float: left;
	font-size: 20px;
	color: #494949;
	font-weight: 400;
}

右侧浮动

.box-hd a {
	float: right;
}

查字体

右边距

.box-hd a {
	float: right;
	margin-right: 30px;
	font-size: 12px;
	color: #a5a5a5;
}

去背景色

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.33
Branch： branch03
commit description：a1.33（精品推荐大模块-完成2号盒子）

tag：a1.33

（3）3号盒子为底下部分 box-bd — 里面是无序列表有 10个小li组成

	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd">
			123
		</div>
	</div>

这个盒子一定不要给高度因为我们可能放一行也可能是2行或者n行

宽度怎么设置呢？先空着

.box-bd {
}

加li

		<div class="box-bd">
			<ul>
				<li></li>
			</ul>
		</div>

注意这里li一个像素都不要差，否则li容易掉下去了。

宽度：228px

高度：270px

.box-bd li {
	width: 228px;
	height: 270px;
	background-color: pink;
}

方便写代码（方便在浏览器观察）一会别忘了删除

body {
	background-color: #f3f5f7;
	/*方便写代码 一会别忘了删除*/
	height: 3000px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.34
Branch： branch03
commit description：a1.34（精品推荐大模块-3号盒子大体框子）

tag：a1.34

排多个li

		<div class="box-bd">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
		</div>

需要加浮动

.box-bd li {
	float: left;
	width: 228px;
	height: 270px;
	background-color: pink;
}

测量外边距

margin-right: 15px;

怎么掉下去了，因为第五个盒子不需要margin

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.35
Branch： branch03
commit description：a1.35（精品推荐大模块-3号盒子最后一列边距问题）

tag：a1.35

（4）小li外边距的问题，这里有个小技巧。给box-hd 宽度为 1215（再大一些也可以，实际外边距用户在页面上也看不到）就可以一行装开5个 li了

以前的做法，是找到最后一列，加class，去除右边距。在这里会很费劲，因为我们无法确定，显示了多少个li。

子盒子是可以比父盒子大的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			width: 300px;
			height: 300px;
			background-color: pink;
		}
		.son {
			width: 400px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.36
Branch： branch03
commit description：a1.36（子盒子是可以比父盒子大的）

tag：a1.36

box-bd宽度超过了版心 1200是可以的（子盒子可以比父盒子大），就就解决了问题

.box-bd {
	width: 1215px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.37
Branch： branch03
commit description：a1.37（精品推荐大模块-解决3号盒子最后一列边距问题）

tag：a1.37

再设置底部外边距

margin-bottom: 15px;

切图

		<div class="box-bd">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>

图片和li宽度一样

.box-bd li img {
	width: 100%;
}

测量文字

.box-bd li h4 {
	margin: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}

.box-bd li p {
	margin: 0 20px;
	font-size: 12px;
	color: #999;
}

.box-bd p span {
	color: orange;
}

去粉红色背景

加阴影

.box-bd li {
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #ffffff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

li * 10

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.38
Branch： branch03
commit description：a1.38（精品推荐大模块-3号盒子基本实现）

tag：a1.38

（5）我们用到清除浮动因为 box-hd 里面的盒子个数不一定多少，我们就不给高度了，但是里面的盒子浮动了，影响下面的布局，此时需要浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">
					我的课程表
				</div>
				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- goods START -->
	<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>
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->
	<div class="test">

	</div>
</body>
</html>

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*清除列表样式*/
li {
	list-style: none;
}
/*去掉button 默认自带的边框*/
button {
	border: none;
}
body {
	background-color: #f3f5f7;
	/*方便写代码 一会别忘了删除*/
	height: 3000px;
}
a {
	text-decoration: none;
}
/*版心 12000 水平居中*/
.w {
	width: 1200px;
	/*水平居中对齐*/
	margin: auto;
}
.header {
	width: 1200px;
	height: 42px;
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 70px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 9px;
	margin-right: 24px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 60px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 31px;
	font-size: 14px;
	color: #666;
}
/*banner start*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
	float: left;
	width: 150px;
	height: 420px;
	padding: 0 20px;
	/*背景半透明*/
	background: rgba(0, 0, 0, .3);
}
.subnav li {
	height: 45px;
	line-height: 45px;
}
.subnav li a {
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.subnav li a:hover {
	color: #00b4ff;
}
.subnav  span {
	float: right;
}
.course {
	float: right;
	width: 228px;
	height: 300px;
	background-color: #fff;
	margin-top: 50px;
}
.course-hd {
	height: 48px;
	background-color: #9bceea;
	font-size: 18px;
	text-align: center;
	line-height: 48px;
	color: #fff;
	/*文字加粗*/
	/*font-weight: bold;*/
	font-weight: 700;
}
.course-bd {
	/*没有宽度的盒子 padding 不会撑开盒子*/
	padding: 0 14px;
}
.course-bd ul {
	/*外边距塌陷的问题
	margin-top: 6px;*/
	padding-top: 6px;
}
.course-bd li {
	/*行高等与高度 只能让单行文本垂直居中*/
	height: 50px;
	border-bottom: 1px solid #ccc;
	margin-top: 13px;
}
.course-bd li h4 {
	font-size: 16px;
	color: #4e4e4e;
}
.course-bd li p {
	font-size: 12px;
	color: #a5a5a5;
}
.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 5px;
	font-size: 16px;
	color:  #00a4ff;
	text-align: center;
	line-height: 38px;
}
.all:hover {
	background-color: #00a4ff;
	color: #fff;
}
/*banner end*/
/*goods start*/
.goods {
	height: 60px;
	background-color: #fff;
	margin-top: 8px;
	/*利用行高可以继承的特性*/
	line-height: 60px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color: #00a4ff;

}
.goods-item {
	float: left;
	color: #bfbfbf;
}
.goods-item a {
	font-size: 16px;
	color: #050505;
	margin: 0 30px;
}
.mod {
	float: right;
	margin-right: 26px;
	font-size: 14px;
	color: #00a4ff;
}
/*goods end*/
/*box start*/
.box {
	margin-top: 15px;
}
.box-hd {
	height: 60px;
	line-height: 60px;
	/*background-color: pink;*/
}
.box-hd h3 {
	float: left;
	font-size: 20px;
	color: #494949;
	/*让粗体不加粗 400 == normal*/
	font-weight: 400;
}
.box-hd a {
	float: right;
	margin-right: 30px;
	font-size: 12px;
	color: #a5a5a5;
}
.box-bd {
	/*box-bd 宽度 超过了 版心 1200 是可以的，就就解决了问题*/
	width: 1215px;
}
.box-bd li {
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #ffffff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
.box-bd li img {
	width: 100%;
}
.box-bd li h4 {
	margin: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd li p {
	margin: 0 20px;
	font-size: 12px;
	color: #999;
}
.box-bd p span {
	color: orange;
}
/*box end */
.test{
	width: 1300px;
	height: 400px;
	background-color: #000000;
}

发现布局乱了。

因为父亲没有高度，子盒子都浮动，我们在下面再加个东西，就会跑到上面去了。

这就需要清除浮动了（参考清除浮动）。 => 4种方法，用伪类。

/*清除浮动的*/
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

<div class="box-bd clearfix">

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.39
Branch： branch03
commit description：a1.39（精品推荐大模块-清除浮动）

tag：a1.39

下边的内容其实形式与上面一样

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">
					我的课程表
				</div>
				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- goods START -->
	<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>
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->
	<div class="test">

	</div>
</body>
</html>

这里为啥清除浮动？（清除浮动情况参考8.4）

父级没高度，子盒子不浮动了，影响页面的布局。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.40
Branch： branch03
commit description：a1.40（精品推荐大模块-清除浮动是为了后续布局）

tag：a1.40

修改高度 => 417 - 33 = 384

6.6 6）底部模块制作

结构图如下：
在这里插入图片描述

1号盒子通栏大盒子底部 footer 给高度底色是白色
2号盒子版心水平居中
3号盒子版权 copyright 左对齐
4号盒子链接组 links 右对齐

（1）1号盒子通栏大盒子底部 footer 给高度 底色是白色

测量高度

（2）2号盒子版心水平居中

	<div class="footer w">
		123
	</div>

.footer {
	height: 384px;
	padding-top: 33px;
	background-color: pink;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.41
Branch： branch03
commit description：a1.41（精品推荐大模块-设置底部框子）

tag：a1.41

（3）3号盒子版权copyright 左对齐

	<div class="footer w">
		<!-- 左侧 -->
		<div class="copyright">
			<img src="images/logo.png" alt="">
			<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
				© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
			<a href="#" class="app"> 下载 app</a>
		</div>
	</div>

.copyright p {
	font-size: 12px;
	color: #666;
	margin: 25px 0 15px 0;
}

.app {
    display: block;
	width: 118px;
	height: 34px;
	border: 1px solid #00a4ff;
}

.app {
	display: block;
	width: 118px;
	height: 34px;
	border: 1px solid #00a4ff;
	text-align: center;
	line-height: 34px;
	font-size: 16px;
	color: #00a4ff;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.42
Branch： branch03
commit description：a1.42（精品推荐大模块-完成底部左侧）

tag：a1.42

（4）4号盒子链接组 links 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线实例</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<!--	.nav	-->
		<div class="nav">
			<!--	ul>li*3>a		-->
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<!--	.search  	-->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			user01
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner 部分start -->
	<div class="banner">
		<div class="w">
			<!-- 左侧 subnav  -->
			<div class="subnav">
					<!--	ul>li*9>a			-->
				<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>
			<!-- 右侧 course -->
			<div class="course">
				<div class="course-hd">
					我的课程表
				</div>
				<div class="course-bd">
					<!--		ul>li*3			-->
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>

					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分end -->
	<!-- goods START -->
	<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>
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->
	<!-- box start -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!--	.box-bd	-->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->
	<!-- footer start -->
	<div class="footer w">
		<!-- 左侧 -->
		<div class="copyright">
			<img src="images/logo.png" alt="">
			<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
				© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
			<a href="#" class="app"> 下载 app</a>
		</div>
		<!-- 右侧 -->
		<div class="links">
			<!--			dl>dt+dd*5>a			-->
			<dl>
				<dt>关于学成网</dt>
				<dd><a href="#">关于</a></dd>
				<dd><a href="#">管理团队</a></dd>
				<dd><a href="#">工作机会</a></dd>
				<dd><a href="#">客户服务</a></dd>
				<dd><a href="#">帮助</a></dd>
			</dl>
			<dl>
				<dt>新手指南</dt>
				<dd><a href="#">如何注册</a></dd>
				<dd><a href="#">如何选课</a></dd>
				<dd><a href="#">如何拿到毕业证</a></dd>
				<dd><a href="#">学分是什么</a></dd>
				<dd><a href="#">考试未通过怎么办</a></dd>
			</dl>

			<dl>
				<dt>合作伙伴</dt>
				<dd><a href="#">合作机构</a></dd>
				<dd><a href="#">合作导师</a></dd>
			</dl>
		</div>
	</div>
	<!-- footer end -->
</body>
</html>

.copyright {
	float: left;
}
.links {
	float: right;
}

设置边距麻烦，设置行高32px => 高度剩余法，高度用不了自然就剩下了

在这里插入图片描述

.links  dt {
	height: 35px;
	font-size: 16px;
	color: #333;
}
.links  dd a {
	font-size: 12px;
	color: #333;
}

多个元素横着，则需要设置浮动

.links  dl {
	float: left;
}

左边距设置100px（大概设置就行，不是太重要的信息）

.links  dl {
	float: left;
	margin-left: 100px;
}

鼠标移动上去

.links  dd a:hover {
	color: #004aff;
}

并且去掉粉色背景

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.43
Branch： branch03
commit description：a1.43（精品推荐大模块-完成底部）

tag：a1.43

注意别忘了，去掉body中为了写代码而设置的高度。

修复bug，底部大盒子是没有宽度的，只是第二个盒子（小迪忘写了）包裹的内容需要宽度。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.44
Branch： branch03
commit description：a1.44（优化精品推荐大模块）

tag：a1.44

7. chrome调试工具

Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试。我们现在只是使用html和css，我们先讲一下现在常用的调试。

7.1 怎样打开Chrome的开发者工具？

直接在页面上点击右键，然后选择 “检查” 快捷键 F12 或者 ctrl+shift+i

在这里插入图片描述

基本的结构布局是左边html 右边是css

在这里插入图片描述

7.1.1 chrome调试数值

可以鼠标点击后面的数值，按下键盘 上箭头 是调大数值，下箭头是调小数值

chrome5

7.1.2 快速定位css所在行数

chrome6

7.2 Chrome提示的常见布局错误

7.2.1 1). css单词书写错误提示

用下图所示的黑色箭头，点击我们需要的html元素。

在这里插入图片描述

7.2.2 2). css无显示

声明类名和html调用名不一致或者 css文件引入不对或者这个样式的前面多余了一些符号影响的

在这里插入图片描述

7.2.3 3). html 结构不匹配(重要)

左侧 展开可以看到html标签是否匹配

	<div class="header">
		<div class="logo"><!--</div>-->
		<div class="nav"></div>
	</div>

在这里插入图片描述

7.2.4 4). 通过颜色判断盒子

蓝色是盒子的宽度高度

青色是内边距

橙色是外边距

通过这个很方便的看到盒子给的范围

在这里插入图片描述

7.2.5 5）看看经常犯的低级错误

在这里插入图片描述

考虑到在blog中不好体现代码更改的位置，小迪才用github托管代码，大家可以查看github，看到详细版本修改过程，搭配博客学习。

（后续待补充）

7.（css）使用浮动布局学成网案例

文章目录

1. 页面制作重点提炼

2. 前期准备素材

3. 前期准备工作

4. CSS属性书写顺序(重点)

5. 布局流程

6. 页面制作

6.1 1) 头部制作

6.2 2）banner制作

6.3 3）课程表模块

6.4 4）精品推荐小模块

6.5 5）精品推荐大模块

6.6 6） 底部模块制作

7. chrome调试工具

7.1 怎样打开Chrome的开发者工具？

7.1.1 chrome调试数值

7.1.2 快速定位css所在行数

7.2 Chrome提示的常见布局错误

7.2.1 1). css单词书写错误提示

7.2.2 2). css无显示

7.2.3 3). html 结构不匹配(重要)

7.2.4 4). 通过颜色判断盒子

7.2.5 5）看看经常犯的低级错误

6.6 6）底部模块制作