css实操：学成网综合案例

更新时间:2023-04-07 12:44:12 阅读：评论：0
css实操：学成网综合案例

页面效果：
易错点很多，需要注意的地方都有注释。常看！
HBuilder X > css > 学成网首页.html
<!DOCTYPE html> <html> <head> <meta chart="utf-8"> <title>学成网首页</title> <style type="text/css"> * {margin: 0;padding: 0;}.w {width: 1200px;margin: auto;}body {background-color: #F3F5F7;/* height: 3000px; */}li {list-style: none;}button {border: none;}/* 清除浮动 */.clearfix:before, .clearfix:after {content:"";display:table;}.clearfix:after {clear:both;}.header {height: 42px;margin:30px auto;/* background-color: pink; */}.logo {float: left;margin-right: 38px;}.nav ul li {float: left;display: inline-block;line-height: 42px;margin-right: 20px;}.nav ul li a {padding: 5px;text-decoration: none;color: #333333;font-size: 17px;}.nav ul li a:hover {border-bottom: 2px #00A4FF solid;}.arch {float: left;margin-left: 70px;line-height: 42px;}.arch input {float: left;width: 340px;height: 40px;/* 框内文字后移 */padding-left: 20px;border: 1px #00A4FF solid;color: #D3D4D5;}.arch button {float: left;width: 50px;height: 42px;background: url(images/images/anniu_06.png);}.ur {float: left;margin-left: 30px;line-height: 42px;font-size: 14px;color: #666;}.banner {height: 420px;background-color: #1C036C;background-position: center;background-image: url(images/images/banner2.png) ;}.left {float: left;width: 150px;height: 415px;padding: 0px 20px;padding-top: 5px;background-color: rgba(0,0,0,.3);}.left li {height: 45px;line-height: 45px;}.left a {text-decoration: none;color: #E9E9EC;font-size: 14px;}.left a:hover {color: #0681C4;}.left span {float: right;}.right {float: right;margin-top: 50px;margin-bottom: 70px;width: 228px;height: 300px;}.start {height: 48px;line-height: 48px;text-align: center;background-color: #9BCEEA;color: #F9FCFE;font-size: 18px;font-weight: 700;}.bgc {height: 252px;background-color: #fff;}.right ul {height: 192px;padding: 4px 18px;}.right li {height: 30px;padding: 15px 0px;border-bottom: 1px #EAEAEA solid;}.right a {text-decoration: none;color: #000000;font-size: 14px;}.right span {color: #BDBDBD;font-size: 12px;}.end {width: 198px;height: 38px;line-height: 38px;text-align: center;margin: 0px 14px;border: 1px #00A4FF solid;color: #00A4FF;font-size: 18px;}.goods {height: 60px;line-height: 60px;background-color: white;margin-top: 10px;box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);}.goods h3 {float: left;font-size: 16px;color: #00A4FF;padding: 0px 36px;}/* float 要添加在父盒子（goods-item）里， 如果添加在子盒子（a）里，会忽略其他元素（|）*/.goods-item {float: left;color: #BFBFBF;}.goods a {font-size: 16px;padding: 0px 34px;color: #000000;text-decoration: none;}.goods-item span {color: #BFBFBF;}.modify {float: right;color: #004aff;font-size: 14px;padding-right: 24px;}.kc {height: 60px;line-height: 60px;margin-top: 20px;}.kc span {display: inline-block;float: left;font-size: 20px;}.kc a {float: right;font-size: 12px;padding-right: 30px;color: #a5a5a5;text-decoration: none;}.cour {/* 小技巧： *//* 这个盒子一定不要设置高度，因为可能会放多行元素，溢出会自动换行 *//* 子盒子是可以比父盒子大的，只需要重新设置子盒子宽度，用来解决一行里margin的溢出问题 */width: 1215px;}.cour li {float: left;width: 228px;height: 270px;margin-right: 15px;margin-bottom: 15px;box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);background-color: white;}.cour img {width: 100%}.cour h4 {margin: 20px;font-size: 14px;font-weight: 400;}.cour p {margin: 0 20px 20px 20px;font-size: 12px;color: #a5a5a5;}.cour p span {color: #FF7C2D;}.footer {height: 385px;padding-top: 30px;background-color: #fff;}.copyright{float: left;}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0px;}.copyright a {display: block;width: 118px;height: 34px;border: 1px solid #00afff;text-align: center;line-height: 34px;color: #00a4ff;text-decoration: none;}.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;text-decoration: none;}</style></head><body><!-- 导航栏 nav --><div class="header w"><div class="logo"><img src="images/images/学成网logo_03.jpg"></div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><div class="arch"><input type="text" value="请输入关键词" /><button></button></div><div class="ur"><img src="images/images/学成网ur_06.png" >qq-chenying</div></div><!-- 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="start">我的课程表</div><div class="bgc"><ul><li><a href="#">继续学习 程序设计语言</a><br><span>正在学习-使用对象</span></li><li><a href="#">继续学习 程序设计语言</a><br><span>正在学习-使用对象</span></li><li><a href="#">继续学习 程序设计语言</a><br><span>正在学习-使用对象</span></li></ul><div class="e分子式是什么nd">全部课程</div></div></div></div></div><!-- 精品推荐 goods--><div class="goods w"><h3>精品推荐</h3><div class="goods-item">|<a href="#">JQuery</a>|<a href="#">Spark</a>|<a href="#">MySql</a>|<a href="#">Hadoop</a>|<a href="#">JavaWeb<湖州南浔古镇;/a>|<a href="#">Java</a></div><div class="modify">修改金额</div></div><!-- 大盒子 gg --><div class="big-box w"><div class="kc w"><span>精品推荐</span><a href="#">查看全部</a></div><!-- 此处一定要清除浮动 --><div class="cour clearfix"><ul><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  11张惠妹 掉了25人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li><li><img src="images/images/图层133.png"><h4>Think PHP 5.0 博客系统实战项目演练 </h4><p><span>高级</span>•  1125人在学习</p></li></ul></div></div><div class="footer"><div class="w"><!-- 左侧 --><div class="copyright"><!-- 左对齐 版权 统一用类名copyright --><img src="images/images/学成网logo_03.jpg" ><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载APP</a></div><!-- 右侧 --><div class="links"><!-- 链接 类名常用links --><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a&周记200字高中gt;</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></dl><dl><dt>关于学成网</dt><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>