前端学习-布局练习

mac2022-06-30 24

效果图:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>imooc</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } /* header */ .header { height: 60px; box-shadow: 0 1px 2px whitesmoke; min-width: 1200px; } .header img { float: left; } .header li { height: 60px; line-height: 60px; color: #4D555D; } .header_menu { float: left; } .header_menu li { float: left; margin-left: 20px; } .header_menu li:nth-child(1) { margin-left: 0; } li:hover { color: black; cursor: pointer; } .header_menu_right { float: right; } .header_menu_right li { float: left; margin-right: 20px; } /* banner_div */ .banner_div { padding: 20px; box-shadow: 0 1px 2px whitesmoke; background: #f6f5f9; } .banner { margin: 0 auto; width: 1150px; border-radius: 8px; box-shadow: 0 1px 2px #2B333B; } .banner ul { float: left; background: #2B333B; border-top-left-radius: 8px; border-bottom-left-radius: 8px; width: 200px; padding: 10px 0 10px 10px; } .banner li { height: 50px; line-height: 50px; font-size: 14px; color: #93979C; padding-left: 20px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .banner li:hover { color: white; background: #6b7176; } .banner img { width: 940px; height: 370px; display: block; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .dj { margin: 20px auto; width: 1150px; } .dj span:nth-child(1) { font-size: 24px; font-weight: bold; } .dj span:nth-child(2) { font-size: 14px; color: #6b7176; } .dj_ul { margin: 20px auto; width: 1150px; overflow: hidden; } .dj_ul li { float: left; background: #f3f5f6; padding: 15px 10px; width: 190px; border-radius: 5px; margin-right: 20px; } .dj_ul:nth-child(5) { clear: both; } .dj_ul li:hover { box-shadow: 2px 2px 2px 2px #93979C; } .dj_ul li img { width: 40px; height: 40px; float: left; margin-right: 10px; } .dj_ul li p:nth-child(2) { font-weight: bold; font-size: 16px; } .dj_ul li p:nth-child(3) { font-size: 12px; } .kc { padding: 20px; box-shadow: 0 1px 2px whitesmoke; background: #f8fafc; } .kc .dj:nth-child(1) { font-size: 24px; font-weight: bold; } .kc ul { margin: 20px auto; width: 1150px; overflow: hidden; } .kc ul li { float: left; margin-top: 20px; margin-right: 30px; } .kc ul li div img { width: 250px; border-radius: 5px; } .kc ul li div span { position: absolute; margin-left: -240px; margin-top: 110px; background: #2B333B; color: white; font-size: 10px; padding: 3px 5px; border-radius: 2px; } .pa { font-weight: bold; max-width: 250px; max-lines: 2; height: 40px; line-height: 20px; overflow: hidden; } .pa:hover { color: rebeccapurple; } .bb { color: #93979C; font-size: 12px; } .bc { color: #2B333B; font-size: 12px; } </style> </head> <body> <header class="header"> <img style="height: 60px;" src="https://www.imooc.com/static/img/index/logo.png" alt="immoc"> <ul class="header_menu"> <li>免费课程</li> <li>实战课程</li> <li>就业班</li> <li>专栏</li> <li>猿问</li> <li>手记</li> </ul> <ul class="header_menu_right"> <li>下载APP</li> <li><i class="fa cart-plus"></i>购物车</li> <li><i class="fa ofbell"></i></li> <li>我的课程</li> <li>头像</li> </ul> </header> <div class="banner_div"> <div class="banner"> <ul> <li>前沿/区块链/人工智能</li> <li>前端/小程序/JS</li> <li>后端/JAVA/Python</li> <li>移动/Android/iOS</li> <li>云计算/大数据/容器</li> <li>运维/测试/数据库</li> <li>UI设计/3D动画/游戏</li> </ul> <img src="https://img.mukewang.com/5d90545e0001e28118720764.jpg" alt="提示文字"> </div> <div class="dj"> <span>就业班</span> <span>零基础快速就业</span> </div> <ul class="dj_ul"> <li> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998487514&di=7d7f1aaea9578652772a47c1119c383a&imgtype=0&src=http://www.logicsolutions.com/wp-content/uploads/2015/06/html5.png"> <p>Web前端工程师</p> <p>从未接触经验也可以学好</p> </li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998627337&di=8f706a9abfa4dd66e1fe45d60367b3cb&imgtype=0&src=http://pic.51yuansu.com/pic2/cover/00/31/76/5810c9866ceca_610.jpg" alt=""> <p>Web前端工程师</p> <p>从未接触经验也可以学好</p> </li> <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2246437286,3797043391&fm=26&gp=0.jpg" alt=""> <p>Web前端工程师</p> <p>从未接触经验也可以学好</p> </li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998664542&di=45fa79b0cd7f66c6e385f42bb642f719&imgtype=0&src=http://attach.bbs.miui.com/forum/201506/28/132730d7g9xbx9uo7qxrog.jpg" alt=""> <p>Web前端工程师</p> <p>从未接触经验也可以学好</p> </li> <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569998680036&di=5216ff5dd448f05b2e4571c354f4b778&imgtype=0&src=http://image.flaticon.com/icons/png/512/919/919830.png" alt=""> <p>Web前端工程师</p> <p>从未接触经验也可以学好</p> </li> </ul> <div class="dj"> <span>职场进阶</span> <span>1年以上开发经验系统成长</span> </div> </div> <div class="kc"> <div class="dj"> <p>课程推荐</p> </div> <ul> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg"> <span>算法</span> </div>  <p><a class="pa">玩转算法系列--玩转数据结构</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img1.mukewang.com/szimg/5ad05dc00001eae705400300-360-202.jpg"> <span>算法</span> </div>  <p><a class="pa">玩转算法系列--玩转数据结构</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> <li> <div> <img src="https://img4.mukewang.com/szimg/5d4ceaef09c3cb6612000676-360-202.png"> <span>Java</span> </div> <p><a class="pa">Java并发编程精讲</a></p> <div class="bb">中级 999 评分:10.0</div> <div class="bc">$348.0</div> </li> </ul> </div> <footer> </footer> </body> </html>

练习中知识

设置列表无样式

list-style-type: none;

设置阴影

box-shadow: 0 1px 2px whitesmoke;

设置圆角

border-radius: 8px;

清除浮动

overflow: hidden;

又是满满的一天,搞起!

最新回复(0)