search

博客列表 >标准盒模型和弹性盒模型仿PHP中文网导航

标准盒模型和弹性盒模型仿PHP中文网导航

自带光芒
自带光芒原创
2021年11月16日 15:20:29522浏览

1、标准盒模型

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>标准盒</title>
  7.         <style>
  8.         body{background:#fff; font-size:14px; font-family:"microsoft yahei",Verdana, Arial; line-height:150%; margin:5px 0 0 0; padding:0; color:#000;}
  9.         div{margin:0 auto; padding:0;}
  10.         h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{
  11.         margin:0; padding:0; border:none; list-style-type:none;
  12.         }
  13.         a{color:#000;text-decoration: none;}    
  15.         .clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
  16.         *html .clearfix{height:1%;}
  17.         *+html .clearfix{height:1%;}            
  19.         @font-face {
  20.           font-family: "iconfont"; /* Project id  */
  21.           src: url('iconfont.ttf?t=1637035149022') format('truetype');
  22.         }
  24.         .iconfont {
  25.           font-family: "iconfont" !important;
  26.           font-size: 16px;
  27.           font-style: normal;
  28.           -webkit-font-smoothing: antialiased;
  29.           -moz-osx-font-smoothing: grayscale;
  30.         }
  32.         .icon-gengduo:before {
  33.           content: "\ec1c";
  34.         }
  36.         .icon-xiajiantou:before {
  37.           content: "\e629";
  38.         }        
  39.         .fl{
  40.             float: left;
  41.         }
  42.         .headerbox{
  43.             width: 100%;
  44.             height: 60px;
  45.             background: #fff;
  46.             box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
  47.         }
  48.         .container{
  49.             width: 1200px;
  50.             margin: 0 auto;
  51.         }
  52.         .logo{
  53.             width: 140px;
  54.             height: 60px;
  55.         }
  56.         .logo img{
  57.             max-width: 140px;
  58.             max-height: 60px;
  59.         }
  60.         .navbox{
  61.             margin-left: 20px;
  62.         }
  63.         .navbox li{
  64.             float: left;
  65.             position: relative;
  66.             line-height: 60px;
  67.         }
  68.         .navbox>ul>li>a{
  69.             display: block;
  70.             padding:0 20px;
  71.             font-size: 15px;
  72.         }
  73.         .navbox>ul>li a:hover{
  74.             color:#f00;
  75.         }
  76.         .navbox>ul>li>a>span{
  77.             padding-left: 5px;
  78.         }
  79.         .navbox>ul>li.more .iconfont{
  80.             font-size: 18px;
  81.             font-weight: bold;
  82.         }
  83.         .navbox .childbox{
  84.             display: none;
  85.             position:absolute;
  86.             left:0;
  87.             top:60px;
  88.             width: 120px;
  89.             background: #fff;
  90.             box-shadow: 0 2px 4px rgba(0,0,0,.12);
  91.             padding: 5px 0;
  92.         }
  93.         .navbox .childbox .child_item{
  94.             height: 35px;
  95.             line-height: 35px;
  96.             padding: 0 20px;
  97.         }
  98.         .navbox>ul>li:hover .childbox{
  99.             display: block;
  100.         }
  101.         </style>
  102.     </head>
  103.     <body>
  104.         <div class="headerbox">
  105.             <div class="container clearfix">
  106.             <div class="logo fl">
  107.                 <a href="./"><img src="images/PHPlogo.png" alt="名称" /></a>
  108.             </div>
  109.             <div class="navbox fl">
  110.                 <ul>
  111.                     <li><a href="#">首页</a></li>
  112.                     <li>
  113.                         <a href="#">视频教程<span class="iconfont icon-xiajiantou"></span></a>
  114.                         <div class="childbox">
  115.                             <div class="child_item">
  116.                                 <a href="#">视频课程</a>
  117.                             </div>
  118.                             <div class="child_item">
  119.                                 <a href="#">直播课程</a>
  120.                             </div>
  121.                         </div>
  122.                     </li>
  123.                     <li>
  124.                         <a href="#">学习路径<span class="iconfont icon-xiajiantou"></span></a>
  125.                         <div class="childbox">
  126.                             <div class="child_item">
  127.                                 <a href="#">入门教程1</a>
  128.                             </div>
  129.                             <div class="child_item">
  130.                                 <a href="#">入门教程2</a>
  131.                             </div>
  132.                         </div>
  133.                         </li>
  134.                     <li><a href="#">大前端</a></li>
  135.                     <li><a href="#">资源下载</a></li>
  136.                     <li><a href="#">技术文章</a></li>
  137.                     <li><a href="#">社区</a></li>
  138.                     <li class="more">
  139.                         <a href="#"><span class="iconfont icon-gengduo"></span></a>
  140.                         <div class="childbox">
  141.                             <div class="child_item">
  142.                                 <a href="#">编程词典</a>
  143.                             </div>
  144.                             <div class="child_item">
  145.                                 <a href="#">APP下载</a>
  146.                             </div>
  147.                         </div>
  148.                     </li>
  149.                 </ul>
  150.             </div>
  151.         </div>
  152.         </div>
  153.     </body>
  154. </html>

2、弹性盒模型

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>弹性盒</title>
  7.         <style>
  8.         body{background:#fff; font-size:14px; font-family:"microsoft yahei",Verdana, Arial; line-height:150%; margin:5px 0 0 0; padding:0; color:#000;}
  9.         div{margin:0 auto; padding:0;}
  10.         h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{
  11.         margin:0; padding:0; border:none; list-style-type:none;
  12.         }
  13.         a{color:#000;text-decoration: none;}    
  15.         .clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
  16.         *html .clearfix{height:1%;}
  17.         *+html .clearfix{height:1%;}            
  19.         @font-face {
  20.           font-family: "iconfont"; /* Project id  */
  21.           src: url('iconfont.ttf?t=1637035149022') format('truetype');
  22.         }
  24.         .iconfont {
  25.           font-family: "iconfont" !important;
  26.           font-size: 16px;
  27.           font-style: normal;
  28.           -webkit-font-smoothing: antialiased;
  29.           -moz-osx-font-smoothing: grayscale;
  30.         }
  32.         .icon-gengduo:before {
  33.           content: "\ec1c";
  34.         }
  36.         .icon-xiajiantou:before {
  37.           content: "\e629";
  38.         }        
  39.         .headerbox{
  40.             display:flex;
  41.             height: 60px;
  42.             background: #fff;
  43.             box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
  44.         }
  45.         .logo{
  46.             flex-grow: 1;
  47.             height: 60px;
  48.             text-align: center;
  49.         }
  50.         .logo img{
  51.             max-width: 100%;
  52.             max-height: 60px;
  53.         }
  54.         .navbox{
  55.             flex-grow: 3;
  56.         }
  57.         .navbox ul{
  58.            display:flex;
  59.         }
  60.         .navbox li{
  61.             flex-grow: 1;
  62.             position: relative;
  63.             line-height: 60px;
  64.         }
  65.         .navbox>ul>li>a{
  66.             display: block;
  67.             padding:0 20px;
  68.             font-size: 15px;
  69.         }
  70.         .navbox>ul>li a:hover{
  71.             color:#f00;
  72.         }
  73.         .navbox>ul>li>a>span{
  74.             padding-left: 5px;
  75.         }
  76.         .navbox>ul>li.more .iconfont{
  77.             font-size: 18px;
  78.             font-weight: bold;
  79.         }
  80.         .navbox .childbox{
  81.             display: none;
  82.             position:absolute;
  83.             left:0;
  84.             top:60px;
  85.             width: 120px;
  86.             background: #fff;
  87.             box-shadow: 0 2px 4px rgba(0,0,0,.12);
  88.             padding: 5px 0;
  89.         }
  90.         .navbox .childbox .child_item{
  91.             height: 35px;
  92.             line-height: 35px;
  93.             padding: 0 20px;
  94.         }
  95.         .navbox>ul>li:hover .childbox{
  96.             display: block;
  97.         }
  98.         </style>
  99.     </head>
  100.     <body>
  101.         <div class="headerbox">
  103.             <div class="logo">
  104.                 <a href="./"><img src="images/PHPlogo.png" alt="名称" /></a>
  105.             </div>
  106.             <div class="navbox">
  107.                 <ul>
  108.                     <li><a href="#">首页</a></li>
  109.                     <li>
  110.                         <a href="#">视频教程<span class="iconfont icon-xiajiantou"></span></a>
  111.                         <div class="childbox">
  112.                             <div class="child_item">
  113.                                 <a href="#">视频课程</a>
  114.                             </div>
  115.                             <div class="child_item">
  116.                                 <a href="#">直播课程</a>
  117.                             </div>
  118.                         </div>
  119.                     </li>
  120.                     <li>
  121.                         <a href="#">学习路径<span class="iconfont icon-xiajiantou"></span></a>
  122.                         <div class="childbox">
  123.                             <div class="child_item">
  124.                                 <a href="#">入门教程1</a>
  125.                             </div>
  126.                             <div class="child_item">
  127.                                 <a href="#">入门教程2</a>
  128.                             </div>
  129.                         </div>
  130.                         </li>
  131.                     <li><a href="#">大前端</a></li>
  132.                     <li><a href="#">资源下载</a></li>
  133.                     <li><a href="#">技术文章</a></li>
  134.                     <li><a href="#">社区</a></li>
  135.                     <li class="more">
  136.                         <a href="#"><span class="iconfont icon-gengduo"></span></a>
  137.                         <div class="childbox">
  138.                             <div class="child_item">
  139.                                 <a href="#">编程词典</a>
  140.                             </div>
  141.                             <div class="child_item">
  142.                                 <a href="#">APP下载</a>
  143.                             </div>
  144.                         </div>
  145.                     </li>
  146.                 </ul>
  147.             </div>
  149.         </div>
  150.     </body>
  151. </html>
上一条：收藏｜2021年阿里云开源镜像站最热门镜像王全梳理！(附下载链接和Top20镜像王排名)下一条：PHP字符运算、类型转换和系统函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多