HTML代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线首页</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 1.头部区域开始咯 --> <div class="header w"> <!-- logo 部分 --> <div class="logo"> <img src="images/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="images/user.png" alt=""> qq-hanmei </div> </div> <!-- 头部区域结束 --> <!-- 2.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> <!-- course 课程表模块 --> <div class="course"> <h2>我的课程表</h2> <div class="bd"> <ul> <li> <h4>继续学习 程序语言设计 </h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习 程序语言设计 </h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习 程序语言设计 </h4> <p>正在学习-使用对象</p> </li> </ul> <a href="#" class="more">全部课程</a> </div> </div> </div> </div> <!-- banner部分结束 --> <!-- 3.精品模块开始 --> <div class="goods w"> <h3>精品推荐</h3> <ul class="goods-item"> <li><a href="#">jQuery</a></li> <li><a href="#">Spark</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">JavaWeb</a></li> <li><a href="#">MySQL</a></li> </ul> <a href="#" class="mod">修改兴趣</a> </div> <!-- 精品模块结束 --> <!-- 4.box核心内容区域开始 --> <div class="box w"> <div class="box-hd"> <h3>精品推荐</h3> <a href="#">查看全部</a> </div> <div class="box-bd"> <ul class="clearfix"> <li> <img src="images/pic.png" alt=""> <h4> Think PHP 5.0 博客系统实战项目演练 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic2.png" alt=""> <h4> Android 网络图片加载框架详解 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic3.png" alt=""> <h4> Angular 2 最新框架+主流技术+项目实战 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic4.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生! </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic4.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic.png" alt=""> <h4> Think PHP 5.0 博客系统实战项目演练 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic2.png" alt=""> <h4> Android 网络图片加载框架详解 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic3.png" alt=""> <h4> Angular 2 最新框架+主流技术+项目实战 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic4.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生! </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li> <img src="images/pic4.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> </ul> </div> </div> <!-- 4.box核心内容区域结束 --> <!-- 编程入门区 --> <div class="box1 w clearfix"> <div class="box-hd"> <h3>编程入门</h3> <ul> <li>热门</li> <li>初级</li> <li>中级</li> <li>高级</li> </ul> <a href="#">查看全部</a> </div> <div class="rumen w"> <div class="left"><img src="images/l1.png" alt=""></div> <div class="right"> <div class="rightup"> <img src="images/rr.png" alt=""> <ul> <li><img src="images/ugui.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/kami.png" alt=""> <h4> Kami2首页界面切换效果 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/unti.png" alt=""> <h4> Unity Profiler入门 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lastt"><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> </ul> </div> </div> </div> </div> <!-- 编程入门区结束 --> <!-- 数据分析师区开始 --> <div class="box1 w clearfix"> <div class="box-hd"> <h3>数据分析师</h3> <ul> <li>热门</li> <li>初级</li> <li>中级</li> <li>高级</li> </ul> <a href="#">查看全部</a> </div> <div class="rumen w"> <div class="left"><img src="images/r22.png" alt=""></div> <div class="right"> <div class="rightup"> <img src="images/t2.png" alt=""> <ul> <li><img src="images/kami.png" alt=""> <h4> Kami2首页界面切换效果 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/ugui.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lastt"><img src="images/unti.png" alt=""> <h4> Unity Profiler入门 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> </ul> </div> </div> </div> </div> <!-- 数据分析师区结束 --> <!-- 机器学习师区开始 --> <div class="box3 w clearfix"> <div class="box-hd"> <h3>机器学习工程师</h3> <ul> <li>热门</li> <li>初级</li> <li>中级</li> <li>高级</li> </ul> <a href="#">查看全部</a> </div> <div class="itemm"> <ul> <li><img src="images/kami.png" alt=""> <h4> Kami2首页界面切换效果 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/ugui.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lastt"><img src="images/unti.png" alt=""> <h4> Unity Profiler入门 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lasttt"><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> </ul> </div> </div> <!-- 机器学习师区开始 --> <!-- 前端开发工程师区开始 --> <div class="box4 w clearfix"> <div class="box-hd"> <h3>前端开发工程师</h3> <ul> <li>热门</li> <li>初级</li> <li>中级</li> <li>高级</li> </ul> <a href="#">查看全部</a> </div> <div class="itemm"> <ul> <li><img src="images/kami.png" alt=""> <h4> Kami2首页界面切换效果 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/ugui.png" alt=""> <h4> Android Hybrid APP开发实战 H5+原生！ </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lastt"><img src="images/unti.png" alt=""> <h4> Unity Profiler入门 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> <li class="lasttt"><img src="images/cocos.png" alt=""> <h4> Cocos2d-x 引擎源码中的纹理优化 </h4> <div class="info"> <span>高级</span> ? 1125人在学习 </div> </li> </ul> </div> </div> <!-- 前端开发工程师区结束 --> <!-- 5.footer模块制作 --> <div class="footer"> <div class="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>关于学成网</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> <!-- 5.footer模块制作 --> </body> </html>
CSS代码
* { margin: 0; padding: 0; } .w { width: 1200px; margin: auto; } body { background-color: #f3f5f7; } li { list-style: none; } a { text-decoration: none; } .clearfix:before,.clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom:1; } .header { height: 42px; /* 注意此地方会层叠 w 里面的margin */ margin: 30px auto; } .logo { float: left; width: 198px; height: 42px; } .nav { float: left; margin-left: 60px; } .nav ul li { float: left; margin: 0 15px; } .nav ul li a { /* 行内元素转为块级元素 */ display: block; height: 42px; padding: 0 10px; line-height: 42px; font-size: 18px; color: #050505; } .nav ul li a:hover { border-bottom: 1px solid #00a4ff; color: #00a4ff; } /* search搜索模块 */ .search { float: left; width: 412px; height: 42px; margin-left: 70px; } .search input { float: left; width: 345px; height: 40px; border: 1px solid #00a4ff; /* 清除右边框 */ border-right: 0; color: #bfbfbf; font-size: 14px; /* 注意减去撑宽的px */ padding-left: 15px; } .search button { float: left; width: 50px; height: 42px; /* 按钮bottom默认有个边框需要我们手动去掉 */ border: 0; background: url(images/btm.jpg); } .user { float: right; line-height: 42px; margin-right: 30px; font-size: 14px; color: #666; } /* banner区域 */ .banner { height: 421px; background-color: #1c036c; } .banner .w { height: 421px; /* 1.背景图不重复 2.靠着盒子垂直上面 水平是居中 */ background: url(images/banner2.png) no-repeat top center; } .subnav { float: left; width: 190px; height: 421px; background-color: rgba(0,0,0,0.3); } .subnav ul li { height: 45px; line-height: 45px; padding: 0 20px; } .subnav ul li a { font-size: 14px; color: #fff; } .subnav ul li a span { float: right; } .subnav ul li a:hover { color: #00a4ff; } .course { float: right; width: 230px; height: 300px; background-color: #fff; /* 浮动的盒子不会有外边距合并的问题 */ margin-top: 50px; } .course h2 { height: 48px; background-color: #9bceea; text-align: center; line-height: 48px; font-size: 18px; color: #fff; } .bd { padding: 0 20px; } .bd ul li { padding: 14px 0; border-bottom: 1px solid #ccc; } .bd ul li h4 { font-size: 16px; color: #4e4e4e; } .bd ul li p { font-size: 12px; color: #a5a5a5; } .bd .more { display: block; height: 38px; border: 1px solid #00a4ff; text-align: center; line-height: 38px; color: #00a4ff; font-size: 16px; font-weight: 700; margin-top: 5px; } /* 精品推荐模块 */ .goods { height: 60px; background-color: #fff; margin-top: 10px; box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1); /* 行高会继承，会继承给3个孩子 */ line-height: 60px; } .goods h3 { float: left; margin-left: 30px; font-size: 16px; color: #00a4ff; } .goods .goods-item { float: left; padding-left: 30px; } .goods ul li { float: left; } .goods ul li a { padding: 0 30px; font-size: 16px; color: #050505; border-left: 1px solid #ccc; } .goods .mod { float: right; margin-left: 30px; font-size: 14px; color: #00a4ff; } .box { margin-top: 30px; } .box-hd { height: 45px; } .box-hd h3 { float: left; line-height: 45px; font-size: 20px; color: #494949; } .box-hd a { float: right; font-size: 12px; color: #a5a5a5; margin-top: 10px; margin-right: 30px; } .box1 { margin-bottom: 30px; } /* 把 li 的父亲 ul 修改得足够宽一行能装开5个盒子就不会换行了 */ .box-bd ul { width: 1225px; } .box-bd ul li { float: left; width: 228px; height: 270px; background-color: #fff; margin-right: 15px; margin-bottom: 15px; box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1); } .box-bd ul li img { width: 100%; } .box-bd ul li h4 { margin: 20px 20px 20px 25px; font-size: 14px; color: #050505; font-weight: 400; } .box-bd .info { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .box-bd .info span { color: #ff7c2d; } .box-hd ul { float: left; margin-left: 280px; } .box-hd ul li { float: left; margin-left: 70px; line-height: 45px; font-size: 16px; color: #868686; } .box3 { margin-bottom: 30px; } .left { float: left; width: 228px; height: 395px; } .left img { width: 100%; } .right { float: left; margin-left: 15px; } .rightup { float: left; height: 100px; } .rightup ul { width: 955px; } .rightup ul li { float: left; width: 228px; height: 270px; margin: 20px 10px 0 0; background-color: #fff; } .rightup ul li h4 { margin: 20px 20px 20px 25px; font-size: 14px; color: #050505; font-weight: 400; } .rightup .info { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .rightup .info span { color: #ff7c2d; } .rightup .lastt { float: right; } .rightup img { width: 100%; } .box4 { margin-bottom: 65px; } .itemm ul li { float: left; margin-right: 12px; width: 228px; height: 270px; background-color: #fff; } .itemm img { width: 100%; } .itemm ul li h4 { margin: 20px 20px 20px 25px; font-size: 14px; color: #050505; font-weight: 400; } .itemm .info { margin: 0 20px 0 25px; font-size: 12px; color: #999; } .itemm .info span { color: #ff7c2d; } .itemm .lasttt { float: right; } .footer { height: 425px; background-color: #fff; } .footer .w { padding-top: 35px; } .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; } .links { float: right; } .links dl { float: left; margin-left: 100px; } .links dl dt { font-size: 16px; color: #333; margin-bottom: 5px; } .links dl dt a { font-size: 12px; color: #333; }
原文：https://www.cnblogs.com/Zhaodq/p/15247186.html