收藏
WJ批改状态：合格
老师批语：写的很不错，能结合之前所学的知识，模仿php中文网！继续加油！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>布局练习</title><style>/* 初始化 */* { padding: 0; margin: 0; box-sizing: border-box; font-size: 14px; }body { background-color: #f3f5f7; }li { list-style: none; }a { text-decoration: none; }.clear { zoom: 1; }.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/* 初始化 *//* 头部样式 */.header { position: relative; background-color: #000; }.header .logo { position: absolute; top: 0; left: 20px; height: 60px; width: 140px; background: url(https://www.php.cn/static/images/logo.png) no-repeat center center; background-size: 100%; }.nav { padding-left: 180px; }.guest-box { float: right; }.header li { float: left; }.nav > li { margin: 0 10px; position: relative; }.nav > li a, .guest-box > li a { display: inline-block; height: 60px; line-height: 60px; color: #bbb; padding: 0 20px; }.nav > li a:hover, .guest-box > li a:hover { color: #FFF; }.subnav { position: absolute; width: 222px; border: 1px solid #d2d2d2; top: 60px; display: none; background-color: #FFF; }.subnav > li a { color: #333; display: block; width: 110px; height: 40px; line-height: 40px; }.subnav > li a:hover { color: #333; background-color: #f2f2f2; }.navbar { position: absolute; left: 0; bottom: 0; width: 100px; height: 5px; background-color: #00a700; }/* 头部样式 *//* 内容区域样式 */.adbox { width: 1200px; margin: 20px auto; }.adbox img { border-radius: 8px; }.content { width: 1200px; margin: auto; position: relative; }.content > .left { position: absolute; top: 0; left: 0; width: 300px; }.content > .right { position: absolute; top: 0; right: 0; width: 260px; }.content > .middle { margin-left: 310px; margin-right: 270px; }/* 栏目框样式 */.content-box { height: 420px; width: 100%; background-color: #FFF; border-radius: 8px; }.content-box .box-head { margin: 0 15px; border-bottom: 1px dotted #e9e9e9; padding: 8px 5px; font-weight: bolder; }.toutiaolist { padding: 15px; }.toutiaolist li { height: 30px; line-height: 30px; }.toutiaolist li a { color: #333; }.courselist li { float: left; width: 33.333%; margin-top: 20px; }.courselist li .course { width: 180px; height: 160px; margin: auto; border-radius: 8px; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1); font-size: 30px; text-align: center; line-height: 160px; }.shouce { padding: 0 15px 0 15px;}.shouce li { position: relative; margin-top: 20px; }.shouce li img { position: absolute; top: 0; left: 0; width: 45px; height: 45px; }.shouce li a { display: block; color: #333; margin-left: 55px; font-size: 13px; line-height: 20px; }.footer { background-color: #393D49; color: #787d82; position: fixed; bottom: 0; width: 100%; padding: 15px 0; }.footer p { height: 30px; line-height: 30px; font-size: 12px; text-align: center; }</style></head><body><div class="header clear"><a href="http://php.cn" class="logo"></a><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">视频教程</a></li><li><a href="#">入门教程</a></li><li><a href="#">社区问答</a></li><li><a href="#">技术文章</a><ul class="subnav clear"><li><a href="#">头条</a></li><li><a href="#">博客</a></li><li><a href="#">PHP教程</a></li><li><a href="#">JS教程</a></li><li><a href="#">Mysql教程</a></li><li><a href="#">PHP框架</a></li></ul></li><li><a href="#">资源下载</a></li><li><a href="#">编程词典</a></li><li><a href="#">工具下载</a></li><li><a href="#">PHP培训</a></li></ul><ul class="guest-box"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div><div class="container"><div class="adbox"><a href="https://www.php.cn/toutiao-387072.html" target="_blank"><img src="https://www.php.cn/static/images/index_ad222.jpg"></a></div><div class="content"><div class="left"><div class="content-box"><div class="box-head">头条</div><div class="box-body"><ul class="toutiaolist"><li><a href="#">php中文网原创视频：《天龙八部》公益ph</a></li><li><a href="#">php中文网《玉女心经》公益PHP培训系列</a></li><li><a href="#">php的版本发展历史（1995-2020）</a></li><li><a href="#">您知道吗？最好的语言：PHP 25 岁了！</a></li><li><a href="#">史上最污技术解读，我竟然秒懂了</a></li><li><a href="#">2020年最新5个简洁优秀的个人博客模板免</a></li><li><a href="#">5款优秀的vue后台管理系统模板推荐</a></li><li><a href="#">6个大气的bootstrap后台管理系统模板推荐</a></li><li><a href="#">phpstudy v8.1.0.4 版本今日发布！</a></li><li><a href="#">您知道吗？最好的语言：PHP 25 岁了！</a></li><li><a href="#">史上最污技术解读，我竟然秒懂了</a></li><li><a href="#">php中文网《玉女心经》公益PHP培训系列</a></li></ul></div></div></div><div class="middle"><div class="content-box"><div class="box-head">最新课程</div><div class="box-body"><ul class="courselist clear"><li><div class="course">1</div></li><li><div class="course">2</div></li><li><div class="course">3</div></li><li><div class="course">4</div></li><li><div class="course">5</div></li><li><div class="course">6</div></li></ul></div></div></div><div class="right"><div class="content-box"><div class="box-head">常用手册</div><div class="box-body"><ul class="shouce"><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li><li><img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"><a href="#">php手册Linux手册</a><a href="#">ThinkPHP6.0CI手册大全</a></li></ul></div></div></div></div></div><div class="footer"><div class="content"><p>关于我们 | 免责申明 | 赞助与捐赠 | 广告合作</p><p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p><p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号</p><p>座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101</p></div></div><script>const navs = document.querySelectorAll('.nav > li');navs.forEach(function (nav) {nav.addEventListener('mouseover', showMenu);nav.addEventListener('mouseout', closeMenu);});function showMenu (event) {if(event.target.nextElementSibling != null && event.target.nextElementSibling.nodeName == 'UL'){event.target.nextElementSibling.style.display = 'block';}const currentnav = event.currentTarget;const navbar = document.createElement('span');navbar.classList.add('navbar');currentnav.appendChild(navbar);}function closeMenu (event) {if(event.target.nextElementSibling != null && event.target.nextElementSibling.nodeName == 'UL'){event.target.nextElementSibling.style.display = 'none';}const navbars = document.querySelectorAll('.navbar');navbars.forEach(function (navbar) {navbar.parentNode.removeChild(navbar);});}</script></body></html>
1、本次练习结合了之前学过的下拉菜单、事件监听，之前学的好多记不住都忘记了，练习时候又回过头看直播回放视频，巩固了一下；
2、现在对绝对定位、相对定位以及浮动有了更深的理解；
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
