今天作了第一个较大的整体网页 代码： 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="./css/index.css"> </head> <body> <!-- 头部模块 --> <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> <!-- 搜索框 --> <div class="search"> <form action=""> <input type="text" placeholder="输入关键词"> <button> </button> </form> </div> <!-- user用户 --> <div class="user"> <img src="./images/user.png" alt=""> ZN </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="course-bd"> <ul> <li><a href="#"> <h5>继续学习 程序语言设计</h5> <p>正在学习-使用对象</p> </a></li> <li><a href="#"> <h5>继续学习 程序语言设计</h5> <p>正在学习-使用对象</p> </a></li> <li><a href="#"> <h5>继续学习 程序语言设计</h5> <p>正在学习-使用对象</p> </a></li> </ul> <a href="#">全部课程</a> </div> </div> </div> </div> <!-- banner部分结束 --> <!-- 商品推荐模块开始 --> <div class="goods w"> <h3>精品推荐</h3> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Vue</a></li> <li><a href="#">React</a></li> </ul> <a href="#" class="mod">修改兴趣</a> </div> <!-- 商品模块结束 --> <!-- 精品推荐模块开始 --> <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=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> <li> <img src="./images/pic.png" alt=""> <h3>Think PHP 5.0 博客系统实战项目演练</h3> <p><em>高级</em> • 1125人在学习</p> </li> </ul> </div> </div> <!-- 精品推荐模块结束 --> <!-- 编程入门 --> <div class="zn w"> <div class="zn1 clearfix"> <h3>编程入门</h3> <ul> <li><a href="#">热门</a></li> <li><a href="#">初级</a></li> <li><a href="#">中级</a></li> <li><a href="#">高级</a></li> </ul> <a href="#">查看全部</a> </div> <div class="zn2 clearfix"> <div class="left"><img src="./images/left.jpg" alt=""></div> <div class="right"> <div class="top"><img src="./images/top.jpg" alt=""> </div> <div class="down"> <ul> <li><img src="./images/bottom01.jpg" alt=""></li> <li><img src="./images/bottom02.jpg" alt=""></li> <li><img src="./images/bottom03.jpg" alt=""></li> <li><img src="./images/bottom04.jpg" alt=""></li> </ul> </div> </div> </div> </div> <!-- 编程入门结束 --> <!-- 底部模块 --> <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="#">下载app</a> </div> <div class="links"> <dl> <dt><a href="#">关于学成网</a></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><a href="#">新手指南</a></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><a href="#">合作伙伴</a></dt> <dd><a href="#">合作机构</a></dd> <dd><a href="#">合作导师</a></dd> </dl> </div> </div> </div> <!-- 底部模块结束 --> </body> </html>css代码：
*{ margin: 0; padding: 0; } body { font: 14px/1.5 sans-serif; color: #050505; background-color: #f3f5f7; } li { list-style: none; } em, i { font-style: normal; } a { text-decoration: none; color: #050505; } a:hover { color: #00a4ff; } img { vertical-align: middle; } button { cursor: pointer; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* 基础公共样式 css reset 初始化*/ /* 版心公共样式 */ .w { width: 1200px; margin: auto; } /* 头部开始 */ .header { height: 72px; padding-top: 28px; } .logo { float: left; } .nav { float: left; margin-left: 65px; } .nav ul li { float: left; margin-right: 15px; } .nav li a { display: block; height: 40px; line-height: 40px; padding: 0 10px; font-size: 18px; color: #050505; } .nav a:hover { border-bottom: 2px solid #00a4ff; color: #00a4ff; } .search { float: left; width: 412px; height: 41px; margin-left: 60px; } .search input { float: left; width: 345px; height: 39px; border: 1px solid #00a4ff; padding-left: 15px; border-right: 0; } .search button { float: left; width: 50px; height: 41px; background-color: skyblue; border: 0; background: url(../images/btn.png); } .user { float: left; margin-left: 30px; margin-top: 5px; } .user img { margin-right: 5px; } /* 头部结束 */ /* banner开始 */ .banner { height: 420px; background-color: #1c036c; } .banner .w { height: 420px; background: url(../images/banner2_20190819_210028.png); } /* 左侧 */ .subnav { float: left; width: 190px; height: 407px; background-color: rgba(0,0,0,.4); padding-top: 13px; } .subnav ul li a { display: block; height: 44px; line-height: 44px; font-size: 14px; color: #fff; padding: 0 20px; } .subnav li a span { float: right; } .subnav ul li a:hover { background-color: rgba(0,0,0,.6); color: #00a4ff; } /* 右侧 */ .course { float: right; width: 228px; height: 300px; background-color: #fff; margin-top: 50px; } .course h2 { height: 48px; background-color: #9bceea; text-align: center; line-height: 48px; color: #fff; } .course .course-bd { padding: 10px 18px 0; } .course-bd li { height: 50px; margin-top: 10px; border-bottom: 1px solid #a5a5a5; } .course-bd li h5 { font-size: 14px; color: #a5a5a5; } .course-bd li p { font-size: 12px; color: #a5a5a5; } .course-bd>a { display: block; height: 38px; border: 1px solid #00a4ff; text-align: center; line-height: 38px; font-weight: 700; color: #00a4ff; margin-top: 6px; } .course-bd>a:hover { background-color: #00a4ff; color: #fff; } /* banner结束 */ /* 商品推荐开始 */ .goods { height: 60px; margin-top: 8px; background-color: #fff; box-shadow: 2px 2px 2px 2px rgba(0,0,0,.1); line-height: 60px; } .goods h3, .goods ul { float: left; } .goods ul li { float: left; } .goods ul li a { padding: 0 35px; border-left: 1px solid #ccc; } .mod { float: right; margin-right: 25px; color: #00a4ff; } .goods h3 { font-style: 16px; color: #00a4ff; margin:0 35px; } /* 商品推荐结束 */ /* 精品推荐模块 */ .box { margin-top: 30px; } .box-hd { height: 40px; } .box-hd h3 { float: left; } .box-hd a { float: right; margin: 10px 30px 0 0; } .box-bd { width: 1215px; } .box-bd li { float: left; width: 228px; height: 270px; background-color: #fff; margin-right: 15px; margin-bottom: 15px; } .box-bd ul img { width: 100%; } .box-bd h3 { font-style: 14px; font-weight: 400; margin: 22px; } .box-bd p { color: #999; font-size: 12px; margin: 0 22px; } .box-bd p em { color: #ff7c2d; } /* 精品推荐模块结束 */ /* 编程入门 */ .zn1 { height: 60px; line-height: 60px; } .zn .zn1 h3 { float: left; font-weight: 400; } .zn1 ul { margin-left: 368px; } .zn1 .li { float: left; } .zn1 li a { float: left; font-size: 16px; margin-left: 71px; color: #868686; } .zn1 li a:hover { color: #00a4ff; } .zn .zn1>a { float: right; font-size: 12px; color: #a5a5a5; } .zn2 { height: 392px; } .zn2 .left { width: 228px; height: 392px; float: left; } .zn2 .right { width: 972px; float: left; } .zn2 .right .down { float: left; width: 972px; height: 277px; } .zn2 .down li { float: left; margin-left: 15px; } .zn2 .right .top { margin-left: 15px; margin-bottom: 15px; } /* 编程入门结束 */ /* 底部模块 */ .footer { height: 417px; background-color: #fff; } .footer .w { padding-top: 33px; } .copyright { float: left; } .copyright p { width: 432px; margin: 20px 0; font-size: 12px; line-height: 18px; } .copyright a { display: block; width: 126px; height: 36px; border: 1px solid #00a4ff; text-align: center; line-height: 36px; color: #00a4ff; } .links { float: right; } .links dl { float: left; margin-left: 130px; } .links dl dt { font-size: 16px; height: 30px; } .links dl dd { font-size: 12px; height: 20px; }效果图： 通过今天的学习，我可以把之前所学的知识综合起来，继续努力。
