search

博客列表 >PHP大牛成长之路：Flex布局仿PHP中文网

PHP大牛成长之路：Flex布局仿PHP中文网

周Sir-BLOG
周Sir-BLOG原创
2020年06月29日 19:21:41636浏览

Flex布局仿PHP中文网

效果图如下：

HTML&DOM结构：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="./static/css/common.css" />
  8.     <link rel="stylesheet" href="./static/css/style.css" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <!-- 头部 -->
  13.     <div class="header">
  14.       <div class="nav flexDis flexAlignC">
  15.         <div class="logo"></div>
  16.         <ul>
  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="">工具下载</a></li>
  25.           <li><a href="">PHP培训</a></li>
  26.         </ul>
  27.         <p><a href="">注册</a><a href="">登录</a></p>
  28.       </div>
  29.     </div>
  30.     <!-- 主体 -->
  31.     <div class="top container flexDis">
  32.       <div class="menuList">
  33.         <ul>
  34.           <li>
  35.             <a href="">PHP开发<span>></span></a>
  36.           </li>
  37.           <li>
  38.             <a href="">前端开发<span>></span></a>
  39.           </li>
  40.           <li>
  41.             <a href="">服务端开发<span>></span></a>
  42.           </li>
  43.           <li>
  44.             <a href="">移动开发<span>></span></a>
  45.           </li>
  46.           <li>
  47.             <a href="">数据库<span>></span></a>
  48.           </li>
  49.           <li>
  50.             <a href="">服务器运维&下载<span>></span></a>
  51.           </li>
  52.           <li>
  53.             <a href="">在线工具箱<span>></span></a>
  54.           </li>
  55.           <li>
  56.             <a href="">常用类库<span>></span></a>
  57.           </li>
  58.         </ul>
  59.       </div>
  60.       <div class="viewAd">
  61.         <div class="search">
  62.           <a href="">PHP头条</a><span class="span1">新</span>
  63.           <a href="">孤独九贱</a>
  64.           <a href="">学习路线</a><span class="span2">新</span>
  65.           <a href="">在线工具</a>
  66.           <a href="">趣味课堂</a><span class="span3">新</span>
  67.           <a href="">社区问答</a>
  68.           <a href="">课程直播</a>
  69.           <span class="searchInput">
  70.             <input type="text" placeholder="输入关键字搜索" /><a href="">搜</a>
  71.           </span>
  72.         </div>
  73.         <div class="viewImg">
  74.           <img src="./static/img/b1.png" alt="" />
  75.         </div>
  76.         <div class="adImg flexDis flexAlignC flexContentA">
  77.           <p>
  78.             <a href=""><img src="./static/img/1.jpg" alt="" /></a>
  79.           </p>
  80.           <p>
  81.             <a href=""><img src="./static/img/2.png" alt="" /></a>
  82.           </p>
  83.           <p>
  84.             <a href=""><img src="./static/img/3.jpg" alt="" /></a>
  85.           </p>
  86.           <p>
  87.             <a href=""><img src="./static/img/4.jpg" alt="" /></a>
  88.           </p>
  89.         </div>
  90.       </div>
  91.     </div>
  92.     <!-- AD -->
  93.     <div class="ad1 container">
  94.       <a href=""> <img src="./static/img/index_ad222.jpg" alt="" /></a>
  95.     </div>
  96.     <!-- 内容1 -->
  97.     <div class="content1 container flexDis">
  98.             <!-- 内容-左-->
  99.       <div class="left">
  100.           <h4>&nbsp; 头条</h4>
  101.           <p><a href="">php中文网原创视频：《天龙八部》公益ph...</a></p>
  102.           <p><a href="">php中文网《玉女心经》公益PHP培训系列...</a></p>
  103.           <p><a href="">php的版本发展历史（1995-2020）</a></p>
  104.           <p><a href="">您知道吗？最好的语言：PHP 25 岁了！</a></p>
  105.           <p><a href=""></php>史上最污技术解读，我竟然秒懂了</a></p>
  106.           <p><a href="">2020年最新5个简洁优秀的个人博客模板免...</a></p>
  107.           <p><a href="">5款优秀的vue后台管理系统模板推荐（免...</a></p>
  108.           <p><a href="">6个大气的bootstrap后台管理系统模板推荐...</a></p>
  109.           <p><a href="">5款简洁的layui后台管理模板推荐（免费下...</a></p>
  110.           <p><a href="">5款个性的网页回到顶部特效代码</a></p>
  111.           <p><a href="">小皮面板 v0.53 版本今日发布！</a></p>
  112.           <p><a href="">phpstudy v8.1.0.4 版本今日发布！</a></p>
  113.       </div>
  114.             <!-- 内容-中-->
  115.       <div class="main flexGrowAuto">
  116.         <h4>&nbsp; 最新课程</h4>
  117.         <ul class="flexDis flexWrap ">
  118.           <li>
  119.             <a href="">
  120.             <div><img src="./static/img/11.jpg" alt=""></div>
  121.             <div><span>中级</span>PHP代码整洁之道</div>
  122.           </a>
  123.           </li>
  124.           <li>
  125.             <a href="">
  126.             <div><img src="./static/img/22.png" alt=""></div>
  127.             <div><span>初级</span>前端课程（五郞八卦棍系列）第一棍：HTML5</div>
  128.           </a>
  129.           </li>
  130.           <li>
  131.             <a href="">
  132.             <div><img src="./static/img/33.png" alt=""></div>
  133.             <div><span>初级</span>小皮面板使用视频教程</div>
  134.           </a>
  135.           </li>
  136.           <li>
  137.             <a href="">
  138.             <div><img src="./static/img/44.png" alt=""></div>
  139.             <div><span>初级</span>从零进入C语言</div>
  140.           </a>
  141.           </li>
  142.           <li>
  143.             <a href="">
  144.             <div><img src="./static/img/55.png" alt=""></div>
  145.             <div><span>中级</span>C语言进阶篇</div>
  146.           </a>
  147.           </li>
  148.           <li>
  149.             <a href="">
  150.             <div><img src="./static/img/66.png" alt=""></div>
  151.             <div><span>中级</span>PHP快速操控Excel之PhpSpreadsheet</div>
  152.           </a>
  153.           </li>
  154.         </ul>
  155.       </div>
  156.             <!-- 内容-右-->
  157.       <div class="right">
  158.           <h4>&nbsp; 常用手册</h4><h4><a href="">更多</a></h4>
  159.           <ul >
  160.             <li class="flexDis">
  161.               <div class="rightImg">
  162.                   <img src="./static/img/php.png" alt="">
  163.                 </div>
  165.               <div class="rightFont flexDis flexWrap flexAlignC">
  166.                 <a href="">PHP手册</a>
  167.                 <a href="">Linux手册</a>
  168.                 <a href="">ThinkPHP6.0</a>
  169.                 <a href="">CI手册大全</a>
  170.             </div>
  171.           </li>
  172.           <li class="flexDis">
  173.                   <div class="rightImg">
  174.                   <img src="./static/img/js.png" alt="">
  175.                 </div>
  177.               <div class="rightFont flexDis flexWrap flexAlignC">
  178.                 <a href="">JavaScript中文参考手册</a>
  179.                 <a href="">jQuery手册大全</a>
  180.             </div>
  181.           </li>
  182.           <li class="flexDis">
  183.             <div class="rightImg">
  184.               <img src="./static/img/mysql.png" alt="">
  185.             </div>
  187.             <div class="rightFont flexDis flexWrap flexAlignC">
  188.               <a href="">MySQL参考手册大全</a>
  189.               <a href="">laravel5.8速查表</a>
  190.            </div>
  191.           </li>
  192.           <li class="flexDis">
  193.             <div class="rightImg">
  194.               <img src="./static/img/python.png" alt="">
  195.             </div>
  197.             <div class="rightFont flexDis flexWrap flexAlignC">
  198.               <a href="">Python参考手册大全</a>
  199.               <a href="">Node.js中文学习手册</a>
  200.            </div>
  201.           </li>
  202.           <li class="flexDis">
  203.             <div class="rightImg">
  204.               <img src="./static/img/html.png" alt="">
  205.             </div>
  207.             <div class="rightFont flexDis flexWrap flexAlignC">
  208.               <a href="">html手册</a>
  209.               <a href="">CSS手册</a>
  210.               <a href="">AngularJS</a>
  211.               <a href="">Ajax手册</a>
  212.            </div>
  213.           </li>
  214.           <li class="flexDis">
  215.             <div class="rightImg">
  216.               <img src="./static/img/asp.jpg" alt="">
  217.             </div>
  219.             <div class="rightFont flexDis flexWrap flexAlignC">
  220.               <a href="">ASP参考手册大全</a>
  221.               <a href="">Bootstrap3参考手册</a>
  222.            </div>
  223.           </li>
  224.           </ul>
  225.       </div>
  226.     </div>
  228.     <div class="content2 container flexDis flexContentB">
  229.       <div class="content_ad_down">
  230.         <div class="content_ad">
  231.           <img src="./static/img/ad01.jpg" alt="">
  232.           <a href=""> phpStudy极速入门视频教程</a>
  233.           <span></span>
  234.           <span></span>
  235.           <span></span>
  236.         </div>
  237.         <div class="content_down">
  238.           <div class="down_title"><span><a href="">更多>></a> </span>php开发辅助工具下载</div>
  239.           <div class="down_content">
  240.             <ul>
  241.               <li><span>8-17</span><a href="">小皮面板（phpStudy for Linux 服务器运维管理</a></li>
  242.               <li><span>8-17</span><a href="">VSCode Windows 64位 下载</a></li>
  243.               <li><span>8-17</span><a href="">Memcached Win64位系统 1.4.4版本</a></li>
  244.               <li><span>8-17</span><a href="">Memcached Win32位系统 1.4.4版本</a></li>
  245.               <li><span>8-17</span><a href="">Memcached Win64位系统 1.4.5版本</a></li>
  246.               <li><span>8-17</span><a href="">Memcached Win32位系统 1.4.5版本</a></li>
  247.               <li><span>8-17</span><a href="">phpstudy安全自检修复程序</a></li>
  248.               <li><span>8-17</span><a href="">phpStudy V8.1（Win64位）</a></li>
  249.               <li><span>8-17</span><a href="">phpStudy V8.1（Win32位）</a></li>
  250.             </ul>
  251.           </div>
  252.         </div>
  253.       </div>
  254.       <div class="content_arc">
  255.         <div class="arc_title">
  256.           <span>技术文章</span>
  257.           <span>网站源码</span>
  258.           <span>原生手册</span>
  259.           <span>推荐博文</span>
  260.         </div>
  261.         <div class="arc_content">
  262.           <ul>
  263.             <li><span>php教程</span><span>|</span><a href="">什么是逆波兰式？</a><span>2020-06-24 </span></li>
  264.             <li><span>PHP7</span><span>|</span><a href="">学习PHP7的革新与性能优化</a><span>2020-06-24 </span></li>
  265.             <li><span>mysql教程</span><span>|</span><a href="">什么是逆波兰式？</a><span>2020-06-24 </span></li>
  266.             <li><span>Laravel</span><span>|</span><a href="">Laravel 如何包含自己的助手函数？</a><span>2020-06-24 </span></li>
  267.             <li><span>ThinkPHP</span><span>|</span><a href="">ThinkPHP 6.0 多语言优化扩展包的安装与使</a><span>2020-06-23 </span></li>
  268.             <li><span>css教程</span><span>|</span><a href="">css3新增伪类有哪些</a><span>2020-06-24 </span></li>
  269.             <li><span>js教程</span><span>|</span><a href="">ES6 Generator 基本使用</a><span>2020-06-24 </span></li>
  270.             <li><span>Redis</span><span>|</span><a href="">Redis集群中的节点分为哪两个</a><span>2020-06-24 </span></li>
  271.             <li><span>小程序开发</span><span>|</span><a href="">什么是骨架屏（Skeleton Screen）？</a><span>2020-06-24 </span></li>
  272.             <li><span>Python教</span><span>|</span><a href="">Python 如何自定义模块？</a><span>2020-06-24 </span></li>
  273.             <li><span>Python教</span><span>|</span><a href="">Python 的 help 函数使用</a><span>2020-06-24 </span></li>
  274.             <li><span>Java基础</span><span>|</span><a href="">Java Reactor 反应器模式</a><span>2020-06-24 </span></li>
  275.             <li><span>C#.Net教</span><span>|</span><a href="">C++语言标识符的命名规则是什么？</a><span>2020-06-24 </span></li>
  276.             <li><span>Golang</span><span>|</span><a href="">Go Wails 框架构建桌面应用示例</a><span>2020-06-24 </span></li>
  277.             <li><span>Docker</span><span>|</span><a href="">docker是什么？有什么作用？</a><span>2020-06-24 </span></li>
  278.             <li><span>PHP问题</span><span>|</span><a href="">PHP中 fsockopen 函数怎么用？</a><span>2020-06-24 </span></li>
  279.             <li><span>Apache</span><span>|</span><a href="">如何在centos下安装apache</a><span>2020-06-24 </span></li>
  280.             <li><span>Nginx</span><span>|</span><a href="">nginx实现负载均衡有哪几个模式</a><span>2020-06-24 </span></li>         
  281.           </ul>
  282.         </div>
  283.       </div>
  284.       <div class="content_qa">
  285.         <div class="qa_title"><span>社区问答</span></div>
  286.         <div class="qa_content">
  287.           <ul>
  288.             <li><a href="">总是显示密码错误，登录不了</a></li>
  289.             <li><a href="">朱老师用的什么屏幕截取软件？</a></li>
  290.             <li><a href="">请问jQuery按手机返回键后，不回退页面...</a></li>
  291.             <li><a href="">PHP7 编译安装 扩展相关问题</a></li>
  292.             <li><a href="">90%22=2 这个是怎么个模法？</a></li>
  293.             <li><a href="">页面中iframe内元素点击</a></li>
  294.             <li><a href="">朱老师, 这个地方按你的分类列表出不来...</a></li>
  295.             <li><a href="">朱老师,第6章后是不是还有内容啊</a></li>
  296.             <li><a href="">发帖后，再进行修改，帖子时间是第一次...</a></li>
  297.             <li><a href="">think目录下没有Db目录</a></li>
  298.             <li><a href="">只能访问index，不能访问hello</a></li>
  299.             <li><a href="">编辑页面出不来</a></li>
  300.             <li><a href="">关键词打开网站很慢怎么解决</a></li>
  301.             <li><a href="">登录不能跳转到后台</a></li>
  302.             <li><a href="">访问中心服务器错误</a></li>
  303.           </ul>
  304.         </div>
  305.       </div>
  306.     </div>
  308. <!-- ad:phpStudy -->
  310.   <div class="ad2 container"><a href=""><img src="./static/img/phpstudy.jpg" alt=""></a></div>
  314.   <!-- 词典搜索 -->
  316.   <div class="search-related container flexDis">
  317.     <div class="related_type">
  318.       <div class="type_title">词典分类</div>
  319.       <div class="type_content">
  320.         <ul>
  321.           <li><a href=""><i></i> HTML/CSS<span>HTML/CSS</span></a></li>
  322.           <li><a href=""><i></i>JavaScript<span>JavaScript</span></a></li>
  323.           <li><a href=""><i></i>服务端<span>服务端</span></a></li>
  324.           <li><a href=""><i></i>数据库<span>数据库</span></a></li>
  325.           <li><a href=""><i></i>移动端<span>移动端</span></a></li>
  326.           <li><a href=""><i></i>XML<span>XML</span></a></li>
  327.           <li><a href=""><i></i>ASP.NET<span>ASP.NET</span></a></li>
  328.           <li><a href=""><i></i>Web Services<span>Web Services</span></a></li>
  329.           <li><a href=""><i></i>开发工具<span>开发工具</span></a></li>
  330.           <li><a href=""><i></i>网站建设<span>网站建设</span></a></li>
  331.         </ul>
  332.       </div>
  333.     </div>
  334.     <div class="related_search">
  335.       <div class="search_title flexDis"><a href="">词典查询</a><a href="">全部词典</a><a href="">最近更新</a></div>
  336.       <div class="search_content flexDis flexDir-y">
  337.         <div class="sc_title">编程词典</div>
  338.         <div class="sc_title2">服务码农的在线技术手册</div>
  339.         <div class="search_div">
  340.           <span>图</span>
  341.           <span><input type="text" placeholder="请输入搜索内容"></span>
  342.           <span><button>搜索</button></span>
  343.         </div>        
  344.         <div class="hot_key">热门搜索：<span>PHP</span><span>MySQL</span><span>jquery</span><span>HTML</span><span>CSS</span></div>
  345.         <div class="ls_key">历史搜索：</div>
  346.       </div>
  347.     </div>
  348.   </div>
  350.   <!-- 内容3 -->
  351. <div class="content3 container ">
  352.   <div class="content3_title">php入门精品课程</div>
  353.   <div class="content3_content flexDis">
  354.     <div class="content_left">
  355.       <div class="ct3_left_ad"><img src="./static/img/index_learn_first.jpg" alt=""></div>
  356.        <ul>
  357.         <li> 
  358.           <img src="./static/img/thinkphp.jpg" alt="">
  359.           <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  360.           <span>4W+次播放</span>
  361.        </li>
  362.       </ul>
  363.     </div>
  365.     <div class="content_right ">
  366.       <ul class="flexDis flexWrap flexContentB flexAlignT">
  367.         <li> 
  368.           <img src="./static/img/thinkphp.jpg" alt="">
  369.           <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  370.           <span>4W+次播放</span>
  371.        </li>
  372.        <li> 
  373.         <img src="./static/img/thinkphp.jpg" alt="">
  374.         <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  375.         <span>4W+次播放</span>
  376.       </li>
  377.         <li> 
  378.           <img src="./static/img/thinkphp.jpg" alt="">
  379.           <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  380.           <span>4W+次播放</span>
  381.       </li>
  382.       <li> 
  383.         <img src="./static/img/thinkphp.jpg" alt="">
  384.         <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  385.         <span>4W+次播放</span>
  386.       </li>
  387.       <li> 
  388.         <img src="./static/img/thinkphp.jpg" alt="">
  389.         <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  390.         <span>4W+次播放</span>
  391.      </li>
  392.      <li> 
  393.       <img src="./static/img/thinkphp.jpg" alt="">
  394.       <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  395.       <span>4W+次播放</span>
  396.     </li>
  397.       <li> 
  398.         <img src="./static/img/thinkphp.jpg" alt="">
  399.         <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  400.         <span>4W+次播放</span>
  401.     </li>
  402.     <li> 
  403.       <img src="./static/img/thinkphp.jpg" alt="">
  404.       <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  405.       <span>4W+次播放</span>
  406.     </li>
  407.     <li> 
  408.       <img src="./static/img/thinkphp.jpg" alt="">
  409.       <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  410.       <span>4W+次播放</span>
  411.    </li>
  412.    <li> 
  413.     <img src="./static/img/thinkphp.jpg" alt="">
  414.     <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  415.     <span>4W+次播放</span>
  416.   </li>
  417.     <li> 
  418.       <img src="./static/img/thinkphp.jpg" alt="">
  419.       <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  420.       <span>4W+次播放</span>
  421.   </li>
  422.   <li> 
  423.     <img src="./static/img/thinkphp.jpg" alt="">
  424.     <a href="">ThinkPHP6.0极速入门(视频教程)</a>
  425.     <span>4W+次播放</span>
  426.   </li>
  427.       </ul>
  428.     </div>    
  429.   </div>
  430. </div>
  432.     <!-- 底部 -->
  433.     <div class="footer">
  434.       <div class="footer_left container">
  435.         <p class="footer_link">
  436.           <a href="">网站首页</a>
  437.           <a href="">PHP视频</a>
  438.           <a href="">PHP代码</a>
  439.           <a href="">PHP手册</a>
  440.           <a href="">词条手记</a>
  441.           <a href="">编程词典</a>
  442.         </p>
  443.         <p class="footer_company">
  444.           <span>php中文网：公益在线php培训，帮助PHP学习者快速成长！</span> 
  445.           <img src="./static/img/label_lg_90030.png" alt=""> 合肥彼岸互联信息技术有限公司
  446.         </p>
  447.         <p class="copyright">
  448.           Copyright 2014-2020 php.cn All Rights Reserved | 皖B2-20150071-9
  449.           <img src="./static/img/foot_line.gif" alt="">
  450.           皖公网安备 34010402701654号
  451.           <img src="./static/img/foot_line.gif" alt="">
  452.           <a href="">关于我们</a>
  453.           <a href="">免责申明</a>
  454.           <a href="">赞助与捐赠</a>
  455.           <a href="">广告合作</a>
  456.         </p>
  457.         <p class="add_tel">座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101</p>
  458.         <div class="code">
  459.           <img src="./static/img/code1.png" alt="">
  460.           <img src="./static/img/code2.jpg" alt="">
  461.         </div>    
  462.       </div>
  463.     </div>
  465.   </body>
  466. </html>

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

CSS样式：通用部分

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

总结：

通过学习Flex布局，能基本模仿出基本样式，弹性盒子的优点是自适应，这里使用的基本为像素单位，有些还未定义尺寸，由内容撑开，当图片确失或未加载，会导致布局错乱，需要在后期学习中不断改进。

上一条：网格布局实现课程信息下一条：PHP大牛成长之路：Grid 布局实现PHP中文网首页课程列表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
老周2020-06-29 19:22:161楼
demo地址： http://106.13.227.76/demo/

相关文章

查看更多