微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > 仿PHP中文网布局实战
博主信息
博文 55
粉丝 3
评论 0
访问量 70600
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
仿PHP中文网布局实战
王佳祥
原创
1413人浏览过

仿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文件和阿里图标库非常方便实用，但是代码多了我看起来也是晕晕的。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：按前端规范, class样式不区分大小写, 所以推荐使用蛇形命名,使用连接线, 如: user-pic, 而不是userPic, 或者 user_pic, 你可以看一下所有的css属性或值, 都是这路多单词之间使用连接线而不是大小写,如text-align, background-color...
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录