search

博客列表 >仿PHP中文网布局实战

仿PHP中文网布局实战

王佳祥
王佳祥原创
2020年06月27日 11:17:001200浏览

仿PHP中文网Flex布局实战

  • 做完效果：

  • html代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>php中文网</title>
  7.     <link rel="stylesheet" href="css/common.css" />
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <link rel="stylesheet" href="font_icon/iconfont.css">
  10.     <script src="font_icon/iconfont.js"></script>
  11.   </head>
  12.   <body class="flexCompatible flexVertical flexShrinkFixed">
  13.     <!-- 导航 -->
  14.     <header>
  15.       <ul class="flexCompatible flexDirV flexAlignC flexShrinkFixed">
  16.         <li><a href=""><img src="images/logo.png" alt="php中文网" /></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 class="flexCompatible flexVertical">
  22.             <a href="" class="flexCompatible flexAlignC flexGrow">技术文章<span class="iconfont">&#xe66a;</span></a>
  23.             <ul class="show ">
  24.                 <li><a href="">头条</a></li>
  25.                 <li><a href="">博客</a></li>
  26.                 <li><a href="">php教程</a></li>
  27.                 <li><a href="">php框架</a></li>
  28.                 <li><a href="">php小知识</a></li>
  29.                 <li><a href="">mysql教程</a></li>
  30.                 <li><a href="">html教程</a></li>
  31.                 <li><a href="">css教程</a></li>
  32.                 <li><a href="">js教程</a></li>
  33.                 <li><a href="">服务器运维</a></li>
  34.           </ul>
  35.         </li>
  37.         <li>
  38.             <a href="" class="flexCompatible flexAlignC flexGrow">资源下载<span class="iconfont">&#xe66a;</span></a>
  39.             <ul class="show show1 ">
  40.                 <li><a href="">php工具</a></li>
  41.                 <li><a href="">在线工具</a></li>
  42.                 <li><a href="">手册下载</a></li>
  43.                 <li><a href="">学习课件</a></li>
  44.                 <li><a href="">js特效</a></li>
  45.                 <li><a href="">后端模板</a></li>
  46.                 <li><a href="">网站源码</a></li>
  47.                 <li><a href="">类库下载</a></li>
  48.               </ul>
  49.         </li>
  50.         <li>
  51.             <a href="" class="flexCompatible flexAlignC flexGrow">编程词典<span class="iconfont">&#xe66a;</span></a>
  52.             <ul class="show ">
  53.                 <li><a href="">php词典</a></li>
  54.                 <li><a href="">原生手册</a></li>
  55.                 <li><a href="">mysql词典</a></li>
  56.                 <li><a href="">Linux词典</a></li>
  57.                 <li><a href="">Redis词典</a></li>
  58.                 <li><a href="">html词典</a></li>
  59.                 <li><a href="">Javascript词典</a></li>
  60.                 <li><a href="">CSS词典</a></li>
  61.                 <li><a href="">Bootstrap词典</a></li>
  62.                 <li><a href="">jQuery词典</a></li>
  63.               </ul>
  64.             </li>
  65.         </li>
  66.         <li><a href="">工具下载<span class="yd">&nbsp;●</span></a></li>
  67.         <li><a href="">php培训<span class="xin">新</span></a></li>
  68.         <div class="flexCompatible">
  69.           <a href="">登录</a>
  70.           <a href="">注册</a>
  71.         </div>
  72.       </ul>
  73.     </header>
  74.     <!-- 轮播图 -->
  75.     <div id="content1" class="flexCompatible">
  76.       <div class="lbleft flexCompatible flexVertical">
  77.         <ul>
  78.           <li>
  79.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;php开发</a>
  80.              <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  81.             <ul>
  82.               <li></li>
  83.             </ul>
  84.           </li>
  85.           <li>
  86.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前端开发</a>
  87.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  88.             <ul>
  89.               <li></li>
  90.             </ul>
  91.           </li>
  92.           <li>
  93.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务端开发</a>
  94.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  95.             <ul>
  96.               <li></li>
  97.             </ul>
  98.           </li>
  99.           <li>
  100.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动开发</a>
  101.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  102.             <ul>
  103.               <li></li>
  104.             </ul>
  105.           </li>
  106.           <li>
  107.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数据库</a>
  108.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  109.             <ul>
  110.               <li></li>
  111.             </ul>
  112.           </li>
  113.           <li>
  114.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务器运维&下载</a>
  115.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  116.             <ul>
  117.               <li></li>
  118.             </ul>
  119.           </li>
  120.           <li>
  121.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在线工具箱</a>
  122.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  123.             <ul>
  124.               <li></li>
  125.             </ul>
  126.           </li>
  127.           <li>
  128.             <a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常用类库</a>
  129.             <span class="iconfont" style="color:RGB(168, 179, 179);">&#xe662;</span>
  130.             <ul>
  131.               <li></li>
  132.             </ul>
  133.           </li>
  134.         </ul>
  135.       </div>
  136.       <!-- 轮播图右 -->
  137.       <div class="lbright flexCompatible flexVertical">
  138.         <ul class="flexCompatible flexAlignC">
  139.           <li><a href="">PHP头条</a><span class="xin1">新</span> </li>
  140.           <li><a href="">孤独九剑</a></li>
  141.           <li><a href="">学习路线</a><span class="xin1 xin2">新</span></li>
  142.           <li><a href="">在线工具</a></li>
  143.           <li><a href="">趣味课堂</a><span class="xin1 xin3">新</span></li>
  144.           <li><a href="">社区问答</a></li>
  145.           <li><a href="">课程直播</a></li>
  146.           <div><input type="text" placeholder="&nbsp;&nbsp;输入关键词搜索"></div>
  147.         </ul>
  148.         <div class="lunbo">
  149.           <img src="images/lunbo1.jpg" alt="">
  150.           <span class="iconfont icon1 icon3">&#xe660;</span>
  151.           <span class="iconfont icon2 icon3">&#xe662;</span>
  152.         </div>
  153.         <div class="lunboBottom flexCompatible flexContentV ">
  154.           <img src="images/index_yunv.jpg" alt="">
  155.           <img src="images/index_php_new4.jpg" alt="">
  156.           <img src="images/index_php_item3.jpg" alt="">
  157.           <img src="images/index_php_item2_.png" alt="">
  158.         </div>
  159.       </div>
  160.     </div>
  161.     <!-- 广告条 -->
  162.     <div class="guanggao">
  163.       <a href=""><img src="images/index_ad222.jpg" alt=""></a>
  164.     </div>
  165.     <!-- 头条，最新课程，常用手册 -->
  166.     <div id="content2" class="flexCompatible flexShrinkFixed flexContentB">
  167.       <!-- 头条 -->
  168.       <div class="toutiao flexCompatible flexVertical flexAlignC">
  169.         <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">头条</a> </h4></div>
  170.         <div>
  171.           <ul>
  172.             <li><a href="">php中文网原创视频:《天龙八部》公益php培训...</a></li>
  173.             <li><a href="">php中文网《玉女心经》公益PHP培训系列...</a></li>
  174.             <li><a href="">php的版本发展历史（1995-2020）</a></li>
  175.             <li><a href="">您知道吗？最好的语言：PHP 25 岁了！</a></li>
  176.             <li><a href="">史上最污技术解读，我竟然秒懂了</a></li>
  177.             <li><a href="">2020年最新5个简洁优秀的个人博客模板免...</a></li>
  178.             <li><a href="">5款优秀的vue后台管理系统模板推荐（免费...</a></li>
  179.             <li><a href="">6个大气的bootstrap后台管理系统模板推荐...</a></li>
  180.             <li><a href="">5款简洁的layui后台管理模板推荐（免费下载...</a></li>
  181.             <li><a href="">5款个性的网页回到顶部特效代码</a></li>
  182.             <li><a href="">小皮面板 v0.53 版本今日发布！</a></li>
  183.             <li><a href="">phpstudy v8.1.0.4 版本今日发布！</a></li>
  184.           </ul>
  185.         </div>
  186.       </div>
  187.       <!-- 最新课程 -->
  188.       <div class="kecheng flexCompatible flexVertical flexAlignC">
  189.         <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">最新课程</a> </h4></div>
  190.         <div class="flexCompatible flexWrap flexContentC flexContentV"> 
  191.           <a href="">
  192.             <img src="images/kecheng1.jpg" alt="">
  193.             <div><span>中级</span>&nbsp;&nbsp;PHP代码整洁之道  </div>
  194.           </a>
  195.           <a href="">
  196.             <img src="images/kecheng2.png" alt="">
  197.             <div><span>初级</span>&nbsp;&nbsp;前端课程(五郎八卦系列):第一棍</div>
  198.           </a>
  199.           <a href="">
  200.             <img src="images/kecheng3.png" alt="">
  201.             <div><span>初级</span>&nbsp;&nbsp;小皮面板使用视频教程 </div>
  202.           </a>
  203.           <a href="">
  204.             <img src="images/kecheng4.jpg" alt="">
  205.             <div><span>初级</span>&nbsp;&nbsp;从零进入C语言  </div>
  206.           </a>
  207.           <a href="">
  208.             <img src="images/kecheng5.jpg" alt="">
  209.             <div><span>中级</span>&nbsp;&nbsp;C语言进阶篇 </div>
  210.           </a>
  211.           <a href="">
  212.             <img src="images/kecheng6.png" alt="">
  213.             <div><span>中级</span>&nbsp;&nbsp;PHP快速操控Excel之PhpSpreadsheet </div>
  214.           </a>
  215.         </div>
  216.       </div>
  217.       <!-- 常用手册 -->
  218.       <div class="shouce flexCompatible flexVertical flexAlignC">
  219.         <div class="flexCompatible flexContentB flexContentC flexAlignC">
  220.           <h4>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">常用手册</a> </h4><h3><a href="">更多</a> </h3>
  221.         </div>
  222.         <div class="flexCompatible flexVertical">
  224.           <dd class="flexCompatible flexContentB flexAlignC">
  225.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce1.jpg" alt=""></li>
  226.             <li class="flexCompatible flexVertical  flexContentC">
  227.               <a href="">php手册Linux手册</a>
  228.               <a href="">ThinkPHP6.0CI手册大全</a>
  229.             </li>
  230.           </dd>
  232.           <dd class="flexCompatible flexContentB flexAlignC">
  233.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce2.jpg" alt=""></li>
  234.             <li class="flexCompatible flexVertical  flexContentC"> 
  235.               <a href="">JavaScript中文参考手册</a>
  236.               <a href="">jQuery手册大全</a>
  237.             </li>
  238.           </dd>
  240.           <dd class="flexCompatible flexContentB flexAlignC">
  241.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce3.jpg" alt=""></li>
  242.             <li class="flexCompatible flexVertical  flexContentC">
  243.               <a href="">MySQL参考手册大全</a>
  244.               <a href="">laravel5.8速查表</a>
  245.               </li>
  246.           </dd>
  248.           <dd class="flexCompatible flexContentB flexAlignC">
  249.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce4.jpg" alt=""></li>
  250.             <li class="flexCompatible flexVertical  flexContentC">
  251.               <a href="">Python参考手册大全</a>
  252.               <a href="">Node.js中文学习手册</a>
  253.               </li>
  254.           </dd>
  256.           <dd class="flexCompatible flexContentB flexAlignC">
  257.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce5.jpg" alt=""></li>
  258.             <li class="flexCompatible flexVertical  flexContentC">
  259.               <a href="">html手册CSS手册</a>
  260.               <a href="">AngularJSAjax手册</a>
  261.               </li>
  262.           </dd>
  264.           <dd class="flexCompatible flexContentB flexAlignC">
  265.             <li class="flexCompatible flexAlignC flexContentC"><img src="images/shouce6.jpg" alt=""></li>
  266.             <li class="flexCompatible flexVertical  flexContentC">
  267.               <a href="">ASP参考手册大全</a>
  268.               <a href="">Bootstrap3参考手册</a>
  269.               </li>
  270.           </dd>
  271.         </div>
  272.       </div> <!-- 常用手册结束 -->
  273.     </div> <!-- 头条，最新课程，常用手册结束 -->
  275.     <!-- 技术文章，网站源码，原生手册，推荐博文 -->
  276.     <div id="content3" class="flexCompatible flexShrinkFixed flexContentB">
  277.       <div class="left flexCompatible flexVertical">
  278.          <div class="lunbo2">
  279.            <a href="">
  280.              <img src="images/急速入门.jpg" alt="">
  281.              <div class="flexCompatible flexLeve flexAlignC">
  282.                <h3>&nbsp;&nbsp;&nbsp;&nbsp;PHPStudy急速入门视频教程</h3>
  283.               <span></span>
  284.               <span></span>
  285.               <span></span>
  286.             </div>
  287.             </a>
  288.          </div>
  289.          <ul class="flexCompatible flexVertical flexAlignC flexContentC">
  290.            <li class="flexCompatible flexAlignC flexContentB"><h4>&nbsp;&nbsp;php开发辅助工具下载</h4><a href="">更多&gt;&gt;</a></li>
  291.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>小皮面板(phpStudy for Linux 服务器运维管理</a><span>01-17</span></li>
  292.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>VSCode Windows 64位 下载</a><span>01-16</span></li>
  293.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>Memcached Win64位系统 1.4.4版本</a><span>10-26</span></li>
  294.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>Memcached Win32位系统 1.4.4版本</a><span>10-26</span></li>
  295.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>Memcached Win64位系统 1.4.5版本</a><span>10-26</span></li>
  296.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>Memcached Win32位系统 1.4.5版本</a><span>10-26</span></li>
  297.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>phpstudy安全自检修复程序</a><span>09-23</span></li>
  298.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>phpStudy V8.1（Win64位）</a><span>08-05</span></li>
  299.            <li><a href=""><span>&bull;&nbsp;&nbsp;</span>phpStudy V8.1（Win32位）</a><span>08-05</span></li>
  300.          </ul>
  301.       </div>
  302.       <div class="middle" class="flexCompatible flexVertical">
  303.         <div>
  304.           <ul class="flexCompatible flexAlignC">
  305.             <li><span>技术文章</span> </li>
  306.             <li><span>网站源码</span></li>
  307.             <li><span>原生手册</span></li>
  308.             <li><span>推荐博文</span></li>
  309.           </ul>
  310.         </div>
  311.         <div>
  312.           <ul class="flexCompatible flexVertical flexContentC">
  313.             <li><a href=""><span>php教程</span><span>什么是波兰式？</span></a><span>06-25</span></li>
  314.             <li><a href=""><span>PHP7</span><span>学习PHP7的革新与性能优化</span></a><span>06-24</span></li>
  315.             <li><a href=""><span>Mysql教程</span><span>mysql中char表示什么意思</span></a><span>06-24</span></li>
  316.             <li><a href=""><span>Laravel</span><span>Laravel如何包含自己的助手函数？</span></a><span>06-24</span></li>
  317.             <li><a href=""><span>ThinkPHP</span><span>ThinkPHP6.0多语言优化扩展包的安装与使用</span></a><span>06-24</span></li>
  318.             <li><a href=""><span>css教程</span><span>css新增伪类有哪些</span></a><span>06-24</span></li>
  319.             <li><a href=""><span>js教程</span><span>ES6 Generator基本使用</span></a><span>06-24</span></li>
  320.             <li><a href=""><span>Redis</span><span>Redis集群中的节点分为哪两个？</span></a><span>06-23</span></li>
  321.             <li><a href=""><span>小程序开发</span><span>什么是骨架屏(Skeleton Screen)?</span></a><span>06-23</span></li>
  322.             <li><a href=""><span>Python教程</span><span>Python 如何自定义模块？</span></a><span>06-23</span></li>
  323.             <li><a href=""><span>Python教程</span><span>Python 的 help 函数使用</span></a><span>06-23</span></li>
  324.             <li><a href=""><span>Java基础</span><span>Java Reactor 反应器模式</span></a><span>06-23</span></li>
  325.             <li><a href=""><span>C#.Net教程</span><span>C++语言标识符的命名规则是什么？</span></a><span>06-23</span></li>
  326.             <li><a href=""><span>GolangGo</span><span>Wails 框架构建桌面应用示例</span></a><span>06-22</span></li>
  327.             <li><a href=""><span>Docker</span><span>docker是什么？有什么作用？</span></a><span>06-22</span></li>
  328.             <li><a href=""><span>PHP问题</span><span>PHP中 fsockopen 函数怎么用？</span></a><span>06-22</span></li>
  329.             <li><a href=""><span>Apache</span><span>如何在centos下安装apache</span></a><span>06-20</span></li>
  330.             <li><a href=""><span>Nginxnginx</span><span>实现负载均衡有哪几个模式</span></a><span>06-20</span></li>
  331.           </ul>
  332.         </div>
  333.       </div>
  334.       <div class="right flexCompatible flexVertical flexAlignC">
  335.         <div><a href="">&nbsp;&nbsp;&nbsp;&nbsp;最新社区问答</a></div>
  336.         <ul>
  337.           <li><a href="">请问jQuery按手机返回键后,不回退回页面...</a></li>
  338.           <li><a href="">PHP7 编译安装 扩展相关问题</a></li>
  339.           <li><a href="">90%22=2 这个是怎么个模法？</a></li>
  340.           <li><a href="">页面中iframe内元素点击</a></li>
  341.           <li><a href="">朱老师, 这个地方按你的分类列表出不来...</a></li>
  342.           <li><a href="">朱老师,第6章后是不是还有内容啊</a></li>
  343.           <li><a href="">发帖后，再进行修改,帖子时间是第一次的...</a></li>
  344.           <li><a href="">think目录下没有Db目录</a></li>
  345.           <li><a href="">只能访问index，不能访问hello</a></li>
  346.           <li><a href="">编辑页面出不来</a></li>
  347.           <li><a href="">关键词打开网站很慢怎么解决</a></li>
  348.           <li><a href="">登录不能跳转到后台</a></li>
  349.           <li><a href="">访问中心服务器错误</a></li>
  350.           <li><a href="">phpcom后台保存远程图片的问题</a></li>
  351.           <li><a href="">http://www.phpcms.cn/网站倒闭</a></li>
  352.           <li><a href="">pdo_mysql开启与关闭有什么影响？</a></li>
  353.           <li><a href="">出错了</a></li>
  354.           <li><a href="">最新ThinkPHP 5.1全球首发视频教程(60...</a></li>
  355.         </ul>
  356.       </div>
  357.     </div>
  358.     <!-- 技术文章，网站源码，原生手册，推荐博文结束 -->
  359.     <!-- 广告条2 -->
  360.     <div class="guanggao2">
  361.       <a href=""><img src="images/广告2.jpg" alt=""></a>
  362.     </div>
  363.     <!-- 广告条2结束 -->
  364.     <!-- 编程词典开始 -->
  365.     <div id="content4" class="flexCompatible flexShrinkFixed flexContentB">
  366.       <div class="left flexCompatible flexVertical">
  367.         <div><span>词典分类</span></div>
  368.         <ul class="flexCompatible flexVertical flexAlignE">
  369.           <li>
  370.             <a href="">
  371.               <span class="iconfont icon-daima2"></span>
  372.               <span>HTML/CSS</span>
  373.               <span>HTML/CSS</span>
  374.             </a>
  375.           </li>
  376.           <li>
  377.             <a href="">
  378.               <span class="iconfont icon-daima2"></span>
  379.               <span>JavaScript</span>
  380.               <span>JavaScript</span>
  381.             </a>
  382.           </li>
  383.           <li>
  384.             <a href="">
  385.               <span class="iconfont icon-daima2"></span>
  386.               <span>服务端</span>
  387.               <span>服务端</span>
  388.             </a>
  389.           </li>
  390.           <li>
  391.             <a href="">
  392.               <span class="iconfont icon-daima2"></span>
  393.               <span>数据端</span>
  394.               <span>数据端</span>
  395.             </a>
  396.           </li>
  397.           <li>
  398.             <a href="">
  399.               <span class="iconfont icon-daima2"></span>
  400.               <span>移动端</span>
  401.               <span>移动端</span>
  402.             </a>
  403.           </li>
  404.           <li>
  405.             <a href="">
  406.               <span class="iconfont icon-daima2"></span>
  407.               <span>XML</span>
  408.               <span>XML</span>
  409.             </a>
  410.           </li>
  411.           <li>
  412.             <a href="">
  413.               <span class="iconfont icon-daima2"></span>
  414.               <span>ASP.NET</span>
  415.               <span>ASP.NET</span>
  416.             </a>
  417.           </li>
  418.           <li>
  419.             <a href="">
  420.               <span class="iconfont icon-daima2"></span>
  421.               <span>Web Services</span>
  422.               <span>Web Services</span>
  423.             </a>
  424.           </li>
  425.           <li>
  426.             <a href="">
  427.               <span class="iconfont icon-daima2"></span>
  428.               <span>开发工具</span>
  429.               <span>开发工具</span>
  430.             </a>
  431.           </li>
  432.           <li>
  433.             <a href="">
  434.               <span class="iconfont icon-daima2"></span>
  435.               <span>网站建设</span>
  436.               <span>网站建设</span>
  437.             </a>
  438.           </li>
  440.         </ul>
  441.       </div>
  442.       <div class="right flexCompatible flexVertical">
  443.          <ul class="flexCompatible flexAlignC">
  444.            <li>词典查询</li>
  445.            <li>全部词典</li>
  446.            <li>最近更新</li>
  447.          </ul>
  448.          <div class="flexCompatible flexVertical">
  449.            <div class="flexCompatible flexVertical flexAlignC">
  450.              <a href=""><h1>编程词典</h1></a>
  451.              <span>服务码农的在线技术手册</span>
  452.             </div>
  453.            <div class="flexCompatible flexContentC">
  454.              <span class="iconfont">&#xe63c;</span>
  455.              <input type="text">
  456.              <button>搜索</button>
  457.             </div>
  458.             <div class="flexCompatible flexAlignC">
  459.               <span>热门搜索:</span>
  460.               <a href="">PHP</a>
  461.               <a href="">MySQL</a>
  462.               <a href="">jQuery</a>
  463.               <a href="">HTML</a>
  464.               <a href="">CSS</a>
  465.             </div>
  466.             <div>
  467.               <span>历史搜索:</span>
  468.             </div>
  469.          </div>
  470.       </div>
  471.     </div>
  472.     <!-- 编程词典结束 -->
  473.     <!-- php入门精品课程开始 -->
  474.     <div  class="content5 flexCompatible flexVertical flexShrinkFixed">
  475.       <div class="flexCompatible flexVertical">
  476.       <div class="top flexCompatible flexContentC flexAlignC">
  477.         <span class="iconfont icon-daima2"></span>
  478.         <h2>PHP入门精品课程</h2>
  479.         <span class="iconfont icon-daima2"></span>
  480.       </div>
  481.       <div class="bottom flexCompatible">
  482.         <ul class="flexCompatible flexVertical flexAlignC">
  483.           <li><img src="images/入门精品课程.jpg" alt=""></li>
  484.           <li>
  485.             <a href="" class="tupian">
  486.               <img src="images/t1.jpg" alt="">
  487.               <div>
  488.                 <div class="flexCompatible flexContentC flexAlignC">
  489.                   <span class="span1">中级</span>
  490.                   <span>ThinkPHP6.0极速入门</span>
  491.                 </div>
  492.                 <div><span class="span2">4W+次播放</span></div>
  493.               </div>
  494.             </a>
  495.           </li>
  496.         </ul>  
  497.         <ul class="flexCompatible flexWrap flexContentV flexAlignC">
  498.           <li>
  499.             <a href="">
  500.               <img src="images/t2.png" alt="">
  501.               <div>
  502.                 <div class="flexCompatible flexContentC flexAlignC">
  503.                   <span class="span1">初级</span>
  504.                   <span>编程学习方法分享直播</span>
  505.                 </div>
  506.                 <div><span class="span2">1W+次播放</span></div>
  507.               </div>
  508.             </a>
  509.           </li>
  510.           <li>
  511.             <a href="">
  512.               <img src="images/t3.jpg" alt="">
  513.               <div>
  514.                 <div class="flexCompatible flexContentC flexAlignC">
  515.                   <span class="span1">初级</span>
  516.                   <span>2018前端入门_HTML5</span>
  517.                 </div>
  518.                 <div><span class="span2">18W+次播放</span></div>
  519.               </div>
  520.             </a>
  521.           </li>
  522.           <li>
  523.             <a href="">
  524.               <img src="images/t4.jpg" alt="">
  525.               <div>
  526.                 <div class="flexCompatible flexContentC flexAlignC">
  527.                   <span class="span1">中级</span>
  528.                   <span>CSS视频教程-玉女心经</span>
  529.                 </div>
  530.                 <div><span class="span2">10W+次播放</span></div>
  531.               </div>
  532.             </a>
  533.           </li>
  534.           <li>
  535.             <a href="">
  536.               <img src="images/t5.jpg" alt="">
  537.               <div>
  538.                 <div class="flexCompatible flexContentC flexAlignC">
  539.                   <span class="span1">初级</span>
  540.                   <span>JavaScript极速入门</span>
  541.                 </div>
  542.                 <div><span class="span2">18W+次播放</span></div>
  543.               </div>
  544.             </a>
  545.           </li>
  546.           <li>
  547.             <a href="">
  548.               <img src="images/t6.jpg" alt="">
  549.               <div>
  550.                 <div class="flexCompatible flexContentC flexAlignC">
  551.                   <span class="span1">中级</span>
  552.                   <span>孤独九剑(6)_jQuery</span>
  553.                 </div>
  554.                 <div><span class="span2">12W+次播放</span></div>
  555.               </div>
  556.             </a>
  557.           </li>
  558.           <li>
  559.             <a href="">
  560.               <img src="images/t7.jpeg" alt="">
  561.               <div>
  562.                 <div class="flexCompatible flexContentC flexAlignC">
  563.                   <span class="span1">初级</span>
  564.                   <span>30分钟学会网站布局</span>
  565.                 </div>
  566.                 <div><span class="span2">6W+次播放</span></div>
  567.               </div>
  568.             </a>
  569.           </li>
  570.           <li>
  571.             <a href="">
  572.               <img src="images/t8.jpg" alt="">
  573.               <div>
  574.                 <div class="flexCompatible flexContentC flexAlignC">
  575.                   <span class="span1">初级</span>
  576.                   <span>[公益直播课]Web前端</span>
  577.                 </div>
  578.                 <div><span class="span2">5W+次播放</span></div>
  579.               </div>
  580.             </a>
  581.           </li>
  582.           <li>
  583.             <a href="">
  584.               <img src="images/t9.jpg" alt="">
  585.               <div>
  586.                 <div class="flexCompatible flexContentC flexAlignC">
  587.                   <span class="span1">初级</span>
  588.                   <span>phpSyudy极速入门视频</span>
  589.                 </div>
  590.                 <div><span class="span2">40W+次播放</span></div>
  591.               </div>
  592.             </a>
  593.           </li>
  594.           <li>
  595.             <a href="">
  596.               <img src="images/t10.jpg" alt="">
  597.               <div>
  598.                 <div class="flexCompatible flexContentC flexAlignC">
  599.                   <span class="span1">中级</span>
  600.                   <span>孤独九剑(4)_PHP视频</span>
  601.                 </div>
  602.                 <div><span class="span2">50W+次播放</span></div>
  603.               </div>
  604.             </a>
  605.           </li>
  606.           <li>
  607.             <a href="">
  608.               <img src="images/t11.jpg" alt="">
  609.               <div>
  610.                 <div class="flexCompatible flexContentC flexAlignC">
  611.                   <span class="span1">初级</span>
  612.                   <span>php完全自学手册</span>
  613.                 </div>
  614.                 <div><span class="span2">20W+次播放</span></div>
  615.               </div>
  616.             </a>
  617.           </li>
  618.           <li>
  619.             <a href="">
  620.               <img src="images/t12.jpg" alt="">
  621.               <div>
  622.                 <div class="flexCompatible flexContentC flexAlignC">
  623.                   <span class="span1">初级</span>
  624.                   <span>MySQL权威开发指南</span>
  625.                 </div>
  626.                 <div><span class="span2">2W+次播放</span></div>
  627.               </div>
  628.             </a>
  629.           </li>
  630.           <li>
  631.             <a href="">
  632.               <img src="images/t13.jpg" alt="">
  633.               <div>
  634.                 <div class="flexCompatible flexContentC flexAlignC">
  635.                   <span class="span1">中级</span>
  636.                   <span>[公益直播课]php实战</span>
  637.                 </div>
  638.                 <div><span class="span2">3W+次播放</span></div>
  639.               </div>
  640.             </a>
  641.           </li>
  642.         </ul>
  643.       </div>
  644.     </div>
  645.     </div>
  646.     <!-- php入门精品课程结束 -->
  647.     <!-- 尾部开始 -->
  648.     <footer class="flexCompatible flexShrinkFixed flexContentC flexAlignC">
  649.       <div class="bottom flexCompatible">
  650.         <dd>
  651.           <li>
  652.             <a href="">网站首页</a>
  653.             <a href="">PHP视频</a>
  654.             <a href="">PHP实战</a>
  655.             <a href="">PHP代码</a>
  656.             <a href="">PHP手册</a>
  657.             <a href="">词条</a>
  658.             <a href="">手记</a>
  659.             <a href="">编程词典</a>
  660.           </li>
  661.           <li>
  662.             <span>php中文网：公益在线php培训，帮助PHP学习者快速成长！</span>
  663.             <img src="images/行业认证.png" alt="">
  664.             <span>合肥彼岸互联信息技术有限公司</span>
  665.           </li>
  666.           <li>
  667.             <span>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</span>
  668.             <span><img src="images/foot_line.gif" alt="">&nbsp;&nbsp;&nbsp;&nbsp; 皖公网安备 34010402701654号 <img src="images/foot_line.gif" alt=""></span>
  669.             <span>
  670.               <a href="">关于我们</a>
  671.               <a href="">负责申明</a>
  672.               <a href="">赞助与捐赠</a>
  673.               <a href="">广告合作</a>
  674.             </span>
  675.           </li>
  676.           <li><span>座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101</span> </li>
  677.         </dd>
  678.         <div>
  679.           <img src="images/二维码群.png" alt="">
  680.           <img src="images/php二维码.jpg" alt="">
  681.         </div>
  682.       </div>
  683.     </footer>
  684.     <!-- 尾部结束 -->
  685.   </body>
  686. </html>
  • css代码：
  1. .iconfont {
  2.   font-family: "iconfont" !important;
  3.   font-size: 25px;
  4.   font-style: normal;
  5.   -webkit-font-smoothing: antialiased;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }
  8. body {
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12. }
  13. header {
  14.   width: 100%;
  15. }
  16. header > ul {
  17.   height: 60px;
  18.   background: #000; /*导航条背景*/
  19. }
  20. header > ul > li:first-of-type {
  21.   width: 140px; /*logo图片php中文网*/
  22.   height: 60px;
  23. }
  24. header > ul img {
  25.   width: 100%;
  26.   height: 100%;
  27. }
  28. header > ul > li:not(:first-of-type) {
  29.   height: 60px; /*除了第一个li剩下的li元素*/
  30.   text-align: center;
  31.   line-height: 60px;
  32.   margin-left: 20px;
  33.   width: 96px;
  34.   position: relative;
  35. }
  36. header > ul > li:not(:first-of-type):hover {
  37.   border-bottom: 5px solid RGB(95, 184, 120);
  38. }
  39. header > ul a {
  40.   /*链接字体颜色*/
  41.   color: RGB(168, 179, 179);
  42. }
  43. header > ul > div:last-of-type {
  44.   margin-left: auto; /*登录注册的位置*/
  45. }
  46. header > ul > div:last-of-type a {
  47.   width: 60px; /*登录注册的大小*/
  48.   height: 60px;
  49.   line-height: 60px;
  50.   text-align: center;
  51. }
  52. header > ul > div:last-of-type a:hover {
  53.   background: RGB(54, 60, 65);
  54. }
  55. header > ul > li:nth-of-type(2) {
  56.   width: 68px;
  57.   height: 60px;
  58.   background: RGB(54, 60, 65);
  59. }
  60. header .xin {
  61.   background: RGB(255, 87, 34);
  62.   color: #fff;
  63.   font-size: 13px;
  64.   display: inline-block;
  65.   width: 18px;
  66.   height: 18px;
  67.   position: absolute;
  68.   top: 3px;
  69.   border-radius: 2px;
  70.   line-height: normal;
  71. }
  72. header .yd {
  73.   line-height: normal;
  74.   position: absolute;
  75.   top: 14px;
  76.   color: RGB(255, 87, 34);
  77. }
  78. header .show {
  79.   width: 200px;
  80.   height: 200px;
  81.   background: #fff;
  82.   box-shadow: 0 0 3px #888888;
  83.   padding: 0;
  84.   position: absolute;
  85.   top: 60px;
  86.   display: none;
  87.   z-index: 99;
  88. }
  90. header .show1 {
  91.   height: 160px;
  92. }
  93. header .show li,
  94. header .show1 li {
  95.   width: 90px;
  96.   height: 34px;
  97.   text-align: center;
  98.   line-height: 34px;
  99.   padding: 0;
  100.   margin: 5px 5px 0 5px;
  101.   float: left;
  102. }
  103. header > ul > li > ul > li > a {
  104.   color: RGB(51, 51, 51);
  105. }
  106. header > ul > li:hover .show {
  107.   display: block;
  108. }
  109. header .show li:hover {
  110.   background: RGB(242, 242, 242);
  111. }
  112. /* 轮播部分 */
  113. #content1 {
  114.   width: 1200px;
  115.   height: 510px;
  116.   box-shadow: 0 0 5px #888888;
  117.   margin-top: 35px;
  118.   border-radius: 10px;
  119. }
  120. #content1 > .lbleft {
  121.   width: 216px;
  122.   height: 510px;
  123.   background: RGB(43, 51, 59);
  124.   border-radius: 10px 0 0 10px;
  125. }
  126. #content1 > .lbright {
  127.   width: 984px;
  128.   height: 510px;
  129.   border-radius: 0 10px 10px 0;
  130. }
  131. #content1 > .lbleft > ul {
  132.   margin-top: 15px;
  133. }
  134. #content1 > .lbleft > ul > li {
  135.   width: 216px;
  136.   height: 60px;
  137.   line-height: 60px;
  138.   display: flex;
  139.   justify-content: start;
  140. }
  141. #content1 > .lbleft > ul > li > span {
  142.   margin-left: auto;
  143.   margin-right: 10px;
  144. }
  145. #content1 > .lbleft > ul > li > a {
  146.   color: RGB(168, 179, 179);
  147. }
  148. #content1 > .lbleft > ul > li:hover {
  149.   background: RGB(107, 113, 118);
  150.   cursor: pointer;
  151. }
  152. #content1 > .lbright > ul {
  153.   width: 984px;
  154.   height: 60px;
  155.   border-radius: 0 10px 0 0;
  156. }
  157. #content1 > .lbright > ul > li {
  158.   width: 80px;
  159.   height: 60px;
  160.   margin-left: 15px;
  161.   text-align: center;
  162.   line-height: 60px;
  163. }
  164. #content1 > .lbright > ul > li > a {
  165.   color: RGB(52, 51, 51);
  166. }
  167. #content1 > .lbright > ul > li > a:hover {
  168.   color: RGB(149, 150, 149);
  169. }
  170. #content1 > .lbright > ul > div:last-of-type {
  171.   margin-left: auto;
  172.   margin-right: 20px;
  173.   width: 260px;
  174.   height: 40px;
  175. }
  176. #content1 > .lbright > ul > div:last-of-type input {
  177.   width: 100%;
  178.   height: 100%;
  179.   border-radius: 5px;
  180.   border: 0;
  181.   outline: none;
  182.   background: RGB(241, 240, 240);
  183. }
  184. #content1 > .lbright > ul .xin1 {
  185.   background: RGB(255, 87, 34);
  186.   color: #fff;
  187.   font-size: 13px;
  188.   display: inline-block;
  189.   width: 18px;
  190.   height: 18px;
  191.   border-radius: 2px;
  192.   line-height: normal;
  193.   margin-left: 2px;
  194. }
  195. #content1 > .lbright > ul .xin2 {
  196.   background: RGB(47, 64, 86);
  197. }
  198. #content1 > .lbright > ul .xin3 {
  199.   background: RGB(255, 184, 0);
  200. }
  201. #content1 > .lbright > .lunbo {
  202.   width: 984px;
  203.   height: 330px;
  204.   background: lightgreen;
  205.   position: relative;
  206. }
  207. #content1 > .lbright > .lunbo img {
  208.   width: 100%;
  209.   height: 100%;
  210. }
  211. #content1 > .lbright > .lunbo .icon1 {
  212.   font-size: 40px;
  213.   width: 45px;
  214.   height: 45px;
  215.   border-radius: 50%;
  216.   background: rgba(0, 0, 0, 0.2);
  217.   color: #fff;
  218.   cursor: pointer;
  219.   position: absolute;
  220.   top: 48%;
  221.   left: 0;
  222. }
  223. #content1 > .lbright > .lunbo .icon2 {
  224.   font-size: 40px;
  225.   width: 45px;
  226.   height: 45px;
  227.   border-radius: 50%;
  228.   background: rgba(0, 0, 0, 0.2);
  229.   color: #fff;
  230.   cursor: pointer;
  231.   position: absolute;
  232.   top: 48%;
  233.   right: 0;
  234. }
  235. #content1 > .lbright > .lunbo .icon3:hover {
  236.   background: rgba(0, 0, 0, 0.4);
  237. }
  238. #content1 > .lbright > .lunboBottom {
  239.   width: 984px;
  240.   height: 105px;
  241. }
  242. #content1 > .lbright > .lunboBottom img {
  243.   width: 236px;
  244.   height: 90px;
  245.   margin-top: 15px;
  246.   border-radius: 10px;
  247. }
  248. .guanggao {
  249.   width: 1200px;
  250.   height: 100px;
  251. }
  252. .guanggao img {
  253.   width: 1200px;
  254.   height: 80px;
  255.   border-radius: 10px;
  256.   margin-top: 20px;
  257. }
  258. #content2 {
  259.   width: 1200px;
  260.   height: 446px;
  261. }
  262. #content2 .toutiao {
  263.   height: 416px;
  264.   width: 300px;
  265. }
  266. #content2 .kecheng {
  267.   width: 620px;
  268.   height: 416px;
  269. }
  270. #content2 .shouce {
  271.   width: 260px;
  272.   height: 416px;
  273. }
  274. #content2 .toutiao,
  275. #content2 .kecheng,
  276. #content2 .shouce {
  277.   margin-top: 30px;
  278.   border-radius: 10px;
  279.   box-shadow: 0 0 3px #888888;
  280. }
  281. #content2 .toutiao div:first-of-type {
  282.   width: 280px;
  283.   height: 36px;
  284.   color: RGB(52, 53, 53);
  285.   line-height: 36px;
  286.   border-bottom: 1px dotted #bbb;
  287. }
  288. #content2 .toutiao div:first-of-type a {
  289.   color: RGB(52, 53, 53);
  290. }
  291. #content2 .toutiao div:last-of-type {
  292.   width: 280px;
  293.   height: 338px;
  294. }
  295. #content2 .toutiao div:last-of-type li {
  296.   width: 100%;
  297.   height: 19px;
  298.   display: flex;
  299.   flex-wrap: nowrap;
  300.   flex: 0;
  301.   margin-top: 9px;
  302. }
  303. #content2 .toutiao div:last-of-type li a {
  304.   font-size: 13px;
  305.   color: RGB(51, 51, 51);
  306.   letter-spacing: 0px;
  307. }
  308. #content2 .toutiao div:last-of-type li a:hover {
  309.   color: #888888;
  310. }
  311. #content2 .kecheng div:first-of-type {
  312.   width: 580px;
  313.   height: 36px;
  314.   color: RGB(52, 53, 53);
  315.   line-height: 36px;
  316.   border-bottom: 1px dotted #bbb;
  317. }
  318. #content2 .kecheng div:first-of-type a {
  319.   color: RGB(52, 53, 53);
  320. }
  321. #content2 .kecheng div:last-of-type {
  322.   width: 580px;
  323.   height: 338px;
  324. }
  325. #content2 .kecheng div:last-of-type a {
  326.   width: 172px;
  327.   height: 140px;
  328.   display: flex;
  329.   flex-flow: column nowrap;
  330.   margin-top: 20px;
  331.   box-shadow: 0 0 5px #888888;
  332.   border-radius: 5px;
  333. }
  334. #content2 .kecheng div:last-of-type a img {
  335.   width: 172px;
  336.   height: 90px;
  337.   border-radius: 5px 5px 0 0;
  338. }
  339. #content2 .kecheng div:last-of-type a div {
  340.   width: 172px;
  341.   height: 65px;
  342.   margin-top: -15px;
  343.   border-radius: 5px;
  344.   background: #fff;
  345.   z-index: 99;
  346. }
  347. #content2 .kecheng div:last-of-type a div {
  348.   color: RGB(52, 53, 53);
  349.   font-size: 15px;
  350.   line-height: 20px;
  351.   padding: 10px;
  352. }
  353. #content2 .kecheng div:last-of-type a div:hover {
  354.   color: #888;
  355. }
  356. #content2 .kecheng div:last-of-type a div span:first-of-type {
  357.   background: RGB(147, 153, 159);
  358.   color: #fff;
  359.   margin-top: -5px;
  360.   margin-left: 10px;
  361.   font-size: 12px;
  362.   line-height: 20px;
  363. }
  364. #content2 .shouce a {
  365.   color: RGB(52, 53, 53);
  366. }
  367. #content2 .shouce > div:first-of-type {
  368.   width: 230px;
  369.   height: 36px;
  370.   border-bottom: 1px dotted #bbb;
  371. }
  372. #content2 .shouce > div:last-of-type {
  373.   width: 230px;
  374.   height: 330px;
  375. }
  376. #content2 .shouce > div:last-of-type > dd {
  377.   width: 230px;
  378.   height: 55px;
  379. }
  380. #content2 .shouce > div:last-of-type > dd > li:first-of-type {
  381.   width: 50px;
  382.   height: 55px;
  383. }
  384. #content2 .shouce > div:last-of-type img {
  385.   width: 40px;
  386.   height: 40px;
  387. }
  388. #content2 .shouce > div:last-of-type > dd > li:last-of-type {
  389.   height: 55px;
  390.   width: 160px;
  391. }
  392. #content2 .shouce > div:last-of-type > dd > li:last-of-type a:hover {
  393.   color: #888;
  394. }
  395. /*技术文章，网站源码，原生手册，推荐博文*/
  396. #content3 {
  397.   width: 1200px;
  398.   height: 515px;
  399. }
  400. #content3 > .left {
  401.   width: 360px;
  402.   height: 500px;
  403. }
  404. #content3 > .left .lunbo2 {
  405.   width: 360px;
  406.   height: 187px;
  407.   border-radius: 5px;
  408.   background: #fff;
  409.   box-shadow: 0 0 5px #888;
  410.   position: relative;
  411. }
  412. #content3 > .left .lunbo2 img {
  413.   width: 356px;
  414.   height: 183px;
  415.   border-radius: 5px;
  416.   margin: 2px 2px;
  417. }
  418. #content3 > .left .lunbo2 a div:last-of-type {
  419.   width: 360px;
  420.   height: 26px;
  421.   position: absolute;
  422.   bottom: 2px;
  423.   left: 2px;
  424.   z-index: 99;
  425. }
  426. #content3 > .left .lunbo2 a div:last-of-type h3 {
  427.   display: block;
  428.   width: 290px;
  429.   height: 26px;
  430.   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
  431.   color: #fff;
  432.   line-height: 26px;
  433.   border-radius: 0 0 0 5px;
  434. }
  435. #content3 > .left .lunbo2 a div:last-of-type span {
  436.   display: block;
  437.   width: 10px;
  438.   height: 10px;
  439.   background: rgba(0, 0, 0, 0.7);
  440.   margin-left: 8px;
  441. }
  442. #content3 > .left .lunbo2 a div:last-of-type span:first-of-type {
  443.   background: RGB(250, 155, 31);
  444. }
  445. #content3 > .left > ul {
  446.   width: 360px;
  447.   height: 300px;
  448.   margin-top: 13px;
  449.   padding: 0;
  450.   border-radius: 5px;
  451.   box-shadow: 0 0 5px #888888;
  452. }
  453. #content3 > .left > ul > li:first-of-type {
  454.   width: 360px;
  455.   height: 35px;
  456. }
  457. #content3 > .left > ul > li:first-of-type a {
  458.   margin-right: 10px;
  459.   font-size: 12px;
  460.   color: RGB(51, 51, 51);
  461. }
  462. #content3 > .left > ul > li:not(:first-of-type) {
  463.   width: 350px;
  464.   height: 28px;
  465.   line-height: 28px;
  466.   display: flex;
  467.   justify-content: space-between;
  468.   align-items: center;
  469. }
  470. #content3 > .left > ul > li:not(:first-of-type) a {
  471.   color: RGB(51, 51, 51);
  472. }
  473. #content3 > .left > ul > li:not(:first-of-type) a:hover {
  474.   color: RGB(153, 153, 153);
  475. }
  476. #content3 > .left > ul > li:not(:first-of-type) span {
  477.   color: RGB(153, 153, 153);
  478. }
  479. #content3 > .middle {
  480.   width: 508px;
  481.   height: 500px;
  482.   box-shadow: 0 0 5px #888888;
  483.   border-radius: 5px;
  484. }
  485. #content3 > .middle > div:first-of-type {
  486.   width: 508px;
  487.   height: 36px;
  488.   border-bottom: 1px solid RGB(234, 234, 234);
  489. }
  490. #content3 > .middle > div:first-of-type ul li {
  491.   width: 90px;
  492.   height: 36px;
  493.   line-height: 36px;
  494.   text-align: center;
  495. }
  496. #content3 > .middle > div:first-of-type ul li span {
  497.   width: 60px;
  498.   display: block;
  499.   height: 36px;
  500.   margin: 0 15px;
  501.   color: RGB(51, 51, 51);
  502. }
  503. #content3 > .middle > div:first-of-type ul li span:hover {
  504.   border-bottom: 2px solid RGB(255, 74, 0);
  505.   cursor: pointer;
  506. }
  507. #content3 > .middle > div:last-of-type {
  508.   width: 508px;
  509.   height: 464px;
  510.   margin-top: 8px;
  511. }
  512. #content3 > .middle > div:last-of-type ul li {
  513.   width: 508px;
  514.   height: 25px;
  515.   display: flex;
  516.   justify-content: space-between;
  517. }
  518. #content3 > .middle > div:last-of-type ul li a {
  519.   display: flex;
  520.   line-height: 25px;
  521. }
  522. #content3 > .middle > div:last-of-type ul li a span:first-of-type {
  523.   color: RGB(153, 153, 153);
  524.   border-right: 1px solid RGB(204, 204, 204);
  525.   width: 90px;
  526.   height: 20px;
  527.   margin-left: 10px;
  528. }
  529. #content3 > .middle > div:last-of-type ul li a span:last-of-type {
  530.   color: RGB(51, 51, 51);
  531.   margin-left: 20px;
  532.   font-size: 14px;
  533. }
  534. #content3 > .middle > div:last-of-type ul li a span:last-of-type:hover {
  535.   color: RGB(153, 153, 153);
  536. }
  537. #content3 > .middle > div:last-of-type ul li > span {
  538.   color: RGB(245, 92, 11);
  539.   margin-right: 10px;
  540.   line-height: 25px;
  541. }
  542. #content3 > .right {
  543.   width: 310px;
  544.   height: 500px;
  545.   border-radius: 5px;
  546.   box-shadow: 0 0 5px #888888;
  547. }
  548. #content3 > .right a {
  549.   color: RGB(51, 51, 51);
  550. }
  551. #content3 > .right > div {
  552.   width: 310px;
  553.   height: 36px;
  554.   line-height: 36px;
  555.   border-bottom: 1px solid RGB(234, 234, 234);
  556. }
  557. #content3 > .right > ul {
  558.   margin-top: 8px;
  559. }
  560. #content3 > .right > ul li {
  561.   width: 290px;
  562.   height: 25px;
  563. }
  564. #content3 > .right > ul li a {
  565.   font-size: 14px;
  566.   line-height: 25px;
  567. }
  568. #content3 > .right > ul li a:hover {
  569.   color: RGB(153, 153, 153);
  570. }
  571. #content3 > .left,
  572. #content3 > .middle,
  573. #content3 > .right {
  574.   margin-top: 15px;
  575. }
  576. .guanggao2 {
  577.   width: 1200px;
  578.   height: 100px;
  579. }
  580. .guanggao2 > a img {
  581.   width: 1200px;
  582.   height: 80px;
  583.   margin-top: 20px;
  584.   border-radius: 10px;
  585. }
  586. /* 编程词典 */
  587. #content4 {
  588.   width: 1200px;
  589.   height: 410px;
  590. }
  591. #content4 > .left {
  592.   width: 232px;
  593.   height: 390px;
  594.   margin-top: 20px;
  595. }
  596. #content4 > .left > div:first-of-type {
  597.   width: 231px;
  598.   height: 40px;
  599.   background: RGB(238, 238, 238);
  600.   color: RGB(102, 102, 102);
  601.   line-height: 40px;
  602.   border-radius: 10px 0 0 0;
  603. }
  604. #content4 > .left > div:first-of-type span {
  605.   margin-left: 10px;
  606. }
  607. #content4 > .left > ul {
  608.   width: 231px;
  609.   height: 350px;
  610.   background-image: radial-gradient(circle, RGB(84, 93, 125), RGB(74, 75, 93));
  611.   border-radius: 0 0 0 10px;
  612. }
  613. #content4 > .left > ul a {
  614.   color: #fff;
  615. }
  616. #content4 > .left > ul li {
  617.   width: 211px;
  618.   height: 32px;
  619.   line-height: 32px;
  620.   margin-top: 2px;
  621. }
  622. #content4 > .left > ul > li > a span:first-of-type {
  623.   width: 10px;
  624.   height: 10px;
  625.   border-radius: 50%;
  626.   border: 1px solid #fff;
  627. }
  628. #content4 > .left > ul > li > a span:nth-of-type(2):hover {
  629.   color: RGB(187, 187, 187);
  630. }
  631. #content4 > .left > ul > li > a span:nth-of-type(2) {
  632.   margin-left: 20px;
  633. }
  634. #content4 > .left > ul > li > a span:last-of-type {
  635.   color: RGB(187, 187, 187);
  636.   font-size: 12px;
  637.   margin-left: 10px;
  638. }
  639. #content4 > .right {
  640.   height: 390px;
  641.   width: 966px;
  642.   margin-top: 20px;
  643. }
  644. #content4 > .right > ul {
  645.   width: 966px;
  646.   height: 40px;
  647.   background: RGB(238, 238, 238);
  648.   border-radius: 0 10px 0 0;
  649. }
  650. #content4 > .right > ul > li {
  651.   width: 68px;
  652.   height: 40px;
  653.   line-height: 40px;
  654.   text-align: center;
  655.   margin-left: 20px;
  656.   color: RGB(102, 102, 102);
  657. }
  658. #content4 > .right > ul > li:first-of-type {
  659.   background-image: radial-gradient(circle, RGB(93, 109, 154), RGB(74, 75, 93));
  660.   color: #fff;
  661. }
  662. #content4 > .right > ul > li:hover {
  663.   cursor: pointer;
  664. }
  665. #content4 > .right > div {
  666.   width: 966px;
  667.   height: 350px;
  668.   background-image: radial-gradient(circle, RGB(93, 109, 154), RGB(74, 75, 93));
  669.   border-radius: 0 0 10px 0;
  670. }
  671. #content4 > .right > div > div:first-of-type {
  672.   width: 966px;
  673.   height: 140px;
  674. }
  675. #content4 > .right > div > div:first-of-type a {
  676.   display: block;
  677.   width: 966px;
  678.   height: 100px;
  679.   line-height: 100px;
  680.   text-align: center;
  681. }
  682. #content4 > .right > div > div:first-of-type a h1 {
  683.   font-size: 30px;
  684.   color: RGB(228, 224, 224);
  685. }
  686. #content4 > .right > div > div:first-of-type span {
  687.   color: RGB(255, 255, 237);
  688. }
  689. #content4 > .right > div > div:nth-of-type(2) {
  690.   width: 966px;
  691.   height: 50px;
  692. }
  693. #content4 > .right > div > div:nth-of-type(2) span {
  694.   width: 50px;
  695.   height: 50px;
  696.   font-size: 30px;
  697.   background: #fff;
  698.   color: RGB(183, 187, 191);
  699.   line-height: 50px;
  700. }
  701. #content4 > .right > div > div:nth-of-type(2) input {
  702.   width: 600px;
  703.   height: 50px;
  704.   border: none;
  705.   outline: none;
  706. }
  707. #content4 > .right > div > div:nth-of-type(2) button {
  708.   width: 80px;
  709.   height: 50px;
  710.   background: RGB(152, 161, 173);
  711.   color: #fff;
  712.   font-family: "宋体";
  713.   font-size: 20px;
  714.   z-index: 99;
  715.   border: none;
  716.   outline: none;
  717. }
  718. #content4 > .right > div > div:nth-of-type(2) button:hover {
  719.   cursor: pointer;
  720. }
  721. #content4 > .right > div > div:nth-of-type(3) {
  722.   margin-top: 20px;
  723.   margin-left: 20px;
  724. }
  725. #content4 > .right > div > div:nth-of-type(3) span {
  726.   color: #fff;
  727. }
  728. #content4 > .right > div > div:nth-of-type(3) a {
  729.   display: block;
  730.   height: 35px;
  731.   background: RGB(137, 140, 135);
  732.   line-height: 35px;
  733.   text-align: center;
  734.   margin-left: 20px;
  735.   padding: 0 5px;
  736.   color: #fff;
  737. }
  738. #content4 > .right > div > div:nth-of-type(4) {
  739.   height: 35px;
  740.   margin-top: 20px;
  741. }
  742. #content4 > .right > div > div:nth-of-type(4) span {
  743.   color: #fff;
  744.   margin-left: 20px;
  745. }
  746. .content5 {
  747.   width: 1200px;
  748.   height: 666px;
  749. }
  750. .content5 > div {
  751.   width: 1200px;
  752.   height: 646px;
  753.   margin-top: 20px;
  754.   background: #fff;
  755.   border-radius: 10px;
  756.   box-shadow: 0 0 5px #888888;
  757. }
  758. .content5 > div > .top {
  759.   width: 1200px;
  760.   height: 50px;
  761.   text-align: center;
  762.   line-height: 50px;
  763. }
  764. .content5 > div > .top > span {
  765.   color: RGB(95, 159, 255);
  766.   font-weight: bold;
  767. }
  768. .content5 > div > .top > h2 {
  769.   font-size: 20px;
  770.   font-family: "宋体";
  771.   color: RGB(77, 85, 93);
  772.   padding: 0 5px;
  773. }
  774. .content5 > div > .bottom {
  775.   width: 1200px;
  776.   height: 576px;
  777. }
  778. .content5 > div > .bottom > ul:first-of-type > li:first-of-type {
  779.   width: 217px;
  780.   height: 362px;
  781.   margin-top: 10px;
  782. }
  783. .content5 > div > .bottom > ul:first-of-type > li:first-of-type img {
  784.   width: 217px;
  785.   height: 362px;
  786.   border-radius: 5px;
  787.   box-shadow: 0 0 5px #888888;
  788. }
  789. .content5 > div > .bottom > ul:first-of-type > li:last-of-type img {
  790.   width: 217px;
  791.   height: 124px;
  792.   border-radius: 5px 5px 0 0;
  793.   z-index: 10;
  794. }
  795. .content5 > div > .bottom > ul:first-of-type > li:last-of-type > a > div {
  796.   width: 217px;
  797.   height: 80px;
  798.   z-index: 99;
  799.   background: #fff;
  800.   position: absolute;
  801.   top: 92px;
  802.   border-radius: 5px;
  803. }
  804. .content5 > div > .bottom > ul:first-of-type {
  805.   width: 245px;
  806.   height: 576px;
  807. }
  808. .content5 > div > .bottom > ul:first-of-type > li:not(:first-of-type) {
  809.   width: 217px;
  810.   height: 172px;
  811.   margin-top: 20px;
  812.   position: relative;
  813.   border-radius: 5px;
  814.   box-shadow: 0 0 5px #888888;
  815. }
  816. .content5
  817.   > div
  818.   > .bottom
  819.   > ul:first-of-type
  820.   > li:not(:first-of-type)
  821.   > a
  822.   > div:first-of-type
  823.   > div {
  824.   width: 217px;
  825.   height: 40px;
  826.   color: RGB(87, 96, 100);
  827. }
  828. .content5
  829.   > div
  830.   > .bottom
  831.   > ul:first-of-type
  832.   > li:not(:first-of-type)
  833.   > a
  834.   > div:first-of-type
  835.   .span1 {
  836.   background: RGB(147, 153, 159);
  837.   padding: 1px;
  838.   color: #fff;
  839.   margin-right: 5px;
  840. }
  841. .content5
  842.   > div
  843.   > .bottom
  844.   > ul:first-of-type
  845.   > li:not(:first-of-type)
  846.   > a
  847.   > div:last-of-type {
  848.   width: 217px;
  849.   height: 40px;
  850. }
  851. .content5
  852.   > div
  853.   > .bottom
  854.   > ul:first-of-type
  855.   > li:not(:first-of-type)
  856.   > a
  857.   .span2 {
  858.   color: RGB(147, 153, 159);
  859.   font-size: 14px;
  860.   line-height: 40px;
  861.   margin-left: 25px;
  862. }
  863. .content5 > div > .bottom > ul:first-of-type > li a {
  864.   color: RGB(87, 96, 100);
  865. }
  866. .content5 > div > .bottom > ul:last-of-type {
  867.   width: 954px;
  868.   height: 576px;
  869. }
  870. .content5 > div > .bottom > ul:last-of-type > li {
  871.   width: 217px;
  872.   height: 172px;
  873.   position: relative;
  874.   border-radius: 5px;
  875.   box-shadow: 0 0 5px #888888;
  876. }
  877. .content5 > div > .bottom > ul:last-of-type > li > a > img {
  878.   width: 217px;
  879.   height: 124px;
  880.   border-radius: 5px 5px 0 0;
  881.   z-index: 10;
  882. }
  883. .content5 > div > .bottom > ul:last-of-type > li > a > div {
  884.   width: 217px;
  885.   height: 80px;
  886.   z-index: 99;
  887.   background: #fff;
  888.   position: absolute;
  889.   top: 92px;
  890.   border-radius: 5px;
  891. }
  892. .content5 > div > .bottom > ul:last-of-type > li > a > div > div:first-of-type {
  893.   width: 217px;
  894.   height: 40px;
  895.   color: RGB(87, 96, 100);
  896. }
  897. .content5 > div > .bottom > ul:last-of-type > li > a .span1 {
  898.   background: RGB(147, 153, 159);
  899.   padding: 1px;
  900.   color: #fff;
  901.   margin-right: 5px;
  902. }
  903. .content5 > div > .bottom > ul:last-of-type > li > a .span2 {
  904.   color: RGB(147, 153, 159);
  905.   font-size: 14px;
  906.   line-height: 40px;
  907.   margin-left: 25px;
  908. }
  909. /*底部******************************************/
  910. footer {
  911.   width: 100%;
  912.   height: 200px;
  913.   background: RGB(57, 61, 73);
  914. }
  915. footer > .bottom {
  916.   width: 1200px;
  917.   height: 200px;
  918. }
  919. footer > .bottom > dd {
  920.   width: 900px;
  921.   height: 150px;
  922.   margin-top: 30px;
  923. }
  924. footer > .bottom > dd li {
  925.   width: 900px;
  926.   height: 37px;
  927.   position: relative;
  928. }
  929. footer > .bottom > dd li:first-of-type a {
  930.   color: RGB(200, 205, 210);
  931.   font-size: 13px;
  932.   margin-left: 15px;
  933.   line-height: 37px;
  934. }
  935. footer > .bottom > dd li span {
  936.   font-size: 12px;
  937.   line-height: 50px;
  938.   position: relative;
  939.   color: RGB(100, 125, 130);
  940. }
  941. footer > .bottom > dd li:first-of-type a:hover {
  942.   color: #fff;
  943. }
  944. footer > .bottom > dd li:nth-of-type(2) img {
  945.   width: 50px;
  946.   height: 16px;
  947.   position: absolute;
  948.   bottom: 3px;
  949.   left: 330px;
  950. }
  951. footer > .bottom > dd li:nth-of-type(2) span:last-of-type {
  952.   margin-left: 70px;
  953. }
  954. footer > .bottom > dd li:nth-of-type(3) img {
  955.   width: 15px;
  956.   height: 18px;
  957.   position: absolute;
  958.   bottom: 0px;
  959. }
  960. footer > .bottom > dd li:nth-of-type(3) span:nth-of-type(2) {
  961.   margin-left: 2px;
  962. }
  963. footer > .bottom > dd li:nth-of-type(3) span:nth-of-type(3) {
  964.   margin-left: 20px;
  965. }
  966. footer > .bottom > dd li:nth-of-type(3) a {
  967.   color: RGB(100, 125, 130);
  968.   font-size: 13px;
  969.   margin-left: 5px;
  970. }
  971. footer > .bottom > dd li:nth-of-type(3) a:hover {
  972.   color: #fff;
  973. }
  974. footer > .bottom > div {
  975.   width: 300px;
  976.   height: 150px;
  977.   margin-top: 30px;
  978. }
  979. footer > .bottom > div img {
  980.   width: 100px;
  981.   height: 100px;
  982.   margin-top: 25px;
  983. }
  984. footer > .bottom > div img:nth-of-type(2) {
  985.   margin-left: 10px;
  986. }
  • 公共css代码：
  1. * {
  2.   padding: 0; /* 内边距 */
  3.   margin: 0; /* 外边距 */
  4.   box-sizing: border-box; /* 自己设定的宽度高度默认包括了内边距，边框的宽度 */
  5.   font-size: 14px;
  6. }
  7. html,
  8. body {
  9.   width: 100%; /* 宽百分百显示 */
  10.   height: 100%; /* 高百分百显示 */
  11.   overflow: hidden;
  12.   overflow-y: auto;
  13.   background: RGB(243, 245, 247);
  14. }
  15. a {
  16.   text-decoration: none; /*去掉下划线*/
  17. }
  18. @font-face {
  19.   /*引用阿里图标库*/
  20.   font-family: "iconfont";
  21.   src: url("../font_icon/iconfont.eot");
  22.   src: url("../font_icon/iconfont.eot?#iefix") format("embedded-opentype"),
  23.     url("../font_icon/iconfont.woff2") format("woff2"),
  24.     url("../font_icon/iconfont.woff") format("woff"),
  25.     url("../font_icon/iconfont.ttf") format("truetype"),
  26.     url("../font_icon/iconfont.svg#iconfont") format("svg");
  27. }
  28. button,
  29. img {
  30.   border: none; /*去掉默认边框样式*/
  31.   outline: none;
  32. }
  33. .flexCompatible {
  34.   /*flex兼容性设置*/
  35.   display: -webkit-flex;
  36.   display: -moz-flex;
  37.   display: -o-flex;
  38.   display: -ms-flexbox;
  39.   display: flex;
  40. }
  41. li {
  42.   list-style: none; /*去掉圆点*/
  43. }
  44. .flexGrow {
  45.   flex-grow: 1; /*自动填充剩余空间*/
  46. }
  47. .flexShrinkFixed {
  48.   flex-shrink: 0; /*防止缩小*/
  49. }
  50. .flexShrinkAuto {
  51.   flex-shrink: 1;
  52. }
  53. .flexLevel {
  54.   /*水平排列*/
  55.   flex-direction: row;
  56. }
  57. .flexVertical {
  58.   /*垂直排列*/
  59.   flex-direction: column;
  60. }
  61. .flexWrap {
  62.   flex-wrap: wrap;
  63. }
  65. .flexNoWrap {
  66.   flex-wrap: nowrap;
  67. }
  68. .flexContentS {
  69.   /*水平左对齐*/
  70.   justify-content: start;
  71. }
  72. .flexContentC {
  73.   /*水平居中对齐*/
  74.   justify-content: center;
  75. }
  77. .flexContentE {
  78.   /* 水平右对齐 */
  79.   justify-content: flex-end;
  80. }
  82. .flexContentV {
  83.   /* 水平平均对齐 */
  84.   justify-content: space-evenly;
  85. }
  87. .flexContentA {
  88.   /*项目位于各行之前、之间、之后都留有空白的容器内*/
  89.   justify-content: space-around;
  90. }
  92. .flexContentB {
  93.   /* 水平两端对齐 */
  94.   justify-content: space-between;
  95. }
  96. .flexAlignS {
  97.   /*垂直左对齐*/
  98.   align-items: flex-start;
  99. }
  101. .flexAlignC {
  102.   /*垂直居中对齐*/
  103.   align-items: center;
  104. }
  106. .flexAlignE {
  107.   /*垂直右对齐*/
  108.   align-items: flex-end;
  109. }
  111. .flexAlignB {
  112.   /*基线对齐*/
  113.   align-items: baseline;
  114. }
  116. .flexAlignT {
  117.   /* 自动伸展 */
  118.   align-items: stretch;
  119. }
  120. .alignContentA {
  121.   /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
  122.   align-content: space-around;
  123. }
  124. .alignContentB {
  125.   /*与交叉轴两端对齐，轴线之间的间隔平均分布*/
  126.   align-content: space-between;
  127. }
  128. .icon {
  129.   width: 0.5em;
  130.   height: 0.5em;
  131.   vertical-align: -0.15em;
  132.   fill: currentColor;
  133.   overflow: hidden;
  134. }

总结

通过这次实战，我学到了很多，遇到问题就去百度或者区学习群里面问大家，收获到了很多，引用了周老师的的公共css文件和阿里图标库非常方便实用，但是代码多了我看起来也是晕晕的。

上一条：11 阶段性实战学习：网站首页框架下一条：laravel实战-通用后台管理系统-基础设置/文章分类/文章分页列表/图片上传和嵌入富文本编辑器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多