search

博客列表 >CSS使用grid和flex布局 仿php中文网首页

CSS使用grid和flex布局 仿php中文网首页

葵花宝典
葵花宝典原创
2021年01月04日 23:28:50640浏览

本次布局最大心得:

grid 做大框架布局, flex 作细节布局,有时候还会用到定位,不要用一个属性为难自己
比如在一行中多种不规则对齐,用 flex 很灵活.
在做一些布局规则统一,对齐单一的布局用 grid 来的更快

效果如图:
php中文网首页
php中文网首页
样式和 HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>PHP中文网首页</title>
  7.     <link rel="stylesheet" href="font/iconfont.css" />
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       body {
  16.         background-color: #f3f5f7;
  17.       }
  18.       a {
  19.         text-decoration: none;
  20.       }
  21.       a:link {
  22.         color: #333333;
  23.       }
  24.       a:visited {
  25.         color: #333333;
  26.       }
  27.       a:hover {
  28.         color: #636262;
  29.       }
  30.       li {
  31.         list-style: none;
  32.       }
  33.       /* 导航UL布局 */
  34.       .header ul {
  35.         display: grid;
  36.         grid-template-columns: 200px 1fr 8rem;
  37.         background-color: black;
  38.         height: 60px;
  39.       }
  41.       .header a {
  42.         color: #a8b4ae;
  43.         font-size: 0.9rem;
  44.       }
  45.       .header .nav a {
  46.         height: 60px;
  47.         padding-top: 20px;
  48.       }
  49.       .header .nav a:hover {
  50.         color: white;
  51.         border-bottom: 5px solid green;
  52.       }
  53.       .header img {
  54.         height: 60px;
  55.       }
  56.       .header .nav {
  57.         display: grid;
  58.         grid-template-columns: repeat(9, 6rem);
  59.         place-content: center start;
  60.       }
  62.       .header .login {
  63.         place-self: center start;
  64.       }
  65.       .header .login a {
  66.         padding-left: 10px;
  67.         font-weight: 800;
  68.       }
  69.       .header .login a:hover {
  70.         color: white;
  71.       }
  72.       /* 主体第一部分 */
  73.       .main .tj {
  74.         background-color: white;
  75.         border-radius: 10px;
  76.         height: 510px;
  77.         display: grid;
  78.         grid-template-columns: 200px 1fr;
  79.         grid-template-rows: 60px 1fr 105px;
  80.         height: 510px;
  81.         width: 1200px;
  82.         margin: 2rem auto;
  83.       }
  84.       .main .kf-type {
  85.         background-color: #2b333b;
  86.         border-top-left-radius: 10px;
  87.         border-bottom-left-radius: 10px;
  88.         grid-area: span 3;
  89.         color: #aaadb0;
  90.       }
  91.       .main .kf-type ul {
  92.         padding: 10px 10px 0 30px;
  93.       }
  94.       .main .kf-type li {
  95.         font-size: 1rem;
  96.         height: 60px;
  97.         display: flex;
  98.         flex-flow: row nowrap;
  99.         justify-content: space-between;
  100.         align-items: center;
  101.       }
  102.       /* 推荐课程菜单 */
  103.       .main .tj-nav {
  104.         border-top-right-radius: 10px;
  105.         display: flex;
  106.         flex-flow: row nowrap;
  107.         align-items: center;
  108.       }
  109.       .main .tj-nav a {
  110.         font-size: 0.9rem;
  111.         flex: 0 0 10%;
  112.         padding: 10px;
  113.       }
  114.       .main .tj-nav .so {
  115.         height: 40px;
  116.         border-radius: 10px;
  117.         flex: 0 0 28%;
  118.         background-color: #f1f0f0;
  119.         display: flex;
  120.         flex-flow: row nowrap;
  121.         align-items: center;
  122.       }
  123.       .main .tj-nav .so input {
  124.         margin-left: 10px;
  125.         border: none;
  126.         background-color: #f1f0f0;
  127.         flex: 0 0 80%;
  128.       }
  129.       /* 轮播图片 */
  130.       .main .lb-img {
  131.         width: 100%;
  132.       }
  133.       /* 底部推荐课程 */
  134.       .main .kcheng {
  135.         display: flex;
  136.         flex-flow: row nowrap;
  137.         align-items: center;
  138.         justify-content: space-evenly;
  139.         border-bottom-right-radius: 10px;
  140.       }
  141.       .main .kcheng img {
  142.         border-radius: 10px;
  143.       }
  144.       .main .toutiao {
  145.         display: grid;
  146.         grid-template-columns: 300px 620px 260px;
  147.         grid-template-rows: 416px;
  148.         gap: 10px;
  149.         height: 510px;
  150.         width: 1200px;
  151.         margin: 2rem auto;
  152.       }
  153.       .main .toutiao .toutiao_left {
  154.         background-color: white;
  155.         border-radius: 10px;
  156.       }
  157.       .main .toutiao .toutiao_center {
  158.         background-color: white;
  159.         border-radius: 10px;
  160.       }
  161.       .main .toutiao .toutiao_right {
  162.         background-color: white;
  163.         border-radius: 10px;
  164.       }
  165.       .main .toutiao {
  166.         font-size: 0.9rem;
  167.       }
  168.       .main p {
  169.         line-height: 30px;
  170.         padding-left: 10px;
  171.       }
  172.       .main .toutiao .title {
  173.         border-bottom: 1px solid #f3f5f7;
  174.         margin: 5px;
  175.         padding: 10px;
  176.         font-weight: 800;
  177.       }
  178.       .main .toutiao .toutiao_center .content {
  179.         display: grid;
  180.         grid-template-columns: repeat(3, 170px);
  181.         grid-template-rows: 170px 170px;
  182.         gap: 0 20px;
  183.         place-content: center;
  184.       }
  185.       .main .toutiao .toutiao_center .content a {
  186.         place-self: center;
  187.         border-radius: 10px;
  188.         box-shadow: 0 0 3px #999;
  189.       }
  190.       .main .toutiao .toutiao_center .content div {
  191.         padding: 10px;
  192.         margin-top: -30px;
  193.         background-color: white;
  194.         position: relative;
  195.         border-radius: 10px;
  196.         line-height: 20px;
  197.       }
  198.       .main .toutiao .toutiao_center .content label {
  199.         background-color: #999;
  200.         color: white;
  201.         font-size: 12px;
  202.         padding: 3px;
  203.         margin-right: 10px;
  204.       }
  205.       .main .toutiao .toutiao_center .content img {
  206.         width: 170px;
  207.         border-radius: 10px;
  208.       }
  209.       .main .toutiao .toutiao_right .content img {
  210.         width: 40px;
  211.         margin: 5px 10px;
  212.       }
  213.       .main .toutiao .toutiao_right .content div {
  214.         display: flex;
  215.         flex-flow: row nowrap;
  216.       }
  217.       .main .toutiao .toutiao_right .content a {
  218.         padding: 5px;
  219.       }
  220.       .main .toutiao .toutiao_right .title {
  221.         display: flex;
  222.         flex-flow: row nowrap;
  223.         justify-content: space-between;
  224.       }
  225.     </style>
  226.   </head>
  227.   <body>
  228.     <header class="header">
  229.       <ul>
  230.         <li class="log">
  231.           <a href=""><img src="img/logo.png" alt="" /></a>
  232.         </li>
  233.         <li class="nav">
  234.           <a href="">首页</a>
  235.           <a href="">视频教程</a>
  236.           <a href="">入门教程</a>
  237.           <a href="">社区问答</a>
  238.           <a href="">技术文章</a>
  239.           <a href="">资源下载</a>
  240.           <a href="">编程词典</a>
  241.           <a href="">工具下载</a>
  242.           <a href="">PHP培训</a>
  243.         </li>
  244.         <li class="login"><a href="">登录</a> <a href="">注册</a></li>
  245.       </ul>
  246.     </header>
  247.     <main class="main">
  248.       <!-- 推荐课程区域 -->
  249.       <div class="tj">
  250.         <!-- 左则导航 -->
  251.         <div class="kf-type">
  252.           <ul>
  253.             <li><a>PHP开发</a><i class="iconfont icon-more"></i></li>
  254.             <li><a>前端开发</a><i class="iconfont icon-more"></i></li>
  255.             <li><a>服务端开发</a><i class="iconfont icon-more"></i></li>
  256.             <li><a>称动开发</a><i class="iconfont icon-more"></i></li>
  257.             <li><a>数据库</a><i class="iconfont icon-more"></i></li>
  258.             <li><a>服务器运维&下载</a><i class="iconfont icon-more"></i></li>
  259.             <li><a>在线工具箱</a><i class="iconfont icon-more"></i></li>
  260.             <li><a>常用类库</a><i class="iconfont icon-more"></i></li>
  261.           </ul>
  262.         </div>
  263.         <!-- 上部导航 -->
  264.         <div class="tj-nav">
  265.           <a href="">PHP头条</a>
  266.           <a href="">独孤九剑</a>
  267.           <a href="">学习路线</a>
  268.           <a href="">在线工具</a>
  269.           <a href="">吃饭课堂</a>
  270.           <a href="">社区问答</a>
  271.           <a href="">课程直播</a>
  272.           <div class="so">
  273.             <input type="text" placeholder="输入关键词搜索" /><span
  274.               class="iconfont icon-search"
  275.             ></span>
  276.           </div>
  277.         </div>
  278.         <!-- 轮播图片 -->
  279.         <div class="lb-img">
  280.           <img src="img/1.jpg" alt="" />
  281.         </div>
  282.         <div class="kcheng">
  283.           <a><img src="img/2.jpg" alt="" /></a>
  284.           <a><img src="img/3.png" alt="" /></a>
  285.           <a><img src="img/4.jpg" alt="" /></a>
  286.           <a><img src="img/5.jpg" alt="" /></a>
  287.         </div>
  288.       </div>
  289.       <!-- 头条区域 -->
  290.       <div class="toutiao">
  291.         <div class="toutiao_left">
  292.           <div class="title">头条</div>
  293.           <a><p>php中文网原创视频：《天龙八部》公益ph</p></a>
  294.           <a><p>php中文网《玉女心经》公益PHP WEB培</p></a>
  295.           <a><p>五款漂亮的2021倒计时动态特效源码（免</p></a>
  296.           <a><p>元旦福利：2021高品质新课上线汇总！</p></a>
  297.           <a><p>十款炫酷的程序员圣诞节代码特效【免费下</p></a>
  298.           <a><p>值得研究的20个Vue开源项目</p></a>
  299.           <a><p>【推荐】17个提升用户体验图像特效库</p></a>
  300.           <a><p>各种知名网站的404页面，看看谁更有创意？</p></a>
  301.           <a><p>Chrome性能有了最大提升！（Chrome87新</p></a>
  302.           <a><p>PHP 8 正式发布了！</p></a>
  303.           <a><p>推荐10款GitHub中高价值的PHP项目（值</p></a>
  304.           <a><p>推荐2021前端开发者11个必备的网站</p></a>
  305.         </div>
  306.         <div class="toutiao_center">
  307.           <div class="title">最新课程</div>
  308.           <div class="content">
  309.             <a href=""
  310.               ><img src="img/7.png" alt="" />
  311.               <div>
  312.                 <label for="">中级</label>JavaScript对象与常用设计模式
  313.               </div></a
  314.             >
  315.             <a href=""
  316.               ><img src="img/8.png" alt="" />
  317.               <div><label for="">高级</label>tp5怎么遍历多维数组。</div>
  318.             </a>
  319.             <a href=""
  320.               ><img src="img/9.jpeg" alt="" />
  321.               <div><label for="">中级</label>右面执行无结果无结果</div>
  322.             </a>
  323.             <a href=""
  324.               ><img src="img/10.png" alt="" />
  325.               <div><label for="">中级</label>J您没有访问此服务器的权限</div>
  326.             </a>
  327.             <a href=""
  328.               ><img src="img/11.png" alt="" />
  329.               <div>
  330.                 <label for="">高级</label>在win10中如何创建python格式文本
  331.               </div>
  332.             </a>
  333.             <a href=""
  334.               ><img src="img/12.png" alt="" />
  335.               <div><label for="">中级</label>Jphp项目怎么修改和运行发布</div>
  336.             </a>
  337.           </div>
  338.         </div>
  339.         <div class="toutiao_right">
  340.           <div class="title"><span>常用手册</span><a>更多</a></div>
  341.           <div class="content">
  342.             <div>
  343.               <img src="img/14.jpg" alt="" /><a>
  344.                 php手册Linux手册ThinkPHP6.0CI手册大全</a
  345.               >
  346.             </div>
  347.             <div>
  348.               <img src="img/15.jpg" alt="" /><a
  349.                 >JavaScript中文参考手册jQuery手册大全</a
  350.               >
  351.             </div>
  352.             <div>
  353.               <img src="img/16.jpg" alt="" /><a
  354.                 >MySQL参考手册大全 laravel5.8速查表</a
  355.               >
  356.             </div>
  357.             <div>
  358.               <img src="img/17.jpg" alt="" /><a
  359.                 >Python参考手册大全Node.js中文学习手册</a
  360.               >
  361.             </div>
  362.             <div>
  363.               <img src="img/18.jpg" alt="" /><a
  364.                 >tml手册CSS手册AngularJSAjax手册</a
  365.               >
  366.             </div>
  367.             <div>
  368.               <img src="img/19.jpg" alt="" /><a
  369.                 >ASP参考手册大全Bootstrap3参考手册</a
  370.               >
  371.             </div>
  372.           </div>
  373.         </div>
  374.       </div>
  375.     </main>
  376.     <footer class="footer"></footer>
  377.   </body>
  378. </html>
上一条：变量|常量-函数|匿名函数|箭头函数-闭包-高阶函数下一条：变量与常量的区别、函数与匿名函数的区别 、箭头函数的参数特征 、闭包原理、四种高阶函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多