search

博客列表 >FlexBox仿全站布局

FlexBox仿全站布局

longlong
longlong原创
2020年06月28日 11:15:13595浏览

1. 仿某影视网站

此次布局引入了阿里字体图标，然后新建了index.html和index.css，在没有新建一个公共样式表的情况下，看看代码量，如下：

  • index.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.     <link rel="stylesheet" href="./css/index.css" />
  7.     <link rel="stylesheet" href="./css/fonts.css" />
  8.     <title>Document</title>
  9.   </head>
  10.   <body>
  11.     <!-- 头部区域 -->
  12.     <header>
  13.       <div>
  14.         <a href="">影视LOGO</a>
  15.         <div>
  16.           <a href=""
  17.             ><span class="iconfont">&#xe7c4; </span>
  18.             <span
  19.               >导航<span class="iconfont" style="font-size: 10px;"
  20.                 >&#xe600;
  21.               </span></span
  22.             >
  23.           </a>
  24.         </div>
  25.         <a href=""
  26.           ><span class="iconfont" style="font-size: 10px;">&#xe609;</span
  27.           >一键登录</a
  28.         >
  29.         <a href=""
  30.           >观看记录<span class="iconfont" style="font-size: 10px;"
  31.             >&#xe600;</span
  32.           ></a
  33.         >
  34.         <div>
  35.           <input type="search" placeholder="请输入关键字" />
  36.           <span>
  37.             <span class="iconfont">&#xe688;</span>
  38.             <span>搜索</span>
  39.           </span>
  40.         </div>
  41.       </div>
  42.     </header>
  43.     <!-- 导航区 -->
  44.     <section class="secNav">
  45.       <nav>
  46.         <a href="">首页</a>
  47.         <a href="">电视剧</a>
  48.         <a href="">电影</a>
  49.         <a href="">综艺</a>
  50.         <a href="">动漫</a>
  51.         <a href="">脱口秀</a>
  52.         <a href="">网络自制</a>
  53.         <a href="">搞笑</a>
  54.         <a href="">视频名站</a>
  55.       </nav>
  56.     </section>
  57.     <!-- 今日热点 -->
  58.     <section class="secHot">
  59.       <div>
  60.         <span class="iconfont" style="color: green; font-size: 1.8em;"
  61.           >&#xe631;</span
  62.         >
  63.         <span>今日热点</span>
  64.         <div>
  65.           <a href="">某某茅台股价新高</a>
  66.           <span class="iconfont">&#xec1e;</span>
  67.           <a href="">梦万州被捕画面</a>
  68.           <span class="iconfont">&#xec1e;</span>
  69.           <a href="">荷兰弟取关迪士尼</a>
  70.           <span class="iconfont">&#xec1e;</span>
  71.           <a href="">王媛小栈是邻居</a>
  72.           <span class="iconfont">&#xec1e;</span>
  73.           <a href="">一学生被剔光头</a>
  74.           <span class="iconfont">&#xec1e;</span>
  75.           <a href="">蔡某某办猪某某</a>
  76.         </div>
  77.       </div>
  78.       <div class="secHotImg">
  79.         <p>
  80.           <a href="">image</a>
  81.         </p>
  82.         <p>
  83.           <a href="">image</a>
  84.           <a href="">image</a>
  85.         </p>
  86.         <p>
  87.           <a href="">image</a>
  88.           <a href="">image</a>
  89.         </p>
  90.         <p>
  91.           <a href="">image</a>
  92.           <a href="">image</a>
  93.         </p>
  94.         <p>
  95.           <a href="">image</a>
  96.           <a href="">image</a>
  97.         </p>
  98.       </div>
  99.     </section>
  100.     <!-- 热门影视 -->
  101.     <section class="hotFilm">
  102.       <div>
  103.         <span>热门影视</span>
  104.         <a href="">如果岁月可回头</a>
  105.         <span class="iconfont">&#xec1e;</span>
  106.         <a href="">歌手.当打之年</a>
  107.         <span class="iconfont">&#xec1e;</span>
  108.         <a href="">狼群行动2</a>
  109.       </div>
  110.       <div>
  111.         <div>
  112.           <a href="">image</a>
  113.           <a href="">怪你过分美丽</a>
  114.           <span>秦岚变金牌经纪人,娱乐圈真人秀?</span>
  115.         </div>
  116.         <div>
  117.           <a href="">image</a>
  118.           <a href="">寻找周杰伦</a>
  119.           <span>周杰伦电影处女秀</span>
  120.         </div>
  121.         <div>
  122.           <a href="">image</a>
  123.           <a href="">天机之九幽业火</a>
  124.           <span>层层反转天机不可泄露</span>
  125.         </div>
  126.         <div>
  127.           <a href="">image</a>
  128.           <a href="">青春有你2</a>
  129.           <span>蔡旭坤严格获好评</span>
  130.         </div>
  131.         <div>
  132.           <a href="">image</a>
  133.           <a href="">乘风破浪的姐姐</a>
  134.           <span>开播猝不及防 “怼姐”上线啦</span>
  135.         </div>
  136.         <div>
  137.           <a href="">image</a>
  138.           <a href="">传闻中的陈芊芊</a>
  139.           <span>爆笑！这里女尊男卑，男人之奴</span>
  140.         </div>
  141.       </div>
  142.     </section>
  143.     <!-- 电视剧 -->
  144.     <section class="teleplay">
  145.       <!-- 电视剧头部 -->
  146.       <div class="teleplayHeader">
  147.         <span class="iconfont">&#xe604;</span>
  148.         <h3>电视剧</h3>
  149.         <a href="">更多<span class="iconfont">&#xe62b; </span></a>
  150.         <a href="">内地</a>
  151.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  152.         <a href="">香港</a>
  153.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  154.         <a href="">泰国</a>
  155.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  156.         <a href="">美国</a>
  157.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  158.         <a href="">日本</a>
  159.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  160.         <a href="">韩国</a>
  161.       </div>
  162.       <!-- 图片区域 -->
  163.       <div class="teleplayImg">
  164.         <!-- 八张图片 -->
  165.         <div>
  166.           <!-- 上面四张 -->
  167.           <div>
  168.             <div>
  169.               <a href="">image</a>
  170.               <a href="">电视剧标题</a>
  171.               <span>电视剧小标题</span>
  172.             </div>
  173.             <div>
  174.               <a href="">image</a>
  175.               <a href="">电视剧标题</a>
  176.               <span>电视剧小标题</span>
  177.             </div>
  178.             <div>
  179.               <a href="">image</a>
  180.               <a href="">电视剧标题</a>
  181.               <span>电视剧小标题</span>
  182.             </div>
  183.             <div>
  184.               <a href="">image</a>
  185.               <a href="">电视剧标题</a>
  186.               <span>电视剧小标题</span>
  187.             </div>
  188.             <div>
  189.               <a href="">image</a>
  190.               <a href="">电视剧标题</a>
  191.               <span>电视剧小标题</span>
  192.             </div>
  193.           </div>
  194.           <!-- 下面四张 -->
  195.           <div>
  196.             <div>
  197.               <a href="">image</a>
  198.               <a href="">电视剧标题</a>
  199.               <span>电视剧小标题</span>
  200.             </div>
  201.             <div>
  202.               <a href="">image</a>
  203.               <a href="">电视剧标题</a>
  204.               <span>电视剧小标题</span>
  205.             </div>
  206.             <div>
  207.               <a href="">image</a>
  208.               <a href="">电视剧标题</a>
  209.               <span>电视剧小标题</span>
  210.             </div>
  211.             <div>
  212.               <a href="">image</a>
  213.               <a href="">电视剧标题</a>
  214.               <span>电视剧小标题</span>
  215.             </div>
  216.             <div>
  217.               <a href="">image</a>
  218.               <a href="">电视剧标题</a>
  219.               <span>电视剧小标题</span>
  220.             </div>
  221.           </div>
  222.         </div>
  223.         <!-- 电视剧榜单 -->
  224.         <div>
  225.           <h3>电视剧榜单</h3>
  227.           <li><a href="">排行榜</a></li>
  228.           <li><a href="">排行榜</a></li>
  229.           <li><a href="">排行榜</a></li>
  230.           <li><a href="">排行榜</a></li>
  231.           <li><a href="">排行榜</a></li>
  232.           <li><a href="">排行榜</a></li>
  233.           <li><a href="">排行榜</a></li>
  234.           <li><a href="">排行榜</a></li>
  235.         </div>
  236.       </div>
  237.       <!-- 花絮和预告片 -->
  238.       <div class="trailer">
  239.         <!-- 标题栏 -->
  240.         <div>
  241.           <h3>花絮&预告片</h3>
  242.           <a href="">猎场开播：胡歌领衔高端职场大剧</a>
  243.         </div>
  244.         <!-- 花絮图片栏 -->
  245.         <div>
  246.           <div>
  247.             <a href="">image</a>
  248.             <a href="">花絮片小标题</a>
  249.           </div>
  250.           <div>
  251.             <a href="">image</a>
  252.             <a href="">花絮片小标题</a>
  253.           </div>
  254.           <div>
  255.             <a href="">image</a>
  256.             <a href="">花絮片小标题</a>
  257.           </div>
  258.           <div>
  259.             <a href="">image</a>
  260.             <a href="">花絮片小标题</a>
  261.           </div>
  262.           <div>
  263.             <a href="">image</a>
  264.             <a href="">花絮片小标题</a>
  265.           </div>
  266.           <div>
  267.             <a href="">image</a>
  268.             <a href="">花絮片小标题</a>
  269.           </div>
  270.         </div>
  271.       </div>
  272.     </section>
  273.     <!-- 电影 -->
  274.     <section class="film">
  275.       <!-- 电影导航部分 -->
  276.       <div class="filmNav">
  277.         <span class="iconfont">&#xe67d; </span>
  278.         <h3>电影</h3>
  279.         <a href=""
  280.           >更多
  281.           <span class="iconfont">&#xe62b;</span>
  282.         </a>
  283.         <a href="">内地</a>
  284.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  285.         <a href="">喜剧</a>
  286.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  287.         <a href="">2018</a>
  288.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  289.         <a href="">爱情</a>
  290.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  291.         <a href="">恐怖</a>
  292.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  293.         <a href="">悬疑</a>
  294.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  295.         <a href="">科幻</a>
  296.         <h3>电影榜单</h3>
  297.       </div>
  298.       <!-- 上排图片区 -->
  299.       <div class="filmImgUP">
  300.         <div>
  301.           <a href="">image</a>
  302.           <a href="">电影标题</a>
  303.           <span>电影小标题</span>
  304.         </div>
  305.         <div>
  306.           <a href="">image</a>
  307.           <a href="">电影标题</a>
  308.           <span>电影小标题</span>
  309.         </div>
  310.         <div>
  311.           <a href="">image</a>
  312.           <a href="">电影标题</a>
  313.           <span>电影小标题</span>
  314.         </div>
  315.         <div>
  316.           <a href="">image</a>
  317.           <a href="">电影标题</a>
  318.           <span>电影小标题</span>
  319.         </div>
  320.         <div>
  321.           <a href="">image</a>
  322.           <a href="">电影标题</a>
  323.           <span>电影小标题</span>
  324.         </div>
  325.         <div>
  326.           <a href="">image</a>
  327.           <a href="">电影标题</a>
  328.           <span>电影小标题</span>
  329.         </div>
  330.         <div>
  331.           <a href="">image</a>
  332.           <a href="">电影标题</a>
  333.           <span>电影小标题</span>
  334.         </div>
  335.         <div>
  336.           <a href="">电影排行</a>
  337.           <a href="">电影排行</a>
  338.           <a href="">电影排行</a>
  339.           <a href="">电影排行</a>
  340.           <a href="">电影排行</a>
  341.           <a href="">电影排行</a>
  342.           <a href="">电影排行</a>
  343.         </div>
  344.       </div>
  345.       <!-- 下排图片区 -->
  346.       <div class="filmImgDown">
  347.         <div>
  348.           <a href="">image</a>
  349.           <a href="">电影标题</a>
  350.           <span>电影小标题</span>
  351.         </div>
  352.         <div>
  353.           <a href="">image</a>
  354.           <a href="">电影标题</a>
  355.           <span>电影小标题</span>
  356.         </div>
  357.         <div>
  358.           <a href="">image</a>
  359.           <a href="">电影标题</a>
  360.           <span>电影小标题</span>
  361.         </div>
  362.         <div>
  363.           <a href="">image</a>
  364.           <a href="">电影标题</a>
  365.           <span>电影小标题</span>
  366.         </div>
  367.         <div>
  368.           <a href="">image</a>
  369.           <a href="">电影标题</a>
  370.           <span>电影小标题</span>
  371.         </div>
  372.         <div>
  373.           <a href="">image</a>
  374.           <a href="">电影标题</a>
  375.           <span>电影小标题</span>
  376.         </div>
  377.         <div>
  378.           <a href="">image</a>
  379.           <a href="">电影标题</a>
  380.           <span>电影小标题</span>
  381.         </div>
  382.         <div>
  383.           <a href="">image</a>
  384.           <a href="">电影标题</a>
  385.           <span>电影小标题</span>
  386.         </div>
  387.       </div>
  388.     </section>
  389.     <!-- 综艺区部分 -->
  390.     <section class="show">
  391.       <!-- 综艺区导航部分 -->
  392.       <div class="showNav">
  393.         <span class="iconfont">&#xe63a; </span>
  394.         <h3>综艺</h3>
  395.         <a href=""
  396.           >更多
  397.           <span class="iconfont">&#xe62b;</span>
  398.         </a>
  399.         <a href="">综合</a>
  400.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  401.         <a href="">播报</a>
  402.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  403.         <a href="">真人秀</a>
  404.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  405.         <a href="">情感</a>
  406.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  407.         <a href="">访谈</a>
  408.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  409.         <a href="">音乐</a>
  410.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  411.         <a href="">美食</a>
  412.       </div>
  413.       <!-- 上排图片区 -->
  414.       <div class="showImgUP">
  415.         <div>
  416.           <a href="">image</a>
  417.           <a href="">综艺标题</a>
  418.           <span>综艺小标题</span>
  419.         </div>
  420.         <div>
  421.           <a href="">image</a>
  422.           <a href="">综艺标题</a>
  423.           <span>综艺小标题</span>
  424.         </div>
  425.         <div>
  426.           <a href="">image</a>
  427.           <a href="">综艺标题</a>
  428.           <span>综艺小标题</span>
  429.         </div>
  430.         <div>
  431.           <a href="">image</a>
  432.           <a href="">综艺标题</a>
  433.           <span>综艺小标题</span>
  434.         </div>
  435.         <div>
  436.           <a href="">image</a>
  437.           <a href="">综艺标题</a>
  438.           <span>综艺小标题</span>
  439.         </div>
  440.         <div>
  441.           <a href="">image</a>
  442.           <a href="">综艺标题</a>
  443.           <span>综艺小标题</span>
  444.         </div>
  445.       </div>
  446.       <!-- 下排图片区 -->
  447.       <div class="showImgDown">
  448.         <div>
  449.           <a href="">image</a>
  450.           <a href="">综艺标题</a>
  451.           <span>综艺小标题</span>
  452.         </div>
  453.         <div>
  454.           <a href="">image</a>
  455.           <a href="">综艺标题</a>
  456.           <span>综艺小标题</span>
  457.         </div>
  458.         <div>
  459.           <a href="">image</a>
  460.           <a href="">综艺标题</a>
  461.           <span>综艺小标题</span>
  462.         </div>
  463.         <div>
  464.           <a href="">image</a>
  465.           <a href="">综艺标题</a>
  466.           <span>综艺小标题</span>
  467.         </div>
  468.         <div>
  469.           <a href="">image</a>
  470.           <a href="">综艺标题</a>
  471.           <span>综艺小标题</span>
  472.         </div>
  473.         <div>
  474.           <a href="">image</a>
  475.           <a href="">综艺标题</a>
  476.           <span>综艺小标题</span>
  477.         </div>
  478.       </div>
  479.     </section>
  480.     <!-- 动漫部分 -->
  481.     <section class="animation">
  482.       <!-- 动漫区导航部分 -->
  483.       <div class="animationNav">
  484.         <span class="iconfont">&#xe63a; </span>
  485.         <h3>动漫</h3>
  486.         <a href=""
  487.           >更多
  488.           <span class="iconfont">&#xe62b;</span>
  489.         </a>
  490.         <a href="">萌主页</a>
  491.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  492.         <a href="">少儿</a>
  493.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  494.         <a href="">国产</a>
  495.         <span class="iconfont" style="color: gray;">&#xec1e;</span>
  496.         <a href="">日本</a>
  497.         <h3>动漫排行</h3>
  498.       </div>
  499.       <!-- 中间图片区 -->
  500.       <div class="animationImg">
  501.         <!-- 左边图片 -->
  502.         <div>
  503.           <!-- 上排图片区 -->
  504.           <div class="animationImgUP">
  505.             <div>
  506.               <a href="">image</a>
  507.               <a href="">动漫标题</a>
  508.               <span>动漫小标题</span>
  509.             </div>
  510.             <div>
  511.               <a href="">image</a>
  512.               <a href="">动漫标题</a>
  513.               <span>动漫小标题</span>
  514.             </div>
  515.             <div>
  516.               <a href="">image</a>
  517.               <a href="">动漫标题</a>
  518.               <span>动漫小标题</span>
  519.             </div>
  520.             <div>
  521.               <a href="">image</a>
  522.               <a href="">动漫标题</a>
  523.               <span>动漫小标题</span>
  524.             </div>
  525.             <div>
  526.               <a href="">image</a>
  527.               <a href="">动漫标题</a>
  528.               <span>动漫小标题</span>
  529.             </div>
  530.           </div>
  531.           <!-- 下排图片区 -->
  532.           <div class="animationImgDown">
  533.             <div>
  534.               <a href="">image</a>
  535.               <a href="">动漫标题</a>
  536.               <span>动漫小标题</span>
  537.             </div>
  538.             <div>
  539.               <a href="">image</a>
  540.               <a href="">动漫标题</a>
  541.               <span>动漫小标题</span>
  542.             </div>
  543.             <div>
  544.               <a href="">image</a>
  545.               <a href="">动漫标题</a>
  546.               <span>动漫小标题</span>
  547.             </div>
  548.             <div>
  549.               <a href="">image</a>
  550.               <a href="">动漫标题</a>
  551.               <span>动漫小标题</span>
  552.             </div>
  553.             <div>
  554.               <a href="">image</a>
  555.               <a href="">动漫标题</a>
  556.               <span>动漫小标题</span>
  557.             </div>
  558.           </div>
  559.         </div>
  560.         <!-- 右边榜单 -->
  561.         <div class="animationHot">
  562.           <a href="">排行</a>
  563.           <a href="">排行</a>
  564.           <a href="">排行</a>
  565.           <a href="">排行</a>
  566.           <a href="">排行</a>
  567.           <a href="">排行</a>
  568.           <a href="">排行</a>
  569.           <a href="">排行</a>
  570.         </div>
  571.       </div>
  572.     </section>
  573.     <!-- 页脚 -->
  574.     <footer>
  575.       <div class="footUp">
  576.         <!-- 页脚LOGO -->
  577.         <a href="">LOGO</a>
  578.         <!-- 页脚导航 -->
  579.         <div>
  580.           <p>影视导航</p>
  581.           <div>
  582.             <a href="">电影</a>
  583.             <a href="">连续剧</a>
  584.             <a href="">综艺</a>
  585.             <a href="">动漫</a>
  586.             <a href="">视频名站</a>
  587.             <a href="">X分钟</a>
  588.             <a href="">短视频</a>
  589.             <a href="">美女</a>
  590.             <a href="">体育赛事</a>
  591.             <a href="">直播</a>
  592.             <a href="">排行榜</a>
  593.             <a href="">专题</a>
  594.           </div>
  595.         </div>
  596.         <div>
  597.           <p>其他频道</p>
  598.           <div>
  599.             <a href="">新闻</a>
  600.             <a href="">小说</a>
  601.             <a href="">旅游</a>
  602.             <a href="">星座</a>
  603.             <a href="">交友</a>
  604.             <a href="">页游</a>
  605.             <a href="">网游</a>
  606.             <a href="">游戏</a>
  607.             <a href="">音乐</a>
  608.             <a href="">天气</a>
  609.             <a href="">体育</a>
  610.             <a href="">足球</a>
  611.             <a href="">NBA</a>
  612.             <a href="">房产</a>
  613.             <a href="">汽车</a>
  614.             <a href="">银行</a>
  615.             <a href="">基金</a>
  616.             <a href="">特价</a>
  617.             <a href="">购物</a>
  618.             <a href="">团购</a>
  619.             <a href="">彩票</a>
  620.             <a href="">考试</a>
  621.             <a href="">女性</a>
  622.             <a href="">儿童</a>
  623.             <a href="">母婴</a>
  624.             <a href="">健康</a>
  625.           </div>
  626.         </div>
  627.       </div>
  628.       <div class="footDown">
  629.         <a href="">关于我们</a>
  630.         <a href="">常见问题</a>
  631.         <a href="">反馈意见</a>
  632.         <a href="">全站地图</a>
  633.         <span>京ICP证030173号</span>
  634.         <div>
  635.           <a href=""> <span class="iconfont">&#xe60a;</span>官方微博 </a>
  636.           <a href=""><span class="iconfont">&#xe694; </span>收藏本站</a>
  637.         </div>
  638.       </div>
  639.     </footer>
  640.   </body>
  641. </html>
  • index.css:
  1. /* 引入阿里字体图标 */
  2. .iconfont {
  3.   font-family: "iconfont" !important;
  4.   font-size: 16px;
  5.   font-style: normal;
  6.   -webkit-font-smoothing: antialiased;
  7.   -moz-osx-font-smoothing: grayscale;
  8. }
  9. /* 初始化 */
  10. * {
  11.   margin: 0;
  12.   padding: 0;
  13.   box-sizing: border-box;
  14. }
  15. /* 去掉a标签下划线，改变文本颜色 */
  16. a {
  17.   text-decoration: none;
  18.   color: black;
  19. }
  20. /* 根元素，默认字体，高，宽 */
  21. :root {
  22.   font-size: 16px;
  23.   width: 100vw;
  24.   height: 100vh;
  25. }
  26. /* body转为弹性盒 */
  27. body {
  28.   display: flex;
  29.   flex-flow: column nowrap;
  30. }
  31. /* 头部大区域加背景色 */
  32. header {
  33.   background: rgb(40, 151, 40);
  34. }
  35. /* 头部区域的大div */
  36. header > div {
  37.   display: flex;
  38.   width: 75vw;
  39.   min-width: 1000px;
  40.   height: 60px;
  41.   align-items: center;
  42.   margin: 0 auto;
  43. }
  44. /* 搜索框靠最右边 */
  45. header > div > div:last-of-type {
  46.   margin-left: auto;
  47.   display: flex;
  48.   align-items: center;
  49. }
  50. /* 导航项目稍向右移，产生一点距离 */
  51. header > div > div:first-of-type {
  52.   margin: 0 50px;
  53.   color: rgb(238, 236, 236);
  54. }
  55. /* 导航项目的字体大小 */
  56. header > div > div:first-of-type a {
  57.   font-size: 1rem;
  58.   display: inline-block;
  59.   height: 60px;
  60.   line-height: 60px;
  61.   padding: 0 10px;
  62. }
  63. /* 一键登录和观看记录的样式 */
  64. header > div a:last-of-type,
  65. header > div a:nth-last-of-type(2) {
  66.   margin: 10px;
  67.   font-size: 12px;
  68.   color: rgb(238, 236, 236);
  69.   display: inline-block;
  70.   height: 60px;
  71.   line-height: 60px;
  72.   padding: 0 10px;
  73. }
  74. /* 导航、一键登录、观看记录的光标移入效果 */
  75. header > div > div:first-of-type a:hover,
  76. header > div a:last-of-type:hover,
  77. header > div a:nth-last-of-type(2):hover {
  78.   background-color: rgb(28, 99, 28);
  79. }
  80. /* 影视LOGO的样式 */
  81. header > div > a:first-of-type {
  82.   color: rgb(238, 236, 236);
  83.   font-size: 1.3rem;
  84. }
  85. /* 搜索框的样式 */
  86. header input {
  87.   height: 2rem;
  88.   width: 20rem;
  89.   border: none;
  90.   outline: none;
  91.   border-radius: 5px 0 0 5px;
  92.   padding: 0 5px;
  93. }
  94. /* 搜索框旁边的搜索按钮 */
  95. header input + span {
  96.   background: rgb(28, 99, 28);
  97.   color: rgb(238, 236, 236);
  98.   padding: 6px 10px;
  99. }
  100. /* 光标移入搜索按钮时 */
  101. header input + span:hover {
  102.   cursor: pointer;
  103. }
  104. /* nav导航 */
  105. .secNav {
  106.   background: rgb(40, 151, 40);
  107.   border-top: 1px solid rgba(156, 149, 149, 0.8);
  108. }
  109. /* nav导航转弹性盒，设置对齐方式 */
  110. .secNav > nav {
  111.   width: 75vw;
  112.   min-width: 1000px;
  113.   margin: 0 auto;
  114.   height: 40px;
  115.   display: flex;
  116.   align-items: center;
  117. }
  118. /* nav导航中的a标签 */
  119. .secNav > nav > a {
  120.   color: beige;
  121.   padding: 0 1em;
  122.   height: inherit;
  123.   line-height: 40px;
  124. }
  125. /* 光标移入a标签时 */
  126. .secNav > nav > a:hover {
  127.   color: white;
  128.   background-color: rgb(38, 51, 38);
  129. }
  130. /* 今日热点部分 */
  131. .secHot {
  132.   width: 75vw;
  133.   min-width: 1000px;
  134.   margin: 10px auto;
  135.   padding: 20px 0;
  136. }
  137. /* 今日热点部分的导航栏 */
  138. .secHot > div:first-of-type {
  139.   display: flex;
  140.   align-items: center;
  141.   margin-bottom: 20px;
  142. }
  143. /* 今日热点字体样式 */
  144. .secHot > div > span:last-of-type {
  145.   font-size: 1.5em;
  146.   padding: 0 15px;
  147. }
  148. /* 今日热点的右边文字显示部分 */
  149. .secHot > div > div {
  150.   margin-left: auto;
  151.   display: flex;
  152.   align-items: center;
  153. }
  154. /* 文字的颜色和字体 */
  155. .secHot > div > div > a {
  156.   color: gray;
  157.   font-size: 13px;
  158. }
  159. /* 文字中间的圆点图标 */
  160. .secHot > div > div > span {
  161.   color: gray;
  162. }
  163. /* 光标移入到文字上时 */
  164. .secHot > div > div > a:hover {
  165.   color: green;
  166.   border-bottom: 1px solid green;
  167. }
  168. /* 今日热点下面的视频部分 */
  169. .secHot .secHotImg {
  170.   display: flex;
  171. }
  172. /* 今日热点下的第一张大图片 */
  173. .secHot .secHotImg p:first-of-type a {
  174.   display: inline-block;
  175.   border: 1px solid black;
  176.   width: 400px;
  177.   height: 250px;
  178.   margin-right: 10px;
  179. }
  180. /* 其他右边图片 */
  181. .secHot .secHotImg p:not(:first-of-type) {
  182.   display: flex;
  183.   flex-flow: column nowrap;
  184. }
  185. /* 其他右边图片样式 */
  186. .secHot .secHotImg p:not(:first-of-type) a {
  187.   display: inline-block;
  188.   border: 1px solid black;
  189.   width: 190px;
  190.   height: 120px;
  191.   margin-right: 10px;
  192.   margin-bottom: 10px;
  193. }
  194. /* 热门影视部分 */
  195. .hotFilm {
  196.   width: 75vw;
  197.   margin: 0 auto;
  198.   min-width: 1000px;
  199. }
  200. /* 热门影视部分导航栏 */
  201. .hotFilm > div:first-of-type {
  202.   display: flex;
  203.   align-items: center;
  204.   margin-bottom: 15px;
  205. }
  206. /* 热门影视字体样式 */
  207. .hotFilm > div:first-of-type > span:first-of-type {
  208.   font-size: 1.3em;
  209.   font-weight: bold;
  210.   padding-right: 50px;
  211. }
  212. /* 热门影视右边小字体 */
  213. .hotFilm > div:first-of-type a {
  214.   display: inline-block;
  215.   font-size: 13px;
  216.   color: gray;
  217.   padding: 0 10px;
  218. }
  219. /* 鼠标移入小字体时 */
  220. .hotFilm > div:first-of-type a:hover {
  221.   color: green;
  222.   text-decoration: underline green;
  223. }
  224. /* 圆点图标 */
  225. .hotFilm > div:first-of-type span:not(:first-of-type) {
  226.   color: gray;
  227. }
  228. /* 热门影视下方视频区 */
  229. .hotFilm > div:last-of-type {
  230.   display: flex;
  231.   justify-content: space-between;
  232. }
  233. /* 视频区的图片样式 */
  234. .hotFilm > div:last-of-type > div a:first-of-type {
  235.   display: inline-block;
  236.   width: 191px;
  237.   height: 100px;
  238.   border: 1px solid black;
  239. }
  240. /* 每一个视频区 */
  241. .hotFilm > div:last-of-type > div {
  242.   display: flex;
  243.   flex-flow: column nowrap;
  244.   flex: 1;
  245.   margin-right: 10px;
  246. }
  247. /* 每个视频区的小文字 */
  248. .hotFilm > div:last-of-type > div span {
  249.   font-size: 12px;
  250.   color: gray;
  251. }
  252. /* 每个视频区的标题 */
  253. .hotFilm > div:last-of-type > div a:last-of-type {
  254.   margin: 5px 0;
  255.   font-size: 15px;
  256. }
  257. /* 鼠标移入标题时 */
  258. .hotFilm > div:last-of-type > div a:last-of-type:hover {
  259.   color: green;
  260.   text-decoration: underline green;
  261. }
  262. /* 电视剧部分 */
  263. .teleplay {
  264.   width: 75vw;
  265.   margin: 30px auto;
  266.   min-width: 1000px;
  267.   padding-top: 10px;
  268.   border-top: 1px solid rgba(128, 128, 128, 0.3);
  269. }
  270. /* 电视剧头部 */
  271. .teleplay .teleplayHeader {
  272.   display: flex;
  273.   align-items: center;
  274.   margin-bottom: 10px;
  275. }
  276. /* 电视剧图标 */
  277. .teleplay .teleplayHeader > span:first-of-type {
  278.   color: green;
  279.   font-weight: bolder;
  280.   font-size: 1.5em;
  281.   padding-right: 15px;
  282. }
  283. /* 电视剧文字 */
  284. .teleplay .teleplayHeader > h3 {
  285.   font-size: 20px;
  286.   padding-right: 30px;
  287. }
  288. /* 右边“更多”文字 */
  289. .teleplay .teleplayHeader > a:first-of-type {
  290.   color: gray;
  291.   font-size: 13px;
  292.   padding-right: 50px;
  293. }
  294. /* 电视剧头部小导航 */
  295. .teleplay .teleplayHeader > a:not(:first-of-type) {
  296.   color: gray;
  297.   font-size: 13px;
  298.   padding: 0 5px;
  299. }
  300. /* 移入小导航时 */
  301. .teleplay .teleplayHeader > a:hover {
  302.   color: green;
  303.   text-decoration: underline green;
  304. }
  305. /* 电视剧图片区域 */
  306. .teleplay .teleplayImg {
  307.   display: flex;
  308. }
  309. .teleplay .teleplayImg > div:last-of-type {
  310.   margin-left: auto;
  311. }
  312. /* 每个图片区的样式 */
  313. .teleplay .teleplayImg > div > div > div > a:first-of-type {
  314.   display: inline-block;
  315.   width: 190px;
  316.   height: 100px;
  317.   border: 1px solid black;
  318. }
  319. .teleplay .teleplayImg > div > div {
  320.   display: flex;
  321. }
  322. .teleplay .teleplayImg > div > div > div {
  323.   display: flex;
  324.   flex-flow: column nowrap;
  325.   margin-right: 10px;
  326. }
  327. /* 每个图片区的标题 */
  328. .teleplay .teleplayImg > div > div > div > a:last-of-type {
  329.   font-size: 15px;
  330.   margin: 5px 0;
  331. }
  332. /* 移入标题时 */
  333. .teleplay .teleplayImg > div > div > div > a:last-of-type:hover {
  334.   color: green;
  335.   text-decoration: underline green;
  336. }
  337. /* 标题下面小文字 */
  338. .teleplay .teleplayImg > div > div > div > span {
  339.   font-size: 13px;
  340.   color: gray;
  341. }
  342. /* 电视剧榜单 */
  343. .teleplay .teleplayImg > div:last-of-type {
  344.   width: 190px;
  345.   min-width: 190px;
  346.   height: 295px;
  347.   display: flex;
  348.   flex-flow: column nowrap;
  349.   justify-content: space-between;
  350.   align-items: center;
  351.   background-color: lightsteelblue;
  352.   position: relative;
  353.   bottom: 20px;
  354. }
  355. /* 电视剧榜单的列表标记 */
  356. .teleplay .teleplayImg > div:last-of-type li {
  357.   list-style: decimal;
  358. }
  359. /* 预告片部分 */
  360. .trailer {
  361.   margin-top: 10px;
  362. }
  363. .trailer > div:first-of-type {
  364.   display: flex;
  365.   align-items: center;
  366. }
  367. /* 预告片标题文字 */
  368. .trailer h3 {
  369.   font-size: 20px;
  370.   padding-right: 30px;
  371. }
  372. /* 标题右边小文字 */
  373. .trailer > div:first-of-type > a {
  374.   font-size: 13px;
  375.   color: gray;
  376. }
  377. /* 移入小文字时 */
  378. .trailer > div:first-of-type > a:hover {
  379.   color: green;
  380.   text-decoration: underline green;
  381. }
  382. /* 预告片下面图片部分 */
  383. .trailer > div:last-of-type {
  384.   display: flex;
  385.   flex-flow: column nowrapw;
  386.   margin-top: 10px;
  387. }
  388. /* 预告片下面每个图片区域 */
  389. .trailer > div:last-of-type > div {
  390.   display: flex;
  391.   flex-flow: column nowrap;
  392.   margin-right: 10px;
  393.   /* 这一步很重要，之前的CSS设置都有点问题，到现在才感觉到这个属性的重要性
  394.   用了flex以后，不再需要设置图片区域宽度，让其自增扩大即可 */
  395.   flex: 1 0 auto;
  396. }
  397. /* 每个图片区域的样式 */
  398. .trailer > div:last-of-type > div > a:first-of-type {
  399.   height: 100px;
  400.   border: 1px solid black;
  401. }
  402. /* 预告片图片区域小标题 */
  403. .trailer > div:last-of-type > div > a:last-of-type {
  404.   font-size: 13px;
  405.   color: gray;
  406.   margin: 5px 0;
  407. }
  408. /* 移入小标题时 */
  409. .trailer > div:last-of-type > div > a:last-of-type:hover {
  410.   color: green;
  411.   text-decoration: underline green;
  412. }
  413. /* 电影区部分 */
  414. .film {
  415.   width: 75vw;
  416.   min-width: 1000px;
  417.   margin: 0 auto;
  418.   padding-top: 10px;
  419.   border-top: 1px solid rgba(128, 128, 128, 0.3);
  420. }
  421. /* 电影区导航部分 */
  422. .film .filmNav {
  423.   display: flex;
  424.   align-items: center;
  425. }
  426. /* 圆点图标 */
  427. .filmNav > span:first-of-type {
  428.   color: green;
  429.   padding-right: 15px;
  430.   font-size: 1.6em;
  431. }
  432. /* 电影标题文字 */
  433. .filmNav > h3:first-of-type {
  434.   font-size: 20px;
  435.   padding-right: 30px;
  436. }
  437. /* 电影榜单文字 */
  438. .filmNav > h3:last-of-type {
  439.   margin-left: auto;
  440.   padding-right: 60px;
  441. }
  442. /* 电影区右边“更多”文字 */
  443. .filmNav > a:first-of-type {
  444.   color: gray;
  445.   font-size: 13px;
  446.   padding-right: 50px;
  447. }
  448. /* 电影区导航文字 */
  449. .filmNav > a:not(:first-of-type) {
  450.   color: gray;
  451.   font-size: 13px;
  452.   padding: 0 5px;
  453. }
  454. /* 光标移入导航文字时 */
  455. .filmNav > a:hover {
  456.   color: green;
  457.   text-decoration: underline green;
  458. }
  459. /* 电影部分的上排图片区 */
  460. .film > .filmImgUP {
  461.   display: flex;
  462.   margin: 15px 0;
  463. }
  464. /* 每个图片区转弹性盒 */
  465. .film > .filmImgUP > div {
  466.   display: flex;
  467.   flex-flow: column nowrap;
  468.   margin-right: 10px;
  469.   flex: 1 0 auto;
  470. }
  471. /* 除掉最右边电影榜单的其他图片区 */
  472. .film > .filmImgUP > div:not(:last-of-type) > a:first-of-type {
  473.   height: 220px;
  474.   border: 1px solid black;
  475. }
  476. /* 电影榜单下面的列表显示 */
  477. .film > .filmImgUP > div:last-of-type {
  478.   background: lightblue;
  479.   align-items: center;
  480.   justify-content: space-evenly;
  481. }
  482. /* 图片区下方的小标题 */
  483. .film > .filmImgUP > div:not(:last-of-type) > a:last-of-type {
  484.   margin: 5px 0;
  485.   font-size: 15px;
  486. }
  487. /* 光标移入小标题时 */
  488. .film > .filmImgUP > div:not(:last-of-type) > a:last-of-type:hover {
  489.   color: green;
  490.   text-decoration: underline green;
  491. }
  492. /* 小标题下方的小文字 */
  493. .film > .filmImgUP > div:not(:last-of-type) > span {
  494.   font-size: 13px;
  495.   color: gray;
  496. }
  497. /* 电影部分下排图片区 */
  498. .film .filmImgDown {
  499.   display: flex;
  500. }
  501. .film .filmImgDown > div {
  502.   display: flex;
  503.   flex-flow: column nowrap;
  504.   flex: 1 0 auto;
  505.   margin-right: 10px;
  506. }
  507. .film .filmImgDown > div > a:first-of-type {
  508.   height: 220px;
  509.   border: 1px solid black;
  510. }
  511. .film .filmImgDown > div > a:last-of-type {
  512.   margin: 5px 0;
  513.   font-size: 15px;
  514. }
  515. .film .filmImgDown > div > a:last-of-type:hover {
  516.   color: green;
  517.   text-decoration: underline green;
  518. }
  519. .film .filmImgDown > div > span {
  520.   color: gray;
  521.   font-size: 13px;
  522. }
  523. /* 综艺部分区 */
  524. .show {
  525.   width: 75vw;
  526.   min-width: 1000px;
  527.   margin: 30px auto;
  528.   padding-top: 10px;
  529.   border-top: 1px solid rgba(128, 128, 128, 0.3);
  530. }
  531. /* 综艺区导航 */
  532. .show .showNav {
  533.   display: flex;
  534.   align-items: center;
  535. }
  536. /* 综艺区最左边的图标 */
  537. .showNav > span:first-of-type {
  538.   color: green;
  539.   padding-right: 15px;
  540.   font-size: 1.6em;
  541. }
  542. /* 综艺标题文字 */
  543. .showNav > h3 {
  544.   font-size: 20px;
  545.   padding-right: 30px;
  546. }
  547. /* 综艺区中“更多”文字 */
  548. .showNav > a:first-of-type {
  549.   color: gray;
  550.   font-size: 13px;
  551.   padding-right: 50px;
  552. }
  553. /* 综艺区右边导航栏 */
  554. .showNav > a:not(:first-of-type) {
  555.   color: gray;
  556.   font-size: 13px;
  557.   padding: 0 5px;
  558. }
  559. /* 移入导航栏文字时 */
  560. .showNav > a:hover {
  561.   color: green;
  562.   text-decoration: underline green;
  563. }
  564. /* 综艺部分的上排图片区 */
  565. .show > .showImgUP {
  566.   display: flex;
  567.   margin: 15px 0;
  568. }
  569. /* 每个图片区转弹性盒 */
  570. .show > .showImgUP > div {
  571.   display: flex;
  572.   flex-flow: column nowrap;
  573.   margin-right: 10px;
  574.   flex: 1 0 auto;
  575. }
  576. /* 每个图片区的图片样式 */
  577. .show > .showImgUP > div > a:first-of-type {
  578.   height: 120px;
  579.   border: 1px solid black;
  580. }
  581. /* 每个图片区的下方小标题 */
  582. .show > .showImgUP > div > a:last-of-type {
  583.   margin: 5px 0;
  584.   font-size: 15px;
  585. }
  586. /* 光标移入小标题时 */
  587. .show > .showImgUP > div > a:last-of-type:hover {
  588.   color: green;
  589.   text-decoration: underline green;
  590. }
  591. /* 小标题下方的小文字 */
  592. .show > .showImgUP > div > span {
  593.   color: gray;
  594.   font-size: 13px;
  595. }
  596. /* 综艺部分下排图片区 */
  597. .show .showImgDown {
  598.   display: flex;
  599. }
  600. /* 每个图片区转弹性盒 */
  601. .show .showImgDown > div {
  602.   display: flex;
  603.   flex-flow: column nowrap;
  604.   flex: 1 0 auto;
  605.   margin-right: 10px;
  606. }
  607. .show .showImgDown > div > a:first-of-type {
  608.   height: 120px;
  609.   border: 1px solid black;
  610. }
  611. .show .showImgDown > div > a:last-of-type {
  612.   margin: 5px 0;
  613.   font-size: 15px;
  614. }
  615. .show .showImgDown > div > a:last-of-type:hover {
  616.   color: green;
  617.   text-decoration: underline green;
  618. }
  619. .show .showImgDown > div > span {
  620.   color: gray;
  621.   font-size: 13px;
  622. }
  623. /* 动漫区部分 */
  624. .animation {
  625.   width: 75vw;
  626.   min-width: 1000px;
  627.   margin: 30px auto;
  628.   padding-top: 10px;
  629.   border-top: 1px solid rgba(128, 128, 128, 0.3);
  630. }
  631. /* 动漫区右边导航栏 */
  632. .animation .animationNav {
  633.   display: flex;
  634.   align-items: center;
  635. }
  636. /* 动漫区中最左边图标 */
  637. .animationNav > span:first-of-type {
  638.   color: green;
  639.   padding-right: 15px;
  640.   font-size: 1.6em;
  641. }
  642. /* 动漫区标题文字 */
  643. .animationNav > h3:first-of-type {
  644.   font-size: 20px;
  645.   padding-right: 30px;
  646. }
  647. /* “动漫排行”文字 */
  648. .animationNav > h3:last-of-type {
  649.   font-size: 20px;
  650.   margin-left: auto;
  651.   padding-right: 50px;
  652. }
  653. /* 动漫区导航栏中“更多”文字 */
  654. .animationNav > a:first-of-type {
  655.   color: gray;
  656.   font-size: 13px;
  657.   padding-right: 50px;
  658. }
  659. /* 动漫区右边导航文字（除“更多”外） */
  660. .animationNav > a:not(:first-of-type) {
  661.   color: gray;
  662.   font-size: 13px;
  663.   padding: 0 5px;
  664. }
  665. /* 移入导航栏文字时 */
  666. .animationNav > a:hover {
  667.   color: green;
  668.   text-decoration: underline green;
  669. }
  670. /* 动漫中间图片区为一个大容器，转弹性盒 */
  671. .animationImg {
  672.   display: flex;
  673. }
  674. /* 左侧图片集合区域 */
  675. .animationImg > div:first-of-type {
  676.   flex: 1 0 auto;
  677. }
  678. /* 右侧动漫排行区域 */
  679. .animationImg > div:last-of-type {
  680.   flex: 0 0 150px;
  681.   margin-left: auto;
  682.   display: flex;
  683.   flex-flow: column nowrap;
  684.   background: lightpink;
  685.   justify-content: space-around;
  686.   align-items: center;
  687. }
  688. /* 动漫部分的上排图片区 */
  689. .animationImg .animationImgUP {
  690.   display: flex;
  691.   margin: 15px 0;
  692. }
  693. .animationImgUP > div {
  694.   display: flex;
  695.   flex-flow: column nowrap;
  696.   margin-right: 10px;
  697.   flex: 1 0 auto;
  698. }
  699. .animationImgUP > div > a:first-of-type {
  700.   height: 120px;
  701.   border: 1px solid black;
  702. }
  703. .animationImgUP > div > a:last-of-type {
  704.   margin: 5px 0;
  705.   font-size: 15px;
  706. }
  707. .animationImgUP > div > a:last-of-type:hover {
  708.   color: green;
  709.   text-decoration: underline green;
  710. }
  711. .animationImgUP > div > span {
  712.   color: gray;
  713.   font-size: 13px;
  714. }
  715. /* 动漫部分下排图片区 */
  716. .animation .animationImgDown {
  717.   display: flex;
  718. }
  719. .animationImgDown > div {
  720.   display: flex;
  721.   flex-flow: column nowrap;
  722.   flex: 1 0 auto;
  723.   margin-right: 10px;
  724. }
  725. .animationImgDown > div > a:first-of-type {
  726.   height: 120px;
  727.   border: 1px solid black;
  728. }
  729. .animationImgDown > div > a:last-of-type {
  730.   margin: 5px 0;
  731.   font-size: 15px;
  732. }
  733. .animationImgDown > div > a:last-of-type:hover {
  734.   color: green;
  735.   text-decoration: underline green;
  736. }
  737. .animationImgDown > div > span {
  738.   color: gray;
  739.   font-size: 13px;
  740. }
  741. /* 页脚 */
  742. footer {
  743.   background: #e9e8ef;
  744.   height: 200px;
  745.   display: flex;
  746.   flex-flow: column nowrap;
  747.   align-items: center;
  748. }
  749. /* 页脚LOGO和右边导航 */
  750. .footUp {
  751.   width: 75vw;
  752.   margin: auto;
  753.   display: flex;
  754.   min-width: 1000px;
  755. }
  756. .footUp > * {
  757.   height: 100px;
  758. }
  759. .footUp > a {
  760.   width: 300px;
  761.   text-align: center;
  762.   border: 1px solid black;
  763.   margin-right: 20px;
  764. }
  765. .footUp > div > P {
  766.   color: gray;
  767.   padding: 15px 0;
  768.   font-size: 14px;
  769. }
  770. .footUp > div a {
  771.   color: gray;
  772.   font-size: 12px;
  773.   padding: 2px 5px 2px 0;
  774. }
  775. .footUp > div:last-of-type {
  776.   margin-left: 50px;
  777. }
  778. /* 页脚中最下面文字和右边“微博”、“收藏” */
  779. .footDown {
  780.   width: 75vw;
  781.   min-width: 1000px;
  782.   margin: auto;
  783.   display: flex;
  784. }
  785. .footDown a,
  786. .footDown span {
  787.   color: gray;
  788.   font-size: 14px;
  789.   padding-right: 10px;
  790. }
  791. .footDown > div {
  792.   margin-left: auto;
  793. }
  794. .footDown > div a {
  795.   font-size: 16px;
  796. }

展示效果如下：

  • 动态图：

  • 静态图：

1.1 小总结：

第一个PC端完成了，没有加入图片，确实不怎么好看，而且颜色没有调好，先不说外观，就看代码的话，肯定有点蒙圈，加上注释有接近800行，代码量太大了，虽然效果出来了，但是我觉得不理想，而且第一次写这种整站布局，入手的时候就有点困惑，从最开始布局的时候就已经出错了，最开始的想法就是先一点一点写DOM结构，再一点一点调样式，而没有对整体结构做过多的思考，上手就是敲代码，样式再慢慢调，结果导致使用了太多的代码来展示效果，不值当。布局中的上半部分代码，不管是html,还是css，都很混乱，自己都有点看不懂的感觉，到后半部分了，稍稍有所改观，也能明显的感觉到了一些代码的重复性，比如弹性盒的排列方式，字体的样式，所以，很有必要加一个公共样式表，比如common.css，专用于写一些公共的代码，而且这个布局我没有用好FlexBox的属性，只是用了一些它的对齐方式而已，越做到后面我越发现弹性项目中flex属性相当重要，如果运用好了，根本不需要像这个布局里面，来把一个图片区划分为上排和下排，做得不理想之余，我又写了下面一个网页。

2. 仿肯德基PC端

此次布局，主要和上次不一样的地方是加入了公共样式表common.css，另外对网页中大量类似图片区使用了flex属性，简单来说，一排代码让所有图片区完美展示，然后对整体DOM结构多思考了一下，不会像上次布局中结构太混乱。代码如下：

  • index.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.     <link rel="stylesheet" href="./css/index.css" />
  7.     <link rel="stylesheet" href="./css/fonts.css" />
  8.     <link rel="stylesheet" href="./css/common.css" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <!-- 头部 -->
  13.     <header class="flexFlowR same head">
  14.       <!-- 左边LOGO -->
  15.       <a href=""></a>
  16.       <!-- 中间导航 -->
  17.       <nav class="flexFlowRowWrap">
  18.         <li>
  19.           <a href="">均衡饮食 </a>
  20.         </li>
  21.         <li>
  22.           <a href="">网上订餐 </a>
  23.         </li>
  24.         <li>
  25.           <a href="">APP下载 </a>
  26.         </li>
  27.         <li>
  28.           <a href="">企业责任 </a>
  29.         </li>
  30.         <li>
  31.           <a href="">加入我们 </a>
  32.         </li>
  33.         <li>
  34.           <a href="">新闻中心 </a>
  35.         </li>
  36.         <li>
  37.           <a href="">运动音乐 </a>
  38.         </li>
  39.         <li>
  40.           <a href="">儿童乐园 </a>
  41.         </li>
  42.         <li>
  43.           <a href="">特许经营 </a>
  44.         </li>
  45.         <li>
  46.           <a href="">联系我们 </a>
  47.         </li>
  48.       </nav>
  49.       <!-- 右边LOGO -->
  50.       <a href="" class="flexFlowR"
  51.         ><img src="./images/logo-right.jpg" alt=""
  52.       /></a>
  53.     </header>
  54.     <!-- 轮播图区域 -->
  55.     <div class="container flexFlowR same">
  56.       <div>
  57.         <a href=""><img src="./images/adv1.jpg" alt="" /></a>
  58.         <a href=""><img src="./images/adv2.jpg" alt="" /></a>
  59.         <a href=""><img src="./images/adv3.jpg" alt="" /></a>
  60.         <a href=""><img src="./images/adv4.jpg" alt="" /></a>
  61.         <ul class="flexFlowR">
  62.           <li>
  63.             <a href=""><img src="./images/adv1-click.jpg" alt="" /></a>
  64.           </li>
  65.           <li>
  66.             <a href=""><img src="./images/adv2-click.jpg" alt="" /></a>
  67.           </li>
  68.           <li>
  69.             <a href=""><img src="./images/adv3-click.jpg" alt="" /></a>
  70.           </li>
  71.           <li>
  72.             <a href=""><img src="./images/adv4-click.jpg" alt="" /></a>
  73.           </li>
  74.         </ul>
  75.       </div>
  76.       <div class="flexFlowRowWrap">
  77.         <a href=""><img src="./images/right1.jpg" alt="" /></a>
  78.         <a href=""><img src="./images/right2.jpg" alt="" /></a>
  79.         <a href=""><img src="./images/right3.jpg" alt="" /></a>
  80.         <a href=""><img src="./images/right4.jpg" alt="" /></a>
  81.         <a href=""><img src="./images/right5.jpg" alt="" /></a>
  82.         <a href=""><img src="./images/right6.jpg" alt="" /></a>
  83.         <a href=""><img src="./images/right7.jpg" alt="" /></a>
  84.         <a href=""><img src="./images/right8.jpg" alt="" /></a>
  85.       </div>
  86.     </div>
  87.     <!-- 信息播报区 -->
  88.     <div class="info same flexFlowR">
  89.       <div class="flexFlowR">
  90.         <span class="iconfont" style="color: rgb(146, 7, 7);">&#xe62d; </span>
  91.       </div>
  92.       <div class="flexFlowR info-scroll">
  93.         <div class="flexFlowR">
  94.           <span class="iconfont">&#xe68c;</span>
  95.           <a href="">认准官方渠道下单提醒通知</a>
  96.         </div>
  97.         <div class="flexFlowR">
  98.           <span class="iconfont">&#xe68c;</span>
  99.           <a href="">开通超级app，更多惊喜，等你发现</a>
  100.         </div>
  101.         <div class="flexFlowR">
  102.           <span class="iconfont">&#xe68c;</span>
  103.           <a href="">防控疫情，肯德基和你一起</a>
  104.         </div>
  105.         <div class="flexFlowR">
  106.           <span class="iconfont">&#xe68c;</span>
  107.           <a href="">肯德基诚意推荐兄弟品牌-东方既白</a>
  108.         </div>
  109.       </div>
  110.     </div>
  111.     <!-- 主体菜单区 -->
  112.     <section class="main flexFlowRowWrap">
  113.       <!-- 每一个图片菜单区 ，第一个-->
  114.       <div class="flexFlowC">
  115.         <div class="flexFlowR">
  116.           <h4>KFC宅急送&nbsp;&nbsp;官网订餐</h4>
  117.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  118.         </div>
  119.         <a href=""><img src="./images/main1.jpg" alt="" /></a>
  120.         <div>
  121.           <div>
  122.             <span class="iconfont">&#xe68c; </span>
  123.             <a href="">宅急送外卖订餐，美味准时送上门</a>
  124.           </div>
  125.           <div>
  126.             <span class="iconfont">&#xe68c; </span>
  127.             <a href="">宅急送外卖订餐，美味准时送上门</a>
  128.           </div>
  129.         </div>
  130.       </div>
  131.       <!-- 第二个 -->
  132.       <div class="flexFlowC">
  133.         <div class="flexFlowR">
  134.           <h4>新闻中心</h4>
  135.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  136.         </div>
  137.         <a href=""><img src="./images/main2.jpg" alt="" /></a>
  138.         <div>
  139.           <div>
  140.             <span class="iconfont">&#xe68c;</span>
  141.             <a href=""
  142.               >众志成城
  143.               人间有暖百胜中国为武汉部分重点医院医护人员供应爱心餐点</a
  144.             >
  145.           </div>
  146.           <div>
  147.             <span class="iconfont">&#xe68c;</span>
  148.             <a href=""
  149.               >众志成城
  150.               人间有暖百胜中国为武汉部分重点医院医护人员供应爱心餐点</a
  151.             >
  152.           </div>
  153.         </div>
  154.       </div>
  155.       <!-- 第三个 -->
  156.       <div class="flexFlowC">
  157.         <div class="flexFlowR">
  158.           <h4>肯德基超级APP</h4>
  159.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  160.         </div>
  161.         <a href=""><img src="./images/main3.jpg" alt="" /></a>
  162.         <div>
  163.           <div>
  164.             <span class="iconfont">&#xe68c;</span>
  165.             <a href="">肯德基超级APP下载</a>
  166.           </div>
  167.           <div>
  168.             <span class="iconfont">&#xe68c;</span>
  169.             <a href="">肯德基超级APP下载</a>
  170.           </div>
  171.           <div>
  172.             <span class="iconfont">&#xe68c;</span>
  173.             <a href="">肯德基超级APP下载</a>
  174.           </div>
  175.         </div>
  176.       </div>
  177.       <!-- 第四个 -->
  178.       <div class="flexFlowC">
  179.         <div class="flexFlowR">
  180.           <h4>KFC宅急送</h4>
  181.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  182.         </div>
  183.         <a href=""><img src="./images/main4.jpg" alt="" /></a>
  184.         <div>
  185.           <div>
  186.             <span class="iconfont">&#xe68c;</span>
  187.             <a href="">下载肯德基超级APP，订餐省更多！</a>
  188.           </div>
  189.           <div>
  190.             <span class="iconfont">&#xe68c;</span>
  191.             <a href="">下载肯德基超级APP，订餐省更多！</a>
  192.           </div>
  193.         </div>
  194.       </div>
  195.       <!-- 第五个 -->
  196.       <div class="flexFlowC">
  197.         <div class="flexFlowR">
  198.           <h4>儿童乐园</h4>
  199.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  200.         </div>
  201.         <a href=""><img src="./images/main5.jpg" alt="" /></a>
  202.         <div>
  203.           <div>
  204.             <span class="iconfont">&#xe68c;</span>
  205.             <a href="">快来肯德基欢乐庆生！</a>
  206.           </div>
  207.           <div>
  208.             <span class="iconfont">&#xe68c;</span>
  209.             <a href="">快来肯德基欢乐庆生！</a>
  210.           </div>
  211.           <div>
  212.             <span class="iconfont">&#xe68c;</span>
  213.             <a href="">快来肯德基欢乐庆生！</a>
  214.           </div>
  215.         </div>
  216.       </div>
  217.       <!-- 第六个 -->
  218.       <div class="flexFlowC">
  219.         <div class="flexFlowR">
  220.           <h4>天天运动</h4>
  221.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  222.         </div>
  223.         <a href=""><img src="./images/main6.jpg" alt="" /></a>
  224.         <div>
  225.           <div>
  226.             <span class="iconfont">&#xe68c;</span>
  227.             <a href=""
  228.               >热爱不熄，篮球到底！2019肯德基三人篮球全国总决赛盛典！</a
  229.             >
  230.           </div>
  231.           <div>
  232.             <span class="iconfont">&#xe68c;</span>
  233.             <a href=""
  234.               >热爱不熄，篮球到底！2019肯德基三人篮球全国总决赛盛典！</a
  235.             >
  236.           </div>
  237.         </div>
  238.       </div>
  239.       <!-- 第七个 -->
  240.       <div class="flexFlowC">
  241.         <div class="flexFlowR">
  242.           <h4>K-MUSIC</h4>
  243.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  244.         </div>
  245.         <a href=""><img src="./images/main7.jpg" alt="" /></a>
  246.         <div>
  247.           <div>
  248.             <span class="iconfont">&#xe68c;</span>
  249.             <a href="">K-MUSIC点唱机全新上线，餐厅音乐任你点！</a>
  250.           </div>
  251.           <div>
  252.             <span class="iconfont">&#xe68c;</span>
  253.             <a href="">K-MUSIC点唱机全新上线，餐厅音乐任你点！</a>
  254.           </div>
  255.         </div>
  256.       </div>
  257.       <!-- 第八个 -->
  258.       <div class="flexFlowC">
  259.         <div class="flexFlowR">
  260.           <h4>食品安全</h4>
  261.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  262.         </div>
  263.         <a href=""><img src="./images/main8.jpg" alt="" /></a>
  264.         <div>
  265.           <div>
  266.             <span class="iconfont">&#xe68c;</span>
  267.             <a href="">食品安全揭秘</a>
  268.           </div>
  269.           <div>
  270.             <span class="iconfont">&#xe68c;</span>
  271.             <a href="">食品安全揭秘</a>
  272.           </div>
  273.           <div>
  274.             <span class="iconfont">&#xe68c;</span>
  275.             <a href="">食品安全揭秘</a>
  276.           </div>
  277.         </div>
  278.       </div>
  279.       <!-- 第九个 -->
  280.       <div class="flexFlowC">
  281.         <div class="flexFlowR">
  282.           <h4>关注我们</h4>
  283.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  284.         </div>
  285.         <a href=""><img src="./images/main9.jpg" alt="" /></a>
  286.         <div>
  287.           <div>
  288.             <span class="iconfont">&#xe68c;</span>
  289.             <a href="">肯德基QQ公众号</a>
  290.           </div>
  291.           <div>
  292.             <span class="iconfont">&#xe68c;</span>
  293.             <a href="">肯德基QQ公众号</a>
  294.           </div>
  295.           <div>
  296.             <span class="iconfont">&#xe68c;</span>
  297.             <a href="">肯德基QQ公众号</a>
  298.           </div>
  299.         </div>
  300.       </div>
  301.       <!-- 第十个 -->
  302.       <div class="flexFlowC">
  303.         <div class="flexFlowR">
  304.           <h4>精彩下载</h4>
  305.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  306.         </div>
  307.         <a href=""><img src="./images/main10.jpg" alt="" /></a>
  308.         <div>
  309.           <div>
  310.             <span class="iconfont">&#xe68c;</span>
  311.             <a href="">电视广告</a>
  312.           </div>
  313.           <div>
  314.             <span class="iconfont">&#xe68c;</span>
  315.             <a href="">电视广告</a>
  316.           </div>
  317.           <div>
  318.             <span class="iconfont">&#xe68c;</span>
  319.             <a href="">电视广告</a>
  320.           </div>
  321.         </div>
  322.       </div>
  323.       <!-- 第十一个 -->
  324.       <div class="flexFlowC">
  325.         <div class="flexFlowR">
  326.           <h4>兄弟品牌</h4>
  327.           <a href=""><span class="iconfont">&#xeaf3;</span></a>
  328.         </div>
  329.         <a href=""><img src="./images/main11.jpg" alt="" /></a>
  330.         <div>
  331.           <div>
  332.             <span class="iconfont">&#xe68c;</span>
  333.             <a href="">东方既白 54层烤肉煎蛋烧饼</a>
  334.           </div>
  335.           <div>
  336.             <span class="iconfont">&#xe68c;</span>
  337.             <a href="">东方既白 54层烤肉煎蛋烧饼</a>
  338.           </div>
  339.         </div>
  340.       </div>
  341.     </section>
  342.     <!-- 页脚 -->
  343.     <footer>
  344.       <div class="same flexFlowR">
  345.         <div class="footLeft">
  346.           <ul class="flexFlowR">
  347.             <li><a href="">关于肯德基</a></li>
  348.             <li><a href="">新闻中心</a></li>
  349.             <li><a href="">精彩下载</a></li>
  350.             <li><a href="">法律条款</a></li>
  351.             <li><a href="">隐私权声明</a></li>
  352.             <li><a href="">经营公示</a></li>
  353.           </ul>
  354.           <div class="flexFlowR">
  355.             <p>沪ICP备17028264号-2</p>
  356.             <p>沪公网安备 31010402003279号</p>
  357.           </div>
  358.         </div>
  359.         <div class="footRight flexFlowR">
  360.           <p>其他品牌网站</p>
  361.           <span class="iconfont">&#xe6b7;</span>
  362.           <input type="text" name="brand" placeholder="百胜中国" list="brand" />
  363.           <datalist id="brand">
  364.             <option value="百胜中国"></option>
  365.             <option value="必胜客"></option>
  366.             <option value="肯德基宅急送"></option>
  367.             <option value="小肥羊"></option>
  368.           </datalist>
  369.           <span class="iconfont">&#xe649; </span>
  370.         </div>
  371.       </div>
  372.     </footer>
  373.     <!-- 底部固定栏 -->
  374.     <section class="fixed">
  375.       <div class="flexFlowR same">
  376.         <ul class="flexFlowR">
  377.           <li><a href="">App下载</a></li>
  378.           <li><a href="">网上订餐</a></li>
  379.           <li><a href="">手机自助点餐</a></li>
  380.           <li><a href="">新闻中心</a></li>
  381.           <li><a href="">餐厅查询</a></li>
  382.           <li><a href="">关注我们</a></li>
  383.         </ul>
  384.         <span class="iconfont">&#xe625;</span>
  385.         <a href="">分享</a>
  386.         <span>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  387.         <span class="iconfont">&#xe73a;</span>
  388.         <a href="">收藏</a>
  389.       </div>
  390.     </section>
  391.   </body>
  392. </html>
  • index.css:
  1. /* 头部区域 */
  2. .head {
  3.   margin: auto;
  4. }
  5. /* 左边LOGO图像 */
  6. .head > a:first-of-type {
  7.   width: 104px;
  8.   height: 108px;
  9.   background: url("../images/logo-left.jpg");
  10.   background-size: cover;
  11. }
  12. /* 头部中的导航栏 */
  13. .head > nav {
  14.   height: 80px;
  15.   width: 620px;
  16.   background: rgb(184, 13, 13);
  17.   padding: 0 30px;
  18. }
  19. .head > a:last-of-type {
  20.   width: 235px;
  21.   height: 80px;
  22.   background-color: rgb(184, 13, 13);
  23. }
  24. .head > nav > li {
  25.   width: 100px;
  26.   flex: 1 0 auto;
  27.   text-align: center;
  28. }
  29. .head > nav > li a {
  30.   color: rgb(245, 213, 165);
  31.   padding: 5px 10px;
  32.   border-radius: 8px;
  33. }
  34. .head > nav > li a:hover {
  35.   background: rgb(236, 166, 36);
  36.   color: rgb(146, 7, 7);
  37. }
  38. /* 轮播图区域 */
  39. .container {
  40.   position: relative;
  41.   height: 330px;
  42.   margin: 10px auto;
  43. }
  44. /* 轮播图的每张图片设置绝对定位 */
  45. .container > div:first-of-type > a {
  46.   position: absolute;
  47.   top: 0;
  48.   left: 0;
  49.   height: 335px;
  50.   padding: 3px;
  51.   border: 1px solid rgb(247, 188, 62);
  52.   border-radius: 5px;
  53. }
  54. /* 每张图片的索引小图片 */
  55. .container > div:first-of-type > ul {
  56.   top: 280px;
  57.   left: 320px;
  58.   position: absolute;
  59. }
  60. .container > div:first-of-type > ul > li {
  61.   padding: 0 3px;
  62. }
  63. .container > div:last-of-type {
  64.   margin-left: auto;
  65.   width: 235px;
  66.   height: 330px;
  67. }
  68. /* 轮播图右边的导航 */
  69. .container > div:last-of-type > a {
  70.   flex: 1 0 auto;
  71.   text-align: center;
  72. }
  73. /* 轮播图中只显示一张图片 */
  74. .container > div:first-of-type > a:not(:first-of-type) {
  75.   display: none;
  76. }
  77. /* 信息播报区 */
  78. .info {
  79.   height: 45px;
  80.   margin: 20px auto 0 auto;
  81. }
  82. /* 喇叭图标 */
  83. .info > div:first-of-type {
  84.   width: 35px;
  85.   height: 45px;
  86.   border: 1px solid rgb(221, 160, 29);
  87.   border-radius: 5px 0 0 5px;
  88.   background-color: rgb(248, 212, 94);
  89. }
  90. /* 喇叭图标右边的文字样式 */
  91. .info .info-scroll {
  92.   width: 925px;
  93.   height: 45px;
  94.   border: 1px solid rgb(247, 188, 62);
  95.   border-radius: 0 5px 5px 0;
  96.   background-color: rgb(247, 236, 221);
  97. }
  98. .info .info-scroll > div {
  99.   height: 45px;
  100.   flex: 1 0 auto;
  101.   border-right: 1px dashed rgba(128, 128, 128, 0.4);
  102. }
  103. .info .info-scroll > div:last-of-type {
  104.   border: none;
  105. }
  106. .info .info-scroll > div > a {
  107.   font-size: 13px;
  108.   color: gray;
  109. }
  110. .info .info-scroll > div > a:hover {
  111.   color: black;
  112.   text-decoration: underline black;
  113. }
  114. /* 主体菜单区 */
  115. .main {
  116.   margin: 20px auto 0 auto;
  117.   width: 980px;
  118.   min-width: 900px;
  119. }
  120. /* 第一张图片的宽度不一样，所以先设置其他图片的宽度是一样的 */
  121. .main > div:not(:first-of-type) {
  122.   width: 225px;
  123. }
  124. /* 第一张图片宽度单独设置 */
  125. .main > div:first-of-type {
  126.   width: 470px;
  127. }
  128. /* 对所有十一张图片设置，用好flex属性 */
  129. .main > div {
  130.   flex: 1 0 auto;
  131.   background-color: rgb(247, 236, 221);
  132.   height: 320px;
  133.   margin: 5px 8px;
  134.   border: 1px solid rgb(247, 188, 62);
  135.   border-radius: 8px;
  136.   justify-content: center;
  137.   align-items: center;
  138. }
  139. /* 设置每个菜单区的标题栏一致 */
  140. .main > div > div:first-of-type {
  141.   width: 100%;
  142.   height: 50px;
  143.   flex: 1 0 auto;
  144.   justify-content: space-between;
  145.   padding: 0 30px;
  146. }
  147. /* 每个菜单区的标题文字 */
  148. .main > div > div:first-of-type h4 {
  149.   color: rgb(199, 56, 56);
  150. }
  151. /* 标题文字右边的“+”号 */
  152. .main > div > div:first-of-type span {
  153.   color: rgb(248, 165, 10);
  154.   font-size: 25px;
  155.   font-weight: bolder;
  156. }
  157. /* 设置每个菜单区的底部信息区一致 */
  158. .main > div > div:last-of-type {
  159.   width: 100%;
  160.   height: 90px;
  161.   flex: 1 0 auto;
  162.   margin-top: 5px;
  163.   display: flex;
  164.   flex-flow: column nowrap;
  165.   justify-content: center;
  166. }
  167. /* 每个菜单区最下面的文字 */
  168. .main > div > div:last-of-type div {
  169.   padding: 4px;
  170. }
  171. .main > div > div:last-of-type a {
  172.   font-size: 13px;
  173.   color: rgb(133, 86, 86);
  174. }
  175. .main > div > div:last-of-type a:hover {
  176.   text-decoration: underline black;
  177. }
  178. .main > div > div:last-of-type span {
  179.   color: rgb(184, 13, 13);
  180. }
  181. /* 页脚 */
  182. footer {
  183.   height: 150px;
  184.   border-top: 1px solid rgb(241, 219, 219);
  185.   margin-top: 20px;
  186.   padding-top: 20px;
  187. }
  188. footer > div {
  189.   margin: auto;
  190. }
  191. .footLeft {
  192.   margin-right: auto;
  193. }
  194. /* 页脚中右边部分作为定位父容器 */
  195. .footRight {
  196.   margin-left: auto;
  197.   position: relative;
  198. }
  199. .footLeft li {
  200.   width: 80px;
  201.   text-align: center;
  202.   border-right: 1px solid rgb(133, 86, 86);
  203. }
  204. .footLeft li a {
  205.   font-size: 12px;
  206.   color: rgb(133, 86, 86);
  207. }
  208. .footLeft li a:hover {
  209.   text-decoration: underline rgb(133, 86, 86);
  210. }
  211. .footLeft div {
  212.   justify-content: flex-start;
  213. }
  214. .footLeft div p:first-of-type {
  215.   font-size: 11px;
  216.   color: rgba(133, 86, 86, 0.6);
  217.   padding: 10px 150px 0 15px;
  218. }
  219. .footLeft div p:last-of-type {
  220.   font-size: 11px;
  221.   color: rgba(133, 86, 86, 0.6);
  222.   padding-top: 10px;
  223. }
  224. .footRight p,
  225. span {
  226.   font-size: 12px;
  227.   color: rgb(133, 86, 86);
  228. }
  229. /* 页脚中的输入框 */
  230. .footRight input {
  231.   border-radius: 5px;
  232.   border: 1px solid rgb(133, 86, 86);
  233.   outline: none;
  234.   padding: 8px 18px;
  235. }
  236. /* 绝对定位右边的小图标 */
  237. .footRight span:first-of-type {
  238.   font-size: 0.7em;
  239.   position: absolute;
  240.   left: 80px;
  241. }
  242. .footRight span:last-of-type {
  243.   width: 20px;
  244.   text-align: center;
  245.   background-color: brown;
  246.   color: white;
  247.   border-radius: 5px;
  248.   position: absolute;
  249.   left: 225px;
  250. }
  251. .footRight p {
  252.   padding-right: 5px;
  253. }
  254. /* 底部固定栏 */
  255. .fixed {
  256.   background-color: rgb(184, 13, 13);
  257.   height: 40px;
  258.   width: 100%;
  259.   position: fixed;
  260.   bottom: 0;
  261. }
  262. .fixed div {
  263.   margin: auto;
  264.   height: 40px;
  265.   justify-content: start;
  266. }
  267. .fixed div ul {
  268.   background-color: rgb(234, 250, 7);
  269.   border-radius: 10px;
  270.   padding: 5px 10px;
  271.   margin-right: 40px;
  272. }
  273. .fixed div li {
  274.   width: 100px;
  275.   text-align: center;
  276.   border-right: 1px solid rgb(209, 6, 6);
  277. }
  278. .fixed div li:last-of-type {
  279.   border: none;
  280. }
  281. .fixed div li a {
  282.   font-size: 14px;
  283.   font-weight: bold;
  284.   color: rgb(209, 6, 6);
  285. }
  286. .fixed div li a:hover {
  287.   text-decoration: underline rgb(209, 6, 6);
  288. }
  289. .fixed div span {
  290.   color: rgb(234, 250, 7);
  291. }
  292. .fixed div > a {
  293.   color: whitesmoke;
  294.   font-size: 14px;
  295.   padding: 0 20px 0 5px;
  296. }
  • common.css:
  1. .iconfont {
  2.   font-family: "iconfont" !important;
  3.   font-size: 16px;
  4.   font-style: normal;
  5.   -webkit-font-smoothing: antialiased;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }
  9. /* 初始化 */
  10. * {
  11.   margin: 0;
  12.   padding: 0;
  13.   box-sizing: border-box;
  14. }
  16. a {
  17.   text-decoration: none;
  18.   color: black;
  19. }
  21. li {
  22.   list-style: none;
  23. }
  25. /* 垂直排列 ,不换行*/
  26. .flexFlowC {
  27.   display: flex;
  28.   flex-flow: column nowrap;
  29. }
  30. /* 垂直排列，可换行 */
  31. .flexFlowColWrap {
  32.   display: flex;
  33.   flex-flow: column wrap;
  34. }
  35. /* 水平排列,不换行 */
  36. .flexFlowR {
  37.   display: flex;
  38.   flex-flow: row nowrap;
  39.   align-items: center;
  40.   justify-content: center;
  41. }
  42. /* 水平排列，可换行 */
  43. .flexFlowRowWrap {
  44.   display: flex;
  45.   flex-flow: row wrap;
  46.   align-items: center;
  47.   align-content: space-around;
  48. }
  50. /* 使内容具有相同的宽度 */
  51. .same {
  52.   width: 960px;
  53.   min-width: 900px;
  54. }

展示效果如下：

  • 动态图：

  • 静态图：

2.1 小总结：

此次布局，整理思路比上次要清晰很多，多分析了下DOM结构，然后flex属性的运用使效率提高不少，但是这次的公共样式表里面的一些属性没有写好，导致index.css里面一些代码重复设置了，这里还需要优化，可能太急，没有回放之前老师的视频，主要就是想看看自己看能写出来不，结果还是有点难，还是要拿出时间看看，掌握好布局重点，DOM结构分析，属性要运用到恰到好处！

上一条：FlexBox弹性盒多行容器下一条：内容的多栏/列显示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多