CSS定位与浮动及经典三列布局 - 前端初学

代码

<!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、现在对绝对定位、相对定位以及浮动有了更深的理解；

Correcting teacher：

WJ

Correction status：qualified

Teacher's comments：写的很不错，能结合之前所学的知识，模仿php中文网！继续加油！

演示图

代码

学习小结