1. 最终效果
2. 全部代码
次采取结构与样式相分离思想：
style.css文件：
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f5f7;
}
li {
list-style:none;
}
.w {
width: 1200px;
margin: 0 auto;
}
.header {
height: 42px;
margin: 30px auto;
}
.logo {
float:left;
width: 200px;
height: 42px;
}
.nav {
float:left;
margin-left: 60px;
}
.nav ul li {
float:left;
margin: 0 15px;
}
.nav ul li a {
display: block;
line-height: 42px;
padding: 0 10px;
font-size:18px;
color: black;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float:left;
width: 412px;
height: 42px;
margin-left: 60px;
}
.search input {
float:left;
width: 360px;
height: 38px;
/* 注意这个height本来是42px，由于边框是2px,所以要减 */
border: 2px solid #00a4ff;
border-right: none;
color:#e6e7e9;
text-indent: 15px;
font-size: 14px;
}
.search button {
float:left;
width: 50px;
height: 42px;
/* button自带边框 要去掉 */
border: none;
/* 将这个放大镜的图片作为button的背景 */
background: url(image/button.png);
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
.user img {
line-height: 42px;
}
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .w {
width: 1200px;
height: 420px;
background-image: url(image/banner.png);
}
.subnav {
float:left;
width: 190px;
height: 420px;
background-color: rgba(0, 0, 0, .3);
}
.subnav ul li {
/* 这句话是为了设置每行之间的距离 */
height: 45px;
/* 由于没有指定宽度，使用padding不会横向撑开盒子 */
padding: 0 20px;
}
.subnav ul li a {
/* 为了扩大链接的点击范围 变成inline-block 可以设置宽度高度了*/
display: inline-block;
width: 150px;
height: 45px;
line-height: 45px;
text-decoration: none;
color: white;
font-size: 14px;
}
.subnav ul li a span {
float:right;
}
.subnav ul li a:hover {
color:#00b4ff;
}
.course {
float:right;
width: 230px;
height: 300px;
background-color: #ffffff;
/* 由于这里的course是浮动的 所以不会出现外边距塌陷问题 */
margin-top: 50px;
}
.course h2 {
width: 230px;
height: 48px;
text-align: center;
line-height: 48px;
background-color: #9bceea;
font-size: 18px;
font-weight: bold;
color:white;
}
.course .body {
/* 这里由于border-bottom是属于li的（长度有限制），所以要在这里先设置一个左右的padding */
padding: 0 20px;
}
.course .body li {
padding: 10px 0;
border-bottom: 1px solid #cdc9c9;
}
.course .body h4 {
font-size: 14px;
color:#5a5a5a;
}
.course .body span {
font-size: 12px;
color:#b1b1b1;
}
.course .body a {
display: block;
height: 36px;
border: 2px solid #00a4ff;
color:#00a4ff;
text-decoration: none;
font-size: 16px;
line-height: 36px;
text-align: center;
}
.goods {
height: 60px;
margin-top: 10px;
box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
line-height: 60px;
}
.goods h3 {
float: left;
margin: 0 30px;
font-size: 16px;
color: #00a4ff;
}
.goods li {
float:left;
}
.goods li a {
font-size: 16px;
color: #050505;
padding: 0 30px;
/* 这句话不能加在上个模块中 因为这里是个短的线 li会继承高度 a是行内元素 没有高度 */
border-left: 1px solid #bfbfbf;
text-decoration: none;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
text-decoration: none;
}
.box {
margin-top: 35px;
}
.box .head {
height: 45px;
}
.box .head h3 {
float:left;
font-size: 20px;
font-weight: 400;
color:#494949;
}
.box .head a {
float:right;
text-decoration: none;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
/* 把li的父亲或爷爷修改的足够宽一行能装开5个盒子就不会换行了 */
/* 注意这里没有指定宽度 */
.box .body{
width: 1225px;
}
.box li {
float: left;
width: 228px;
height: 270px;
background-color:white;
margin-right: 15px;
margin-bottom: 15px;
}
.box li h3 {
font-size: 14px;
font-weight: 400;
color:black;
padding: 20px 20px 20px 25px;
}
.box .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.footer {
height: 415px;
background-color: white;
}
.footer .w {
/* 这里不要用margin 会出现塌陷 */
padding-top: 35px;
}
.footer .copyright {
float:left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
color: #00a4ff;
font-size: 16px;
text-decoration: none;
}
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd a {
text-decoration: none;
color: #333;
font-size: 12px;
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 头部 -->
<div class="header w">
<!-- 学成在线的logo -->
<div class="logo">
<img src="image/logo.png" alt="图片">
</div>
<!-- 导航栏 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" value="请输入关键词">
<button></button>
</div>
<!-- 用户 -->
<div class="user">
<img src="image/user.png" alt="图片">
qq-leishui
</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">
<h2>我的课程表</h2>
<div class="body">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<span>正在学习-使用对象</span>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<span>正在学习-使用对象</span>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<span>正在学习-使用对象</span>
</li>
<a href="#">全部课程</a>
</ul>
</div>
</div>
</div>
</div>
<!-- 精品推荐 -->
<div class="goods w">
<h3>精品推荐</h3>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<a href="#" class="mod">修改兴趣</a>
</div>
<!-- 主体 -->
<div class="box w">
<div class="head">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="body clearfix">
<ul>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
<li>
<img src="image/pic.png" alt="图片">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<div class="info"><span style="color:#ff7c2d">高级</span> • 1125人在学习</div>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="image/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#" class="app">下载APP</a>
</div>
<div class="links">
<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>
<dd><a href="#">工作机会</a></dd>
<dd><a href="#">客户服务</a></dd>
<dd><a href="#">帮助</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
3. 确定版心
这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：
.w {
width: 1200px;
margin: auto;
}
4. 头部header制作
- 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
- 2号学成在线是个logo盒子
- 3号是导航栏nav盒子，注意一般用导航栏时使用ul li a，使用padding撑开每个链接，不要指定这个盒子的宽度。
- 4号是搜索框search盒子，分成两部分，一部分是input搜索框，一部分是button（那个放大镜的图片作为button的背景图片）。
- 5号是user盒子，实现比较简单。
- 注意这些盒子都要使用浮动，使他们排成一行
5. banner 制作
- 1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
- 2 号盒子是版心，要水平居中对齐 (即width=1200px)
- 3 号盒子版心内，左对齐 subnav 侧导航栏
最好这里指定成float：left（感觉可能规范一点？）
这个subnav也是个盒子，设置背景色要是透明的。
subnav盒子中有9个链接，最好用ul li a来实现。
由于有9个链接，所以也有9个li，设置每个li的padding来设置左右上下边距。
如果想要链接a的点击范围变大，转化为block元素，设置长宽即可。
最右侧还有一个“>”，用span标签加在链接a中即可，同时指定成float：right - 4 号盒子版心内，右对齐 course 课程
这个课程course盒子内部可以分成两个盒子，一个是上面的“我的课程表”，可以用h2来实现。
下面的body部分又可以看成一个盒子，有三个li和一个链接a。
6. 精品推荐小模块
- 大盒子水平居中 goods 精品，注意此处有个盒子阴影
- 1 号盒子是标题 H3 左侧浮动 ，设置一个margin-left控制边距
- 2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
- 3 号盒子右浮动 mod 修改
7. 精品推荐大模块
- 1 号盒子为最大的盒子， box 版心水平居中对齐
- 2 号盒子为上面部分，里面左侧标题 H3 左浮动，右侧链接 a 右浮动
- 3 号盒子为底下部分，里面是无序列表，有 10 个小 li 组成
- 小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li
我们用到清除浮动，因为 3号 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里 面的盒子浮动会影响下面的布局，因此需要清除浮动。
8. 底部模块
- 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
- 2 号盒子版心水平居中
- 3 号盒子版权 copyright 左对齐 float:left
- 4 号盒子链接组 links 右对齐 float:right
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
