Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP大牛成长之路：Flex布局仿PHP中文网
Blogger Information
Blog 63
fans 8
comment 8
visits 50119
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP大牛成长之路：Flex布局仿PHP中文网
周Sir-BLOG
Original
637 people have browsed it

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

Correcting teacher：GuanhuiGuanhui

Correction status：qualified

Teacher's comments：写的很好！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
老周 2020-06-29 19:22:16
demo地址： http://106.13.227.76/demo/
1 floor
Author's latest blog post