search

博客列表 >CSS定位与浮动及经典三列布局

CSS定位与浮动及经典三列布局

Dobeen
Dobeen原创
2020年06月19日 11:52:43469浏览

演示图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>布局练习</title>
  6.   <style>
  7.     /* 初始化 */
  8.     * { padding: 0; margin: 0; box-sizing: border-box; font-size: 14px; }
  9.     body { background-color: #f3f5f7; }
  10.     li { list-style: none; }
  11.     a { text-decoration: none; }
  12.     .clear { zoom: 1; }
  13.     .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  14.     /* 初始化 */
  16.     /* 头部样式 */
  17.     .header { position: relative; background-color: #000; }
  18.     .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%; }
  19.     .nav { padding-left: 180px; }
  20.     .guest-box { float: right; }
  21.     .header li { float: left; }
  22.     .nav > li { margin: 0 10px; position: relative; }
  23.     .nav > li a, .guest-box > li a { display: inline-block; height: 60px; line-height: 60px; color: #bbb; padding: 0 20px; }
  24.     .nav > li a:hover, .guest-box > li a:hover { color: #FFF; }
  25.     .subnav {  position: absolute; width: 222px; border: 1px solid #d2d2d2; top: 60px; display: none; background-color: #FFF; }
  26.     .subnav > li a { color: #333; display: block; width: 110px; height: 40px; line-height: 40px; }
  27.     .subnav > li a:hover { color: #333; background-color: #f2f2f2; }
  28.     .navbar { position: absolute; left: 0; bottom: 0; width: 100px; height: 5px; background-color: #00a700; }
  29.     /* 头部样式 */
  31.     /* 内容区域样式 */
  32.     .adbox { width: 1200px; margin: 20px auto; }
  33.     .adbox img { border-radius: 8px; }
  34.     .content { width: 1200px; margin: auto; position: relative; }
  35.     .content > .left { position: absolute; top: 0; left: 0; width: 300px; }
  36.     .content > .right { position: absolute; top: 0; right: 0; width: 260px; }
  37.     .content > .middle { margin-left: 310px; margin-right: 270px; }
  38.     /* 栏目框样式 */
  39.     .content-box { height: 420px; width: 100%; background-color: #FFF; border-radius: 8px; }
  40.     .content-box .box-head { margin: 0 15px; border-bottom: 1px dotted #e9e9e9; padding: 8px 5px; font-weight: bolder; }
  41.     .toutiaolist { padding: 15px; }
  42.     .toutiaolist li { height: 30px; line-height: 30px; }
  43.     .toutiaolist li a { color: #333; }
  44.     .courselist li { float: left; width: 33.333%; margin-top: 20px; }
  45.     .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; }
  46.     .shouce { padding: 0 15px 0 15px;}
  47.     .shouce li { position: relative; margin-top: 20px; }
  48.     .shouce li img { position: absolute; top: 0; left: 0; width: 45px; height: 45px; }
  49.     .shouce li a { display: block; color: #333; margin-left: 55px; font-size: 13px; line-height: 20px; }
  50.     .footer { background-color: #393D49; color: #787d82;  position: fixed; bottom: 0; width: 100%; padding: 15px 0; }
  51.     .footer p { height: 30px; line-height: 30px; font-size: 12px; text-align: center; }
  52.   </style>
  53. </head>
  54. <body>
  55.   <div class="header clear">
  56.     <a href="http://php.cn" class="logo"></a>
  57.     <ul class="nav">
  58.       <li><a href="#">首页</a></li>
  59.       <li><a href="#">视频教程</a></li>
  60.       <li><a href="#">入门教程</a></li>
  61.       <li><a href="#">社区问答</a></li>
  62.       <li>
  63.         <a href="#">技术文章</a>
  64.         <ul class="subnav clear">
  65.           <li><a href="#">头条</a></li>
  66.           <li><a href="#">博客</a></li>
  67.           <li><a href="#">PHP教程</a></li>
  68.           <li><a href="#">JS教程</a></li>
  69.           <li><a href="#">Mysql教程</a></li>
  70.           <li><a href="#">PHP框架</a></li>
  71.         </ul>
  72.       </li>
  73.       <li><a href="#">资源下载</a></li>
  74.       <li><a href="#">编程词典</a></li>
  75.       <li><a href="#">工具下载</a></li>
  76.       <li><a href="#">PHP培训</a></li>
  77.     </ul>
  78.     <ul class="guest-box">
  79.       <li><a href="#">登录</a></li>
  80.       <li><a href="#">注册</a></li>
  81.     </ul>
  82.   </div>
  83.   <div class="container">
  84.     <div class="adbox">
  85.       <a href="https://www.php.cn/toutiao-387072.html" target="_blank"><img src="https://www.php.cn/static/images/index_ad222.jpg"></a>
  86.     </div>
  87.     <div class="content">
  88.       <div class="left">
  89.         <div class="content-box">
  90.           <div class="box-head">头条</div>
  91.           <div class="box-body">
  92.             <ul class="toutiaolist">
  93.               <li><a href="#">php中文网原创视频：《天龙八部》公益ph</a></li>
  94.               <li><a href="#">php中文网《玉女心经》公益PHP培训系列</a></li>
  95.               <li><a href="#">php的版本发展历史（1995-2020）</a></li>
  96.               <li><a href="#">您知道吗？最好的语言：PHP 25 岁了！</a></li>
  97.               <li><a href="#">史上最污技术解读，我竟然秒懂了</a></li>
  98.               <li><a href="#">2020年最新5个简洁优秀的个人博客模板免</a></li>
  99.               <li><a href="#">5款优秀的vue后台管理系统模板推荐</a></li>
  100.               <li><a href="#">6个大气的bootstrap后台管理系统模板推荐</a></li>
  101.               <li><a href="#">phpstudy v8.1.0.4 版本今日发布！</a></li>
  102.               <li><a href="#">您知道吗？最好的语言：PHP 25 岁了！</a></li>
  103.               <li><a href="#">史上最污技术解读，我竟然秒懂了</a></li>
  104.               <li><a href="#">php中文网《玉女心经》公益PHP培训系列</a></li>
  105.             </ul>
  106.           </div>
  107.         </div>
  108.       </div>
  109.       <div class="middle">
  110.         <div class="content-box">
  111.           <div class="box-head">最新课程</div>
  112.           <div class="box-body">
  113.             <ul class="courselist clear">
  114.               <li><div class="course">1</div></li>
  115.               <li><div class="course">2</div></li>
  116.               <li><div class="course">3</div></li>
  117.               <li><div class="course">4</div></li>
  118.               <li><div class="course">5</div></li>
  119.               <li><div class="course">6</div></li>
  120.             </ul>
  121.           </div>
  122.         </div>
  123.       </div>
  124.       <div class="right">
  125.         <div class="content-box">
  126.           <div class="box-head">常用手册</div>
  127.           <div class="box-body">
  128.             <ul class="shouce">
  129.               <li>
  130.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  131.                 <a href="#">php手册Linux手册</a>
  132.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  133.               </li>
  134.               <li>
  135.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  136.                 <a href="#">php手册Linux手册</a>
  137.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  138.               </li>
  139.               <li>
  140.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  141.                 <a href="#">php手册Linux手册</a>
  142.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  143.               </li>
  144.               <li>
  145.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  146.                 <a href="#">php手册Linux手册</a>
  147.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  148.               </li>
  149.               <li>
  150.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  151.                 <a href="#">php手册Linux手册</a>
  152.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  153.               </li>
  154.               <li>
  155.                 <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
  156.                 <a href="#">php手册Linux手册</a>
  157.                 <a href="#">ThinkPHP6.0CI手册大全</a>
  158.               </li>
  159.             </ul>
  160.           </div>
  161.         </div>
  162.       </div>
  163.     </div>
  164.   </div>
  165.   <div class="footer">
  166.     <div class="content">
  167.       <p>关于我们 | 免责申明 | 赞助与捐赠 | 广告合作</p>
  168.       <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  169.       <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9  皖公网安备 34010402701654号</p>
  170.       <p>座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101</p>
  171.     </div>
  172.   </div>
  174. <script>
  175.   const navs = document.querySelectorAll('.nav > li');
  176.   navs.forEach(function (nav) {
  177.     nav.addEventListener('mouseover', showMenu);
  178.     nav.addEventListener('mouseout', closeMenu);
  179.   });
  181.   function showMenu (event) {
  182.     if(event.target.nextElementSibling != null && event.target.nextElementSibling.nodeName == 'UL'){
  183.       event.target.nextElementSibling.style.display = 'block';
  184.     }
  185.     const currentnav = event.currentTarget;
  186.     const navbar = document.createElement('span');
  187.     navbar.classList.add('navbar');
  188.     currentnav.appendChild(navbar);
  189.   }
  191.   function closeMenu (event) {
  192.     if(event.target.nextElementSibling != null && event.target.nextElementSibling.nodeName == 'UL'){
  193.       event.target.nextElementSibling.style.display = 'none';
  194.     }
  195.     const navbars = document.querySelectorAll('.navbar');
  196.     navbars.forEach(function (navbar) {
  197.       navbar.parentNode.removeChild(navbar);
  198.     });
  199.   }
  201. </script>
  202. </body>
  203. </html>

学习小结

1、本次练习结合了之前学过的下拉菜单、事件监听，之前学的好多记不住都忘记了，练习时候又回过头看直播回放视频，巩固了一下；
2、现在对绝对定位、相对定位以及浮动有了更深的理解；

上一条：盒模型之浮动和定位下一条：margin:auto 块元素垂直居中
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多