search

博客列表 >使用Flex布局仿php中文网

使用Flex布局仿php中文网

Dong.
Dong.原创
2020年08月31日 10:56:35653浏览

模仿效果如下：

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>flex布局仿php中文网</title>
  7.     <link rel="stylesheet" href="./dome.css">
  8.     <link rel="stylesheet" href="./styer.css">
  9. </head>
  10. <body>
  11.     <!-- 头部 -->
  12.     <div class="header">
  13.         <div class="nav">
  14.             <div class="title">
  15.                 <ul>
  16.                     <li><a href="#">首页</a></li>
  17.                     <li><a href="#">视频教学</a></li>
  18.                     <li><a href="#">入门教学</a></li>
  19.                     <li><a href="#">社区问答</a></li>
  20.                     <li><a href="#">技术文章</a></li>
  21.                     <li><a href="#">资源下载</a></li>
  22.                     <li><a href="#">编程词典</a></li>
  23.                     <li><a href="#">工具下载</a></li>
  24.                     <li><a href="#">PHP培训</a></li>
  25.                 </ul>
  26.                 <p><a href="#">注册</a><a href="#">登录</a></p>
  27.             </div>
  28.         </div>
  29.     </div>
  31.     <!-- 主体 -->
  32.     <div>
  33.         <div>
  34.             <ul>
  35.                 <li>
  36.                     <a href="">php开发</a>
  37.                 </li>
  38.                 <li>
  39.                     <a href="">前段开发</a>
  40.                 </li>
  41.                 <li>
  42.                     <a href="">服务端开发</a>
  43.                 </li>
  44.                 <li>
  45.                     <a href="">移动开发</a>
  46.                 </li>
  47.                 <li>
  48.                     <a href="">数据库</a>
  49.                 </li>
  50.                 <li>
  51.                     <a href="">服务器运维</a>
  52.                 </li>
  53.                 <li>
  54.                     <a href="">在线工具箱</a>
  55.                 </li>
  56.                 <li>
  57.                     <a href="">常用库类</a>
  58.                 </li>
  60.             </ul>
  61.         </div>
  62.         <div class="viewAd">
  63.             <div class="search">
  64.                 <a href="">php</a>
  65.                 <a href="">孤独</a>
  66.                 <a href="">php</a>
  67.                 <a href="">php开发</a>
  68.                 <a href="">php开发</a>
  69.                 <a href="">php开发</a>
  70.                 <a href="">课程直播</a>
  71.                 <span class="searchInput">
  72.                     <input type="text" placeholder="输入关键字搜索"><a href="">搜索</a>
  73.                 </span>              
  74.             </div>
  75.             <div class="viewImg"><img src="./static/img/b1.p" alt=""></div>
  76.             <div class="adImg">
  77.                 <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
  78.                 <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
  79.                 <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
  80.                 <p><a href=""><img src=".static/img/1.png" alt=""></a></p>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     <!-- AD -->
  85.     <div class="ad1">
  86.         <a href=""><img src=".static/img/1.png" alt=""></a>
  87.     </div>
  89.     <!-- 内容 -->
  90.     <div class="content1">
  91.         <!-- 左边 -->
  92.         <div class="left">
  93.             <h4>头条</h4>
  94.             <p><a href="#">php中文网</a></p>
  95.             <p><a href="#">php中文网</a></p>
  96.             <p><a href="#">php中文网</a></p>
  97.             <p><a href="#">php中文网</a></p>
  98.             <p><a href="#">php中文网</a></p>
  99.             <p><a href="#">php中文网</a></p>
  100.             <p><a href="#">php中文网</a></p>
  101.             <p><a href="#">php中文网</a></p>
  102.             <p><a href="#">php中文网</a></p>
  103.             <p><a href="#">php中文网</a></p>
  104.             <p><a href="#">php中文网</a></p>
  105.             <p><a href="#">php中文网</a></p>
  106.             <p><a href="#">php中文网</a></p>
  107.         </div>
  108.         <!-- 内容中间 -->
  109.         <div class="mian flexGrowAuto">
  110.             <h4>最新课程</h4>
  111.             <ul>
  112.                 <li>
  113.                     <a href="">
  114.                         <div><img src="./static/img/2.png" alt=""></div>
  115.                         <div><span>初级</span>前段教程</div>
  116.                     </a>
  117.                 </li>
  118.                 <li>
  119.                     <a href="">
  120.                         <div><img src="./static/img/2.png" alt=""></div>
  121.                         <div><span>初级</span>前段教程</div>
  122.                     </a>
  123.                 </li>
  124.                 <li>
  125.                     <a href="">
  126.                         <div><img src="./static/img/2.png" alt=""></div>
  127.                         <div><span>初级</span>前段教程</div>
  128.                     </a>
  129.                 </li>
  130.                 <li>
  131.                     <a href="">
  132.                         <div><img src="./static/img/2.png" alt=""></div>
  133.                         <div><span>初级</span>前段教程</div>
  134.                     </a>
  135.                 </li>
  136.                 <li>
  137.                     <a href="">
  138.                         <div><img src="./static/img/2.png" alt=""></div>
  139.                         <div><span>初级</span>前段教程</div>
  140.                     </a>
  141.                 </li>
  142.                 <li>
  143.                     <a href="">
  144.                         <div><img src="./static/img/2.png" alt=""></div>
  145.                         <div><span>初级</span>前段教程</div>
  146.                     </a>
  147.                 </li>
  148.             </ul>
  149.         </div>
  150.         <!-- 右 -->
  151.         <div class="right">
  152.             <h4>常用手册</h4><h4>更多...</h4>
  153.             <ul>
  154.                 <li class="flexDis">
  155.                     <div class="rightImg"><img src="./static/img/2.png" alt=""></div>
  156.                     <div class="rightFont">
  157.                         <a href="">php手册</a>
  158.                         <a href="">linux手册</a>
  159.                         <a href="">ci手册</a>
  160.                         <a href="">php手册</a>
  161.                     </div>
  162.                 </li>
  163.                 <li class="flexDis">
  164.                     <div class="rightImg"><img src="./static/img/2.png" alt=""></div>
  165.                     <div class="rightFont flexDis">
  166.                         <a href="">javascript</a>
  167.                         <a href="">jquery</a>
  168.                     </div>
  169.                 </li>
  170.                 <li class="flexDis">
  171.                     <div><img src="./static/img/2.png" alt=""></div>
  172.                     <div class="rightFont flexDis">
  173.                         <a href="">javascript</a>
  174.                         <a href="">jquery</a>
  175.                     </div>
  176.                 </li>
  177.                 <li class="flexDis">
  178.                     <div><img src="./static/img/2.png" alt=""></div>
  179.                     <div class="rightFont flexDis">
  180.                         <a href="">html手册</a>
  181.                         <a href="">css手册</a>
  182.                         <a href="">html手册</a>
  183.                         <a href="">css手册</a>
  184.                     </div>
  185.                 </li>
  186.                 <li class="flexDis">
  187.                     <div><img src="./static/img/2.png" alt=""></div>
  188.                     <div class="rightFont flexDis">
  189.                         <a href="">ASP手册</a>
  190.                         <a href="">bt3手册</a>
  191.                     </div>
  192.                 </li>
  194.             </ul>
  195.         </div>
  196.         <div class="content2 container flexDis">
  197.             <div class="content_ad_down">
  198.                 <div class="content_ad">
  199.                     <img src="./static/img/2.png" alt="">
  200.                     <a href="">phpstudy急速入门视频</a>
  201.                     <span></span>
  202.                     <span></span>
  203.                     <span></span>
  204.                 </div>
  205.                 <div class="content_down">
  206.                     <div class="down_title">
  207.                         <span><a href="">更多...</a></span>php工具下载
  208.                     </div>
  209.                     <div>
  210.                         <ul>
  211.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  212.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  213.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  214.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  215.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  216.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  217.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  218.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  219.                             <li><span>8-17</span><a href="">小皮面板</a></li>
  221.                         </ul>
  222.                     </div>
  223.                 </div>
  224.                 <div class="content_arc">
  225.                     <div class="arc_title">
  226.                         <span>技术文章</span>
  227.                         <span>网站源码</span>
  228.                         <span>原生手册</span>
  229.                         <span>推荐博文</span>
  230.                     </div>
  231.                     <div class="arc_content">
  232.                         <ul>
  233.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  234.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  235.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  236.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  237.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  238.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  239.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  240.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  241.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  242.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  243.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  244.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  245.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  246.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  247.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  248.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  249.                             <li><span>php教程</span><a href="">什么是逆波兰式？</a></li>
  250.                             <li><span>php7</span><a href="">学习php7的革新与性能优化</a></li>
  251.                         </ul>
  252.                     </div>
  253.                 </div>
  254.                 <div class="content_qa">
  255.                     <div class="qa_title"><span>社区问答</span></div>
  256.                     <div class="qa_content">
  257.                         <ul>
  258.                             <li><a href="">密码错误</a></li>
  259.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  260.                             <li><a href="">编辑页面大不开</a></li>
  261.                             <li><a href="">密码错误</a></li>
  262.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  263.                             <li><a href="">编辑页面大不开</a></li>
  264.                             <li><a href="">密码错误</a></li>
  265.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  266.                             <li><a href="">编辑页面大不开</a></li>
  267.                             <li><a href="">密码错误</a></li>
  268.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  269.                             <li><a href="">编辑页面大不开</a></li>
  270.                             <li><a href="">密码错误</a></li>
  271.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  272.                             <li><a href="">编辑页面大不开</a></li>
  273.                             <li><a href="">密码错误</a></li>
  274.                             <li><a href="">朱老师用的什么屏幕截取软件</a></li>
  275.                             <li><a href="">编辑页面大不开</a></li>
  277.                         </ul>
  278.                     </div>
  279.                 </div>
  280.             </div>
  281.             <!-- phpstudy -->
  282.             <div class="ad2"> <a href=""><img src="./static/img/2.png" alt=""></a></div>
  284.             <!-- 底部 -->
  285.             <div class="footer">
  286.                 <div class="footer_left content">
  287.                     <p class="footer_link">
  288.                         <a href="">网站首页</a>
  289.                         <a href="">php视频</a>
  290.                         <a href="">网站首页</a>
  291.                         <a href="">php视频</a>
  292.                         <a href="">网站首页</a>
  293.                         <a href="">编程词典</a>
  295.                     </p>
  296.                     <p class="footer_company">
  297.                         <span>php中文网：公益在线PHP培训</span>
  298.                         <img src="static/img/logo,png" alt="">
  299.                     </p>
  300.                     <p class="add_tel">
  301.                         座机号码：0551-0000000 地址：安徽省合肥市....
  302.                     </p>
  303.                     <div class="code">
  304.                         <img src="./static/img/code1.png" alt="">
  305.                         <img src="./static/img/code1.png" alt="">
  306.                     </div>
  307.                 </div>
  309.             </div>
  311.         </div>
  312.     </div>
  313. </body>
  314. </html>

公共样式代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     }
  6.     html,
  7.     body {
  8.     width: 100%;
  9.     height: 100%;
  10.     overflow: hidden;
  11.     overflow-y: auto;
  12.     font: 14px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
  13.     background: #F3F5F7;
  14.     }
  15.     li,dd{
  16.     list-style: none;
  17.     }
  18.     a{
  19.     text-decoration: none;
  20.     }
  21.     button,img{
  22.     border: none;
  23.     outline: none;
  24.     }
  25.     /* 过渡动画: */
  26.     .navTs{
  27.     transition:all 200ms ease;
  28.     }
  29.     .container {
  30.     width: 1200px;
  31.     margin: 0 auto;
  32.     }
  33.     /* 转为flex容器 */
  34.     .flexDis {
  35.     display: flex;
  36.     }
  37.     /* flex项目收缩比例:不收缩 */
  38.     .flexShrinkStatic {
  39.     flex-shrink: 0;
  40.     }
  41.     /* flex项目收缩比例:等比收缩 */
  42.     .flexShrinkAuto {
  43.     flex-shrink: 1;
  44.     }
  45.     /* flex项目放大比例: */
  46.     .flexGrowAuto {
  47.     flex-grow: 1;
  48.     }
  49.     /* flex主轴排列:水平排列 */
  50.     .flexDir-x {
  51.     flex-direction: row;
  52.     }
  53.     /* flex主轴排列:垂直排列 */
  54.     .flexDir-y {
  55.     flex-direction: column;
  56.     }
  57.     /* flex主轴换行:换行 */
  58.     .flexWrap {
  59.     flex-wrap: wrap;
  60.     }
  61.     /* flex主轴换行:不换行 */
  62.     .flexNoWrap {
  63.     flex-wrap: nowrap;
  64.     }
  65.     /* 主轴水平对齐方式-------------------------------------- */
  66.     /* flex主轴对齐方式:左对齐 */
  67.     .flexContentS {
  68.     justify-content: start;
  69.     }
  70.     /* flex主轴对齐方式:右对齐 */
  71.     .flexContentE {
  72.     justify-content: end;
  73.     }
  74.     /* flex主轴对齐方式:中对齐 */
  75.     .flexContentC {
  76.     justify-content: center;
  77.     }
  78.     /* flex主轴对齐方式:均匀排列每个元素,每个元素之间的间隔相等 */
  79.     .flexContentV {
  80.     justify-content: space-evenly;
  81.     }
  82.     /* flex主轴对齐方式:均匀排列每个元素,首个元素放置于起点末尾元素放置于终点 */
  83.     .flexContentB {
  84.     justify-content: space-between;
  85.     }
  86.     /* flex主轴对齐方式:均匀排列每个元素,元素之前、之间、之后都留有空白的容器内。 */
  87.     .flexContentA {
  88.     justify-content: space-around;
  89.     }
  90.     /* 主轴垂直对齐方式-------------------------------------- */
  91.     /* 行内上对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  92.     .flexAlignS {
  93.     align-items: start;
  94.     }
  95.     /* 行内中对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  96.     .flexAlignC {
  97.     align-items: center;
  98.     }
  99.     /* 行内下对齐-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  100.     .flexAlignE {
  101.     align-items: end;
  102.     }
  103.     /* 元素位于容器的基线上。-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  104.     .flexAlignB {
  105.     align-items: baseline;
  106.     }
  107.     /* 默认值。元素被拉伸以适应容器。-定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  108.     .flexAlignT {
  109.     align-items: stretch;
  110.     }

css样式代码

  1. .header {
  2.     max-height: 60px;
  3.     font-size: 1em;
  4.     }
  5.     .header .logo {
  6.     display: block;
  7.     height: 60px;
  8.     width: 140px;
  9.     background: url("../img/logo.png") no-repeat center;
  10.     background-size: 100%;
  11.     margin-left: 2em;
  12.     }
  13.     .header .nav {
  14.     background: #000;
  15.     }
  16.     .header .nav ul {
  17.     padding: 0 1.6em;
  18.     margin: 0 3em;
  19.     }
  20.     .header .nav ul li {
  21.     display: inline-block;
  22.     }
  25.     .header .nav ul li a {
  26.         display: inline-block;
  27.         text-align: center;
  28.         width: 85px;
  29.         height: 60px;
  30.         line-height: 60px; /* 文本垂直居中 */
  31.         color: rgba(255, 255, 255, 0.7);
  32.         }
  33.         .header .nav ul li:first-of-type {
  34.         background-color: #363c41;
  35.         }
  36.         .header .nav ul li a:hover {
  37.         color: rgba(255, 255, 255, 1);
  38.         border-bottom: 5px solid #5fb878;
  39.         }
  40.         .header .nav p {
  41.         margin-left: auto;
  42.         }
  43.         .header .nav p a {
  44.         display: inline-block;
  45.         width: 60px;
  46.         height: 60px;
  47.         text-align: center;
  48.         line-height: 60px;
  49.         color: rgba(255, 255, 255, 0.7);
  50.         }
  51.         .header .nav p a:hover {
  52.         background: #363c41;
  53.         }
  54.         .top {
  55.         height: 510px;
  56.         /* border: 5px solid red; */
  57.         /* padding: 1em 0; */
  58.         margin-top: 20px;
  59.         }
  60.         .top .menuList {
  61.         width: 210px;
  62.         /* border: 5px solid blue; */
  63.         background: #2b333b;
  64.         border-top-left-radius: 0.8em;
  65.         border-bottom-left-radius: 0.8em;
  66.         }
  67.         .top .menuList li {
  68.         position: relative;
  69.         }
  70.         .top .menuList a {
  71.         display: inline-block;
  72.         width: 100%;
  73.         color: rgba(255, 255, 255, 0.8);
  74.         margin-top: 0.8em;
  75.         padding: 0.85em 1.5em;
  76.         font-size: 1.1em;
  77.         }
  78.         .top .menuList a:hover {
  79.         background: rgba(255, 255, 255, 0.2);
  80.         }
  81.         .top .menuList span {
  82.         color: rgba(255, 255, 255, 0.8);
  83.         position: absolute;
  84.         top: 45%;
  85.         right: 10%;
  86.         }
  87.         /* 搜索 */
  88.         .top .search {
  89.         background: #fff;
  90.         height: 60px;
  91.         /* width: 990px; */
  92.         border-top-right-radius: 0.8em;
  93.         box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.2);
  94.         line-height: 60px;
  95.         position: relative;
  96.         }
  97.         .top .search a {
  98.         color: #333;
  99.         margin: 0 18px;
  100.         }
  101.         .top .search .span1 {
  102.         color: #fff;
  103.         background: #ff5722;
  104.         border-radius: 0.2em;
  105.         position: absolute;
  106.         top: 32%;
  107.         left: 7.5%;
  108.         width: 20px;
  109.         height: 20px;
  110.         text-align: center;
  111.         line-height: 20px;
  112.         }
  113.         .top .search .span2 {
  114.         color: #fff;
  115.         background: #2f4056;
  116.         border-radius: 0.2em;
  117.         position: absolute;
  118.         top: 32%;
  119.         left: 26.8%;
  120.         width: 20px;
  121.         height: 20px;
  122.         text-align: center;
  123.         line-height: 20px;
  124.         }
  125.         .top .search .span3 {
  126.         color: #fff;
  127.         background: #ffb800;
  128.         border-radius: 0.2em;
  129.         position: absolute;
  130.         top: 32%;
  131.         left: 46%;
  132.         width: 20px;
  133.         height: 20px;
  134.         text-align: center;
  135.         line-height: 20px;
  136.         }
  137.         .top .search .searchInput {
  138.         position: absolute;
  139.         top: 20%;
  140.         right: 20px;
  141.         width: 270px;
  142.         height: 40px;
  143.         background: #f1f0f0;
  144.         line-height: 40px;
  145.         border-radius: 0.2em;
  146.         }
  147.         .top .searchInput:hover {
  148.         border-bottom: 1px solid silver;
  149.         }
  150.         .top .searchInput input {
  151.         width: 210px;
  152.         height: 40px;
  153.         outline: none;
  154.         /* vertical-align: middle; */
  155.         background: none;
  156.         border: none;
  157.         margin-left: 10px;
  158.         }
  159.         .top .viewImg {
  160.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  161.         }
  162.         .top .viewAd .adImg {
  163.         height: 110px;
  164.         background: rgba(255, 255, 255, 1);
  165.         border-bottom-right-radius: 0.8em;
  166.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  167.         margin-top: -2px;
  168.         }
  169.         .top .viewAd .adImg img {
  170.         border-radius: 0.8em;
  171.         }
  172.         .ad1 img {
  173.         margin: 20px 0;
  174.         border-radius: 0.8em;
  175.         }
  176.         .ad2 img {
  177.         margin-bottom: 10px;
  178.         border-radius: 0.8em;
  179.         }
  180.         /* 内容1 */
  181.         .content1 {
  182.         height: 415px;
  183.         }
  184.         .content1 h4 {
  185.         color: #343535;
  186.         border-bottom: 1px dotted #e9e9e9;
  187.         padding: 5px;
  188.         /* height: 30px; */
  189.         }
  190.         .content1 .left {
  191.         background: rgba(255, 255, 255, 1);
  192.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  193.         border-radius: 0.8em;
  194.         padding: 10px;
  195.         width: 300px;
  196.         }
  197.         /* .content1 .left h4{
  198.         color: #343535;
  199.         border-bottom: 1px dotted #e9e9e9;
  200.         padding: 5px;
  201.         } */
  202.         .content1 .left p {
  203.         margin: 10px 0;
  204.         }
  205.         .content1 .left p a {
  206.         margin: 115px 0;
  207.         color: #333;
  208.         }
  209.         .content1 .left p a:hover {
  210.         color: #777;
  211.         }
  212.         .content1 .right {
  213.         background: rgba(255, 255, 255, 1);
  214.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  215.         padding: 10px;
  216.         border-radius: 0.8em;
  217.         width: 260px;
  218.         position: relative;
  219.         }
  220.         .content1 .right h4:last-of-type {
  221.         /* background: #000; */
  222.         position: absolute;
  223.         top: 10px;
  224.         right: 10%;
  225.         }
  226.         .content1 .right .rightImg {
  227.         height: 60px;
  228.         /* border: 1px solid #000; */
  229.         line-height: 60px;
  230.         }
  231.         .content1 .right .rightImg img {
  232.         width: 40px;
  233.         margin-left: 5px;
  234.         vertical-align: middle;
  235.         }
  236.         .content1 .right .rightFont {
  237.         margin: 8px 5px;
  238.         width: 100%;
  239.         }
  240.         .content1 .right .rightFont a {
  241.         margin: 2px;
  242.         color: #333;
  243.         }
  244.         .content1 .right .rightFont a:hover {
  245.         color: #777;
  246.         }
  247.         .content1 .main {
  248.         background: rgba(255, 255, 255, 1);
  249.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.05);
  250.         border-radius: 0.8em;
  251.         margin: 0 10px;
  252.         padding: 10px;
  253.         /* position: relative; */
  254.         max-width: 620px;
  255.         }
  256.         .content1 .main span {
  257.         background: #93999f;
  258.         padding: 2px;
  259.         color: #fff;
  260.         font-size: 0.8em;
  261.         margin: 0 5px;
  262.         }
  263.         .content1 .main ul li {
  264.         /* margin: 10px 10px; */
  265.         margin: 20px auto;
  266.         /* height: 200px; */
  267.         /* background: #777; */
  268.         }
  269.         .content1 .main ul li div {
  270.         background: rgba(255, 255, 255, 1);
  271.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  272.         border-radius: 0.7em;
  273.         padding: 5px;
  274.         /* margin: 15px; */
  275.         width: 180px;
  276.         height: 70px;
  277.         position: relative;
  278.         top: 10px;
  279.         left: 0;
  280.         /* border: 5px solid red; */
  281.         }
  282.         .content1 .main ul li a {
  283.         color: #333;
  284.         }
  285.         .content1 .main ul li a:hover {
  286.         color: #777;
  287.         }
  288.         .content1 .main ul li div img {
  289.         border-radius: 0.8em;
  290.         width: 180px;
  291.         position: relative;
  292.         top: -10px;
  293.         left: -5px;
  294.         }
  295.         /* content2 */
  296.         .content2 .content_ad_down {
  297.         width: 360px;
  298.         /* border: 1px solid red; */
  299.         margin: 20px 0;
  300.         }
  301.         .content2 .content_ad_down .content_ad {
  302.         height: 187px;
  303.         border-radius: 0.7em;
  304.         background: rgba(255, 255, 255, 1);
  305.         margin-bottom: 10px;
  306.         padding: 1px;
  307.         }
  308.         .content2 .content_ad_down .content_ad img {
  309.         width: 356px;
  310.         height: 183px;
  311.         border-radius: 0.7em;
  312.         }
  313.         .content2 .content_ad_down .content_ad a {
  314.         display: block;
  315.         position: relative;
  316.         top: -33px;
  317.         left: 0;
  318.         background: rgb(0, 0, 0, 0.7);
  319.         color: #fff;
  320.         width: 300px;
  321.         height: 30px;
  322.         line-height: 30px;
  323.         padding-left: 10px;
  324.         }
  325.         .content2 .content_ad_down .content_ad span {
  326.         display: inline-block;
  327.         position: relative;
  328.         top: -53px;
  329.         left: 305px;
  330.         background: rgb(0, 0, 0, 0.7);
  331.         color: #fff;
  332.         margin: 0 1px;
  333.         width: 8px;
  334.         height: 10px;
  335.         line-height: 30px;
  336.         padding-left: 10px;
  337.         }
  338.         .content2 .content_ad_down .content_down {
  339.         background: rgb(255, 255, 255, 1);
  340.         border-radius: 0.7em;
  341.         position: relative;
  342.         /* border: 1px solid red; */
  343.         }
  344.         .content2 .content_ad_down .content_down .down_title {
  345.         font-weight: bold;
  346.         height: 33px;
  347.         line-height: 33px;
  348.         border-bottom: 2px solid rgb(255, 74, 0);
  349.         padding-left: 10px;
  350.         }
  351.         .content2 .content_ad_down .content_down .down_title span {
  352.         position: absolute;
  353.         top: 0;
  354.         right: 8px;
  355.         }
  356.         .content2 .content_ad_down .content_down .down_title span a {
  357.         color: #333;
  358.         font-weight: normal;
  359.         }
  360.         .content2 .content_ad_down .content_down .down_title span a:hover {
  361.         color: #777;
  362.         }
  363.         .content2 .content_ad_down .content_down .down_content {
  364.         /* margin-top: 10px;
  365.         margin-left: 20px; */
  366.         min-height: 260px;
  367.         }
  368.         .content2 .content_ad_down .content_down .down_content ul li {
  369.         list-style: outside;
  370.         margin: 10px 20px;
  371.         color: #ccc;
  372.         }
  373.         .content2 .content_ad_down .content_down .down_content span {
  374.         /* color: #333; */
  375.         position: absolute;
  376.         /* top: 10px; */
  377.         right: 10px;
  378.         }
  379.         .content2 .content_ad_down .content_down .down_content a {
  380.         color: #333;
  381.         }
  382.         .content2 .content_ad_down .content_down .down_content a:hover {
  383.         color: #777;
  384.         }
  385.         .content2 .content_arc {
  386.         /* border: 1px solid #000; */
  387.         width: 510px;
  388.         margin: 20px 0;
  389.         border-radius: 0.7em;
  390.         background: rgba(255, 255, 255, 1);
  391.         }
  392.         .content2 .content_arc .arc_title {
  393.         border-bottom: 1px solid #eaeaea;
  394.         height: 35px;
  395.         line-height: 35px;
  396.         }
  397.         .content2 .content_arc .arc_title span {
  398.         display: inline-block;
  399.         height: 35px;
  400.         margin-left: 15px;
  401.         cursor: pointer;
  402.         color: #333;
  403.         }
  404.         .content2 .content_arc .arc_title span:first-of-type {
  405.         border-bottom: 1px solid #f80303;
  406.         }
  407.         .content2 .content_arc .arc_content ul li {
  408.         margin: 7px 10px;
  409.         position: relative;
  410.         }
  411.         .content2 .content_arc .arc_content ul li span:first-of-type {
  412.         display: inline-block;
  413.         width: 75px;
  414.         /* border: 1px solid red; */
  415.         text-align: right;
  416.         }
  417.         .content2 .content_arc .arc_content ul li span {
  418.         margin: 0 3px;
  419.         color: #999;
  420.         }
  421.         .content2 .content_arc .arc_content ul li span:last-of-type {
  422.         display: inline-block;
  423.         position: absolute;
  424.         top: 3px;
  425.         right: 5px;
  426.         color: #f20b0b;
  427.         }
  428.         .content2 .content_arc .arc_content ul li a {
  429.         margin-left: 2px;
  430.         color: #333;
  431.         }
  432.         .content2 .content_arc .arc_content ul li a:hover {
  433.         color: #777;
  434.         }
  435.         .content2 .content_qa {
  436.         width: 310px;
  437.         margin: 20px 0;
  438.         /* border: 1px solid #000; */
  439.         border-radius: 0.7em;
  440.         background: rgba(255, 255, 255, 1);
  441.         }
  442.         .content2 .content_qa .qa_title {
  443.         border-bottom: 1px solid #eaeaea;
  444.         height: 35px;
  445.         line-height: 35px;
  446.         }
  447.         .content2 .content_qa .qa_title span {
  448.         margin-left: 15px;
  449.         color: #333;
  450.         }
  451.         .content2 .content_qa .qa_content ul li {
  452.         margin: 10px 20px;
  453.         }
  454.         .content2 .content_qa .qa_content ul li a {
  455.         color: #333;
  456.         }
  457.         .content2 .content_qa .qa_content ul li a:hover {
  458.         color: #777;
  459.         }
  460.         /* .search-related {
  461.         border: 1px solid #000;
  462.         } */
  463.         .search-related .related_type {
  464.         width: 230px;
  465.         height: 390px;
  466.         /* border: 1px solid lightsalmon; */
  467.         }
  468.         .search-related .related_type .type_title {
  469.         height: 40px;
  470.         line-height: 40px;
  471.         padding-left: 10px;
  472.         font-weight: bold;
  473.         color: #666;
  474.         background: #eee;
  475.         font-size: 12px;
  476.         border-right: 1px solid #fff;
  477.         }
  478.         .search-related .related_type .type_content {
  479.         /* display: block; */
  480.         height: 320px;
  481.         background: #515773;
  482.         border-right: 1px solid #fff;
  483.         border-bottom-left-radius: 8px;
  484.         }
  485.         .search-related .related_type .type_content ul li {
  486.         padding: 12px 0 0px 20px;
  487.         }
  488.         .search-related .related_type .type_content ul li a {
  489.         color: #fff;
  490.         font-size: 14px;
  491.         }
  492.         .search-related .related_type .type_content ul li a span {
  493.         color: #bbbbbb;
  494.         font-size: 12px;
  495.         padding-left: 5px;
  496.         }
  497.         /* ------------------------- */
  498.         .search-related .related_search {
  499.         width: 970px;
  500.         height: 390px;
  501.         /* margin-bottom: 20px; */
  502.         /* border: 1px solid lightseagreen; */
  503.         }
  504.         .search-related .related_search .search_title {
  505.         height: 40px;
  506.         line-height: 40px;
  507.         padding-left: 10px;
  508.         font-weight: bold;
  509.         color: #666;
  510.         background: #eee;
  511.         font-size: 12px;
  512.         }
  513.         .search-related .related_search .search_title a {
  514.         margin-right: 20px;
  515.         padding-bottom: 10px;
  516.         display: block;
  517.         height: 40px;
  518.         line-height: 40px;
  519.         padding: 0 10px;
  520.         font-size: 12px;
  521.         font-weight: bold;
  522.         color: #666;
  523.         }
  524.         .search-related .related_search .search_title a:first-of-type {
  525.         color: #fff;
  526.         background: #515773;
  527.         }
  528.         .search-related .related_search .search_content {
  529.         height: 320px;
  530.         background: #515773;
  531.         padding: 30px;
  532.         border-bottom-right-radius: 8px;
  533.         }
  534.         .search-related .related_search .search_content .sc_title {
  535.         font-size: 2em;
  536.         font-weight: bold;
  537.         color: #e4e0e0;
  538.         margin: 10px auto;
  539.         }
  540.         .search-related .related_search .search_content .sc_title2 {
  541.         margin: 5px auto;
  542.         color: #fff;
  543.         }
  544.         .search-related .related_search .search_content .search_div {
  545.         width: 80%;
  546.         height: 50px;
  547.         line-height: 50px;
  548.         margin: 20px auto;
  549.         color: #fff;
  550.         /* border: 1px solid #000; */
  551.         background: #fff;
  552.         position: relative;
  553.         }
  554.         .search-related .related_search .search_content .search_div span:first-of-type {
  555.         display: inline-block;
  556.         width: 50px;
  557.         height: 50px;
  558.         color: #333;
  559.         text-align: center;
  560.         }
  561.         .search-related .related_search .search_content .search_div input {
  562.         border-style: none;
  563.         width: 80%;
  564.         height: 48px;
  565.         }
  566.         .search-related .related_search .search_content .search_div button {
  567.         display: block;
  568.         border-style: none;
  569.         background: none;
  570.         height: 50px;
  571.         line-height: 50px;
  572.         color: #fff;
  573.         margin: 0 auto;
  574.         }
  575.         .search-related .related_search .search_content .search_div span:last-of-type {
  576.         position: absolute;
  577.         right: 0;
  578.         width: 100px;
  579.         height: 50px;
  580.         background: #98a1ad;
  581.         }
  582.         .search-related .related_search .search_content .hot_key {
  583.         margin-bottom: 25px;
  584.         color: #fff;
  585.         }
  586.         .search-related .related_search .search_content .hot_key span {
  587.         display: inline-block;
  588.         color: #fff;
  589.         background: #898c87;
  590.         font-size: 12px;
  591.         text-align: center;
  592.         border-radius: 8px;
  593.         height: 35px;
  594.         line-height: 35px;
  595.         padding: 0 5px;
  596.         margin: 10px;
  597.         }
  598.         .search-related .related_search .search_content .ls_key {
  599.         margin-top: -20px;
  600.         color: #fff;
  601.         }
  602.         .content3 {
  603.         background: #fff;
  604.         /* border-radius: 8px; */
  605.         height: 635px;
  606.         }
  607.         .content3 .content3_title {
  608.         text-align: center;
  609.         font-size: 20px;
  610.         font-weight: 600;
  611.         color: #4d555d;
  612.         line-height: 30px;
  613.         padding-top: 20px;
  614.         padding-bottom: 10px;
  615.         }
  616.         .content3 .content3_content {
  617.         /* border: 1px solid #000; */
  618.         padding: 10px;
  619.         }
  620.         .content3 .content3_content .content_left ul li {
  621.         position: relative;
  622.         }
  623.         .content3 .content3_content .content_left .ct3_left_ad img {
  624.         width: 217px;
  625.         height: 364px;
  626.         border-radius: 8px;
  627.         margin-bottom: 18px;
  628.         }
  629.         .content3 .content3_content .content_left ul li img {
  630.         width: 217px;
  631.         height: 124px;
  632.         border-radius: 8px;
  633.         border: none;
  634.         }
  635.         .content3 .content3_content .content_left ul li span {
  636.         position: absolute;
  637.         top: 124px;
  638.         left: 0;
  639.         /* bottom: -50px; */
  640.         width: 217px;
  641.         height: 42px;
  642.         background-color: #fff;
  643.         color: #93999f;
  644.         font-size: 12px;
  645.         line-height: 42px;
  646.         padding: 0 20px;
  647.         border-bottom-left-radius: 8px;
  648.         border-bottom-right-radius: 8px;
  649.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  650.         }
  651.         .content3 .content3_content .content_left ul li a {
  652.         display: block;
  653.         border-radius: 8px;
  654.         padding: 15px 20px;
  655.         position: absolute;
  656.         top: 86px;
  657.         transition: top 0.3s;
  658.         height: 80px;
  659.         width: 217px;
  660.         background: #e2e2e2;
  661.         color: #555;
  662.         }
  663.         .content3 .content3_content .content_left ul li a:hover {
  664.         color: #333;
  665.         top: 45px;
  666.         }
  667.         /* 点击次数
  668.         .content3 .content3_content .content_left ul li span {
  669.         position: absolute;
  670.         bottom: -36px;
  671.         width: 100%;
  672.         height: 42px;
  673.         background-color: #fff;
  674.         color: #93999f;
  675.         font-size: 12px;
  676.         line-height: 42px;
  677.         padding: 0 20px;
  678.         border-bottom-left-radius: 8px;
  679.         border-bottom-right-radius: 8px;
  680.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  681.         }
  682.         .content3 .content3_content .content_left ul li a {
  683.         display: block;
  684.         border-radius: 8px;
  685.         padding: 15px 20px;
  686.         position: absolute;
  687.         top: 83px;
  688.         transition: top 0.3s;
  689.         height: 80px;
  690.         width: 100%;
  691.         background: #e2e2e2;
  692.         color: #555;
  693.         }
  694.         .content3 .content3_content .content_left ul li a:hover {
  695.         color: #333;
  696.         top: 46px;
  697.         } */
  698.         .content3 .content3_content .content_right {
  699.         width: 100%;
  700.         /* border: 1px solid yellowgreen; */
  701.         margin-left: 20px;
  702.         }
  703.         /* 右---------------------------------------- */
  704.         .content3 .content3_content .content_right ul li {
  705.         position: relative;
  706.         /* margin: 30px 5px; */
  707.         height: 192px;
  708.         }
  709.         .content3 .content3_content .content_right ul li img {
  710.         width: 217px;
  711.         height: 124px;
  712.         border-radius: 8px;
  713.         border: none;
  714.         }
  715.         .content3 .content3_content .content_right ul li span {
  716.         position: absolute;
  717.         top: 124px;
  718.         left: 0;
  719.         /* bottom: -50px; */
  720.         width: 217px;
  721.         height: 42px;
  722.         background-color: #fff;
  723.         color: #93999f;
  724.         font-size: 12px;
  725.         line-height: 42px;
  726.         padding: 0 20px;
  727.         border-bottom-left-radius: 8px;
  728.         border-bottom-right-radius: 8px;
  729.         box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  730.         }
  731.         .content3 .content3_content .content_right ul li a {
  732.         display: block;
  733.         border-radius: 8px;
  734.         padding: 15px 20px;
  735.         position: absolute;
  736.         top: 86px;
  737.         transition: top 0.3s;
  738.         height: 80px;
  739.         width: 217px;
  740.         background: #e2e2e2;
  741.         color: #555;
  742.         }
  743.         .content3 .content3_content .content_right ul li a:hover {
  744.         color: #333;
  745.         top: 50px;
  746.         }
  747.         .footer {
  748.         padding: 20px;
  749.         background: #393d49;
  750.         color: #787d82;
  751.         }
  752.         .footer .footer_left .footer_link a {
  753.         margin: 0 10px;
  754.         color: #c8cdd2;
  755.         }
  756.         .footer .footer_left .footer_link a:hover {
  757.         color: #fff;
  758.         }
  759.         .footer .footer_left .footer_company span {
  760.         /* font-size: 11px; */
  761.         }
  762.         .footer .footer_left .footer_company img {
  763.         padding-top: 25px;
  764.         width: 50px;
  765.         }
  766.         .footer .footer_left .copyright img {
  767.         padding-top: 25px;
  768.         width: 15px;
  769.         }
  770.         .footer .footer_left .copyright a {
  771.         margin: 0 1px;
  772.         color: #787d82;
  773.         }
  774.         .footer .footer_left .copyright a:hover {
  775.         color: #fff;
  776.         }
  777.         .footer .footer_left .add_tel {
  778.         padding-top: 25px;
  779.         }
  780.         .footer .footer_left .code{
  781.         position: relative;
  782.         }
  783.         .footer .footer_left .code img:last-of-type {
  784.         margin: 3px;
  785.         width: 100px;
  786.         position: absolute;
  787.         top: -150px;
  788.         right: 2%;
  789.         }
  790.         .footer .footer_left .code img:first-of-type {
  791.         margin: 3px;
  792.         width: 100px;
  793.         position: absolute;
  794.         top: -150px;
  795.         right: 12%;
  796.         }

总结：

  • 学习了flex布局后感觉比较容易上手
  • 可以自适应布局
  • 弹性盒子也比较容易理解
上一条：mysql 判断null和空字符串下一条：input标签type="checkbox"时，选中/不选分别传值true/false
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多