css项目5:学成网首页制作（div+css）一个大页面！！！
1、index.html
/*消除默认样式*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学成网首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="fixedbanner">
<ul>
<li><a href="#">编程入门</a></li>
<li><a href="#">数据分析师</a></li>
<li><a href="#">机器学习工程师</a></li>
<li><a href="#">前端开发工程师</a></li>
<li><a href="#">人工智能工程师</a></li>
<li><a href="#">全栈工程师</a></li>
<li><a href="#">iOS工程师</a></li>
<li><a href="#">VR开发者</a></li>
<li><a href="#">深度学习</a></li>
<li><a href="#">商业预测分析师</a></li>
<li><a href="#">Android开发工程师</a></li>
</ul>
</div>
<!-- header开始 -->
<div class="header w">
<!-- logo -->
<div class="logo">
<img src="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><img src="images/search.png" alt=""></button>
</div>
<!-- user -->
<div class="user">
<img src="images/user.png" alt="">qq-leishui
</div>
</div>
<!-- header结束 -->
<!-- banner开始 -->
<div class="banner">
<div class="w">
<div class="left">
<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="right">
<div class="right-top">
<h3>我的课程表</h3>
</div>
<div class="right-mid">
<ul>
<li>
<h4>继续学习 程序设计语言</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序设计语言</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序设计语言</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
</div>
<div class="right-bottom">
<a href="#">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner结束 -->
<!-- recommend开始 -->
<div class="recommend w">
<div class="recommend-left"><h4>精品推荐</h4></div>
<div class="recommend-mid">
|<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="recommend-right">
<a href="#">修改兴趣</a>
</div>
</div>
<!-- recommend结束 -->
<div class="rec w clearfix">
<h4>精品推荐</h4>
<ul>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<img src="images/hot.png" alt="" class="hot">
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
</ul>
</div>
<!-- rec开始 -->
<div class="rec w clearfix">
<h4>精品推荐</h4>
<ul>
<li>
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
<li>
<div class="rec-top">
<img src="images/bg.png" alt="">
</div>
<div class="rec-mid">
<p>Think PHP 5.0 博客系统实战项目演练</p>
</div>
<div class="rec-bottom">
<p><span>高级</span> • 1125人在学习</p>
</div>
</li>
</ul>
</div>
<!-- red结束 -->
<!-- footer开始 -->
<div class="footer">
<div class="w">
<!-- 左边盒子 -->
<div class="footer_left">
<div class="footer_left-top">
<img src="images/logo.png" alt="">
</div>
<div class="footer_left-mid">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br/>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
</div>
<div class="footer_left-right">
<a href="#">下载app</a>
</div>
</div>
<div class="footer_right">
<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结束 -->
</body>
</html>
style.css
/*消除默认样式*/
* {
padding: 0;
margin: 0;
}
/*消除列表默认样式*/
li {
list-style: none;
}
a {
text-decoration: none;
}
button {
border: 0;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
/*整体背景*/
body {
background-color: #f3f5f7;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.fixedbanner {
position: fixed;
top: 500px;
/*将这个固定栏设置在版心的左边，公式：
先left: 50%;再margin-left:版心的一半+自身的宽度;*/
left: 50%;
margin-left: -790px;
width: 180px;
height: 400px;
background-color: #ffffff;
}
.fixedbanner ul li {
margin: 0 20px;
height: 35px;
}
.fixedbanner li a {
font-size: 14px;
color: #000;
}
.fixedbanner li a:hover {
color: #00a4ff;
}
/*header开始*/
.header {
margin: 30px auto;
height: 42px;
/*background-color: pink;*/
}
.logo {
float: left;
margin-right: 30px;
}
.nav {
float: left;
}
.nav li {
float: left;
}
.nav li a {
display: inline-block;
margin-left: 35px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #050505;
}
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
}
.search input {
float: left;
margin-left: 94px;
padding-left: 19px;
height: 40px;
width: 341px;
border: 1px solid #00a4ff;
border-right: 0;
font-size: 14px;
color: #bfbfbf;
}
.search button {
float: left;
}
.search button img {
height: 42px;
}
.user {
float: left;
margin-left: 30px;
}
.user {
font-size: 14px;
color: #666666;
}
/*header结束*/
/*banner开始*/
.banner {
height: 420px;
background: #1c036c url(images/banner.png) no-repeat center top;
}
.left {
float: left;
padding: 25px 20px 0;
width: 149px;
height: 395px;
/*background-color: pink;*/
background: rgba(0,0,0,.3);
}
.left a span {
float: right;
}
.left ul li {
height: 43px;
}
.left li a {
font-size: 14px;
color: #ffffff;
}
.left li a:hover {
color: #00b4ff;
}
.right {
float: right;
margin-top: 50px;
width: 228px;
height: 300px;
background-color: #ffffff;
}
.right-top {
background-color: #9bceea;
height: 48px;
line-height: 48px;
padding: 0 65px;
}
.right-top h3 {
font-size: 18px;
color: #ffffff;
}
.right-mid ul li {
height: 50px;
margin: 0 16px;
border-bottom: 1px solid #efefef;
margin-top: 13px;
}
.right-mid li h4 {
font-size: 16px;
color: #4e4e4e;
}
.right-mid li p {
font-size: 12px;
color: #a5a5a5;
}
.right-bottom {
margin: 5px 16px 0px;
}
.right-bottom a {
display: inline-block;
width: 100%;
height: 52px;
line-height: 52px;
border: 1px solid #22b0ff;
text-align: center;
color: #22b0ff;
}
.right-bottom a:hover {
background-color: #22b0ff;
color: #fff;
}
/*banner结束*/
/* recommend开始*/
.recommend {
height: 60px;
line-height: 60px;
border-bottom: 1px solid #dcdee0;
}
.recommend-left {
float: left;
margin: 0 30px;
}
.recommend h4 {
font-size: 16px;
color: #00a4ff;
}
.recommend-mid {
float: left;
color: #bfbfbf;
}
.recommend-mid a {
margin: 0 35px;
font-size: 16px;
color: #050505;
}
.recommend-right {
float: right;
}
.recommend-right a {
margin-right: 26px;
font-size: 14px;
color: #00a4ff;
}
/*recommend结束 */
/* rec开始*/
.rec {
margin-top: 36px;
}
.hot {
position: absolute;
top: 0;
right: 0px;
}
.rec h4 {
height: 20px;
font-size: 20px;
color: #494949;
font-weight: normal;
}
.rec ul {
margin-top: 20px;
width: 1215px;
float: left;
}
.rec ul li {
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
width: 226px;
height: 270px;
background-color: #ffffff;
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.rec-top img {
width: 100%;
}
.rec-mid p {
margin: 20px 20px;
font-size: 14px;
color: #050505;
}
.rec-bottom p {
margin: 0 20px;
font-size: 12px;
color: #999999;
}
.rec-bottom p span {
color: #ff7c2d;
}
/* rec结束*/
/*footer开始*/
.footer {
height: 420px;
background-color: #ffffff;
}
/*footer结束*/
.footer_left {
float: left;
margin-top: 32px;
}
.footer_left-mid p {
margin-top: 26px;
font-size: 12px;
color: #666666;
}
.footer_left-right a {
display: inline-block;
margin-top: 17px;
width: 118px;
height: 34px;
line-height: 34px;
border: 1px solid #00a4ff;
font-size: 16px;
color: #00a4ff;
text-align: center;
}
.footer_left-right a:hover {
color: #fff;
background-color: #00a4ff ;
}
.footer_right {
float: right;
}
.footer_right dl {
float: left;
margin-top: 30px;
margin-left: 130px;
}
.footer_right dt {
margin-bottom: 15px;
font-size: 16px;
color: #333333;
}
.footer_right dd a {
font-size: 12px;
color: #333333;
}
.footer_right dd a:hover {
color: #00a4ff;
}
3、结果
链接：https://pan.baidu.com/s/17Yp8RKSRCXt0w-wI16mBYg
提取码：z1ea
4、感想
（1）先确定版心的位置，然后写的时候是一行行的写，我原来都是整个盒子写出来，再写内容，我发现我思路不对，按照上面的代码，我知道了：先确定版心，然后一行行的完成
（2）半透明背景：rbga(0,0,0,.3)；
（3）盒子阴影:box-shadow: 2px 2px 2px rbga(0,0,0,.3)；
（4）对于有多个列表的时候，不确定长度时，为父亲盒子不设置高度，但要为父盒子设置伪类
（5）margin padding要熟练掌握
（6）切图也很重要