学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】

来源：黑马前端
难度：⭐（简单）——适合刚学习html和css的新手小白
源码和素材：链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: fsih
效果图：

1 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;
}

2 布局流程

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

1、必须确定页面的版心（可视区），我们测量可得知。

2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成

3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

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

3 页面制作

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线-不是所有的网站都叫学成在线</title><link rel="stylesheet" href="style.css">
</head>
<body><class class="w"></class>
</body>
</html>

style.css:

/* 清除元素默认的内外边距 */
*{margin: 0;padding: 0;
}
/* 版心 1200 水平居中 */
.w {width: 1200px;margin: auto;
}

1) 头部制作

结构图如下：

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

index.html:


<body><!-- header头部模块开始 --><div class="header w"><!-- logo --><div class="logo"><img src="data:images/logo.png" alt=""></div><!-- nav --><div class="nav"><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" value="输入关键词"><button></button></div><!-- user --><div class="user"><img src="data:images/user.jpg" alt="" style="vertical-align: middle;">lilei-hanmm</div></div><!-- header头部模块结束 --></div>
</body>

style.css:

body {background-color: #f3f5f7;
}/* 清除默认样式 */
li {list-style: none;
}button {border: none;
}a {text-decoration: none;
}/* header start */.header {width: 1200px;height: 42px;/* background-color: pink; */margin: 30px auto;
}.logo {float: left;margin-right: 60px;
}.nav {float: left;
}.nav ul li {float: left;
}.nav ul li a {display: block;height: 40px;padding: 0 10px;margin-right: 20px;line-height: 40px;color: #050505;font-size: 18px;/* text-decoration: none; */
}/* 鼠标经过链接，出现底边框 */.nav ul li a:hover {border-bottom: 2px solid #00a4ff;
}.search {float: left;margin-left: 70px;
}.search input {float: left;width: 340px;height: 40px;border: 1px solid #00a4ff;border-right: 0;padding-left: 20px;color: gray;
}.search button {float: left;width: 50px;height: 42px;background-color: #fff;background: url(images/btn.png);
}.user {float: left;margin-left: 30px;height: 42px;line-height: 42px;font-size: 14px;color: #666;vertical-align: middle;
}

细节：用户部分的盒子中使用vertical-align实现图片垂直居中对其

2）banner制作

结构图如下：

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

index.html:

 <!-- banner 部分start --><div class="banner"><div class="w"><!-- 左侧 subnav  --><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><!-- banner 部分end -->

style.css:

/* banner start */
.banner{height: 420px;background: #1c036c url(images/banner2.jpg) no-repeat top center;}.subnav{float: left;width: 190px;height: 420px;padding: 0 20px;/* 背景半透明 */background: rgba(0,0,0,.3);}.subnav li{height: 45px;line-height: 45px;}
.subnav li a{font-size: 14px;color: white;/* text-decoration: none; */
}.subnav li a:hover{color: #00a4ff;
}
.subnav span{float: right;
}

3）课程表

模块

结构图如下：

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

index.html:

<!-- 右侧 course --><div class="course"><div class="course-hd">我的课程表</div><div class="course-bd"><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>

style.css:

.course{float: right;width: 228px;height: 300px;background-color: #f3f5f7;margin-top: 50px;
}.course-hd{height: 48px;background-color: #7ccdf8;color: white;font-size: 18px;font-weight: bold;text-align: center;line-height: 48px;}.course-bd{padding: 0 15px;
}.course-bd li{height: 50px;border-bottom: 1px solid #ccc;margin-top: 10px;
}
.course-bd ul{/* 外边距塌陷问题margin-top: 10px; */padding-top: 10px;
}.course-bd li h4{font-size: 14px;color: #4e4e4e;
}
.course-bd li p{font-size: 10px;color: #5a5a5a;
}
.all{display: block;height: 38px;border:1px solid #00a4ff;margin-top: 10px;line-height: 38px;font-size: 16px;color: #00a4ff;text-align: center;}

4）精品推荐小模块

结构图如下：

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

index.html:

 <!-- 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><!-- goods END -->

style.css:

/* goods start */
.goods{height: 60px;background-color:#fff;box-shadow: 2px 2px 2px rgba(0,0,0,.2);margin-top: 10px;line-height: 60px;/* 行高可以继承 */
}
.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;color:#00a4ff;margin-right: 30px;
}

5）精品推荐大模块

结构图如下：

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

清除浮动：
style.css:

.clearfix:before,
.clearfix::after{content: "";display: table;
}
.clearfix:after{clear: both;
}
.clearfix{*zoom: 1;
}

index.html:

<!-- box start --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 此地方一定要清除浮动，务必务必务必 --><div class="box-bd clearfix"><ul><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li></ul></div></div><!-- box end -->

style.css:

/* box start */
.box{display: block;margin-top: 15px;}
.box-hd{height: 60px;line-height: 60px;
}
.box h3{float: left;font-size: 20px;font-weight: normal;
}
.box-hd a{margin-right: 30px;float: right;font-size: 12px;color: #a5a5a5;
}
.box-bd{width: 1215px;}.box-bd li{float: left;width: 228px;height: 270px;margin-right: 15px;margin-top: 15px;background-color: #fff;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 li span{color:orange;
}

6）底部模块制作

结构图如下：

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

index.html:

 <!-- footer start --><div class="footer"><div class="w"><!-- 左侧 --><div class="copyright"><img src="data:images/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></dl></div></div></div><!-- footer end -->

style.css:

/* footer */
.footer{height: 385px;padding-top: 30px;
}.copyright{float: left;
}.copyright p{font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}.app{display: block;height: 34px;width: 118px;border:1px solid #00a4ff;margin-top: 10px;line-height: 34px;font-size: 16px;color: #00a4ff;text-align: center;
}.links{float: right;
}
.links dl{float: left;margin-left: 100px;
}.links dt{height: 35px;font-size: 16px;color: #333;
}.links dd a{font-size: 12px;color: #333;
}.links dd a:hover{color: #00a4ff;
}