search

博客列表 >grid+flex布局实例

grid+flex布局实例

P粉116103988
P粉116103988原创
2022年07月21日 22:06:36285浏览

grid+flex布局仿 PHP 页头

效果图如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿PHP</title>
  8.     <link rel="stylesheet" href="./font/iconfont.css">
  9.     <link rel="stylesheet" href="/0713/static/css/reset.css">
  11.     <style>
  12.         .header {           
  13.             height: 130px;
  15.         }
  16.         .header .top{
  17.             width: 100VW;
  18.             height: 40px;
  19.             background-color: #444546;
  20.         }
  21.         .header .top .content{
  22.             /* 定义居中: 内容区需要有宽度 */
  23.             width: 1200px;
  24.             margin: auto;
  25.             display: grid;
  26.             grid-template-columns: 400px 100px;
  27.             grid-auto-rows: 40px;
  28.             place-content: space-between space-between;
  29.             place-items: center start;
  30.         }
  31.         .header .top .content .title a{
  32.             color: #fff;
  33.             font-weight: lighter;
  34.         }
  35.         .header .top .content .top-r{
  36.             display: flex;
  37.             color: #fff;
  39.         }
  40.         .header .top .content .top-r span{
  41.             padding: 0 10px;
  42.         }
  43.         .header .top .content .top-r .icon-lingdang{
  44.             font-size: 22px;
  45.         }
  46.         .header .top .content .top-r img{
  47.             width: 80%;
  48.             border-radius: 50%;
  49.         }
  50.         .header .navs{
  51.             width: 100vw;
  52.             background-color: #fff;
  53.             height: 90px;
  54.             box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  55.         }
  56.         .header .navs .content{
  57.             width: 1200px;
  59.             margin: auto;
  60.             display: grid;
  61.             /* 1fr=auto */
  62.             grid-template-columns: 140px 1fr 200px;
  63.             /* 格子间距 */
  64.             gap: 10px;
  65.             grid-auto-rows: 90px;
  66.             place-items: center start;
  68.         }
  69.         .header .navs .content img{
  70.             width: 100%;
  72.         }
  73.         .header .navs .content .menu{
  74.            display: flex;
  75.         }
  76.         .header .navs .content .menu a{
  77.             padding: 0 10px;
  78.         }
  79.         .header .navs .content .menu a:hover,
  80.         .header .navs .content .menu a.active{
  81.             color: red;
  82.             font-weight: bold;
  83.         }
  84.         .header .navs .content .right{
  85.             display: flex;
  86.         }
  87.         .header .navs .content .right input[type="search"]{
  88.             width: 200px;
  89.             height: 36px;
  90.             border-radius: 20px;
  91.             border: none;
  92.             outline: none;
  93.             background-color: #eee;
  94.             padding-left: 10px;
  95.         }
  96.         .header .navs .content .right .icon-sousuo{
  97.             font-size: 22px;
  98.             color: #ccc;
  99.             position: relative;
  100.             left: -30px;
  101.             top:5px
  102.         }
  103.         .header .navs .content .right .icon-sousuo:hover{
  104.             color: red;
  105.             cursor: pointer;
  106.         }
  107.     </style>
  108. </head>
  109. <body>
  110.     <!-- 页眉 -->
  112.     <div class="header">
  113.         <!-- 头部 -->
  114.         <div class="top">
  116.             <div class="content">
  117.                 <div class="title"> <a href="">PHP中文网-程序员梦开始的地方!</a></div>
  118.                 <div class="top-r">
  119.                     <span class="iconfont icon-lingdang"></span>
  120.                     <span class="iconfont"><a href=""><img src="/0713/static/images/user-pic.jpeg" alt=""></a></span>      
  121.                 </div>                          
  122.             </div>
  124.         </div>
  125.         <!-- 导航 -->
  126.         <div class="navs">
  127.             <div class="content">
  128.                 <a href=""><img src="../0713/static/images/logo.png" alt=""></a>
  129.                 <nav class="menu">
  131.                     <a href="" class="active">首页</a>
  132.                     <a href="">视频教程</a>
  133.                     <a href="">学习路径</a>
  134.                     <a href="">PHP培训</a>
  135.                     <a href="">资源下载</a>
  136.                     <a href="">技术文章</a>
  138.                 </nav>
  140.                 <div class="right">
  141.                     <input type="search" placeholder="请输入关键字">
  142.                     <a><span class="iconfont icon-sousuo"></span></a>   
  143.                 </div>
  144.             </div>
  145.         </div>
  148.     </div>
  149. </body>
  150. </html>
上一条：js函数类型下一条：js数据类型、循环、流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多