search

博客列表 >flex布局实战-仿PHP中文网手机端首页

flex布局实战-仿PHP中文网手机端首页

Yang_Sir
Yang_Sir原创
2020年04月13日 13:18:36435浏览

flex布局实战-仿PHP中文网手机端首页

1.代码说明

  • 只做了首页，没有做其它页面
  • 无js
  • 本页面全部使用flex布局

2.源代码

  • 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/base.css" />
    8.  <link rel="stylesheet" href="css/font.css" />
    9. </head>
    10. <body>
    11.  <!-- 页眉 -->
    12.  <header>
    13.    <a href=""> <span class="iconfont">&#xe67c;</span> </a>
    14.    <a href=""><img src="images/logo.png" alt="LOGO" /></a>
    15.    <a href=""> <span class="iconfont">&#xe65d;</span></a>
    16.  </header>
    17.  <main>
    18.    <!-- 轮播图 -->
    19.    <div class="slider">
    20.      <a href=""><img src="images/banner2.jpg" alt="banner" /></a>
    21.    </div>
    22.    <!-- 导航 -->
    23.    <nav>
    24.      <div>
    25.        <a href=""> <span class="iconfont">&#xe632;</span> </a
    26.        ><a href="">HTML5</a>
    27.      </div>
    28.      <div>
    29.        <a href=""> <span class="iconfont">&#xe612;</span> </a
    30.        ><a href="">CSS</a>
    31.      </div>
    32.      <div>
    33.        <a href=""> <span class="iconfont">&#xe67e;</span> </a
    34.        ><a href="">PHP</a>
    35.      </div>
    36.      <div>
    37.        <a href=""> <span class="iconfont">&#xe670;</span> </a
    38.        ><a href="">直播</a>
    39.      </div>
    40.      <div>
    41.        <a href=""> <span class="iconfont">&#xe810;</span> </a
    42.        ><a href="">JAVASCRIP</a>
    43.      </div>
    44.      <div>
    45.        <a href=""> <span class="iconfont">&#xe609;</span> </a
    46.        ><a href="">移动端</a>
    47.      </div>
    48.      <div>
    49.        <a href=""> <span class="iconfont">&#xe898;</span> </a
    50.        ><a href="">手册</a>
    51.      </div>
    52.      <div>
    53.        <a href=""> <span class="iconfont">&#xe625;</span> </a
    54.        ><a href="">数据库</a>
    55.      </div>
    56.    </nav>
    57.    <!-- 推荐 -->
    58.    <section class="recommend">
    59.      <h3 class="title">推荐课程</h3>
    60.      <div>
    61.        <a href=""><img src="images/recommend1.jpg" alt="推荐课程" /></a>
    62.        <a href=""><img src="images/recommend2.jpg" alt="推荐课程" /></a>
    63.      </div>
    64.      <div>
    65.        <a href=""><img src="images/recommend3.jpg" alt="推荐课程" /></a>
    66.        <a href="">
    67.          <h4><p>每日编程小知识，值得拥有</p></h4>
    68.          <p><bb class="icon">中级</bb><small>36438次播放</small></p>
    69.        </a>
    70.      </div>
    71.      <div>
    72.        <a href=""><img src="images/recommend3.jpg" alt="推荐课程" /></a>
    73.        <a href="">
    74.          <h4><p>每日编程小知识，值得拥有</p></h4>
    75.          <p><bb class="icon">中级</bb><small>36438次播放</small></p>
    76.        </a>
    77.      </div>
    78.    </section>
    79.    <!-- 最新更新 -->
    80.    <section class="latest-update">
    81.      <h3 class="title">最新更新</h3>
    82.      <div>
    83.        <a href=""><img src="images/recommend3.jpg" alt="最新更新" /></a>
    84.        <div>
    85.          <h4>
    86.            <a
    87.              >每日编程小知识，值得拥有;每日编程小知识，值得拥有每日编程小知识，值得拥有</a
    88.            >
    89.          </h4>
    90.          <p>
    91.            <small class="desc"
    92.              >这是详细介绍，真的是编的。这是详细介绍，真的是编的。</small
    93.            >
    94.          </p>
    95.          <div><bb class="icon">中级</bb><small>36438次播放</small></div>
    96.        </div>
    97.      </div>
    98.      <div>
    99.        <a href=""><img src="images/recommend3.jpg" alt="最新更新" /></a>
    100.        <div>
    101.          <h4><a>每日编程小知识，值得拥有</a></h4>
    102.          <p>
    103.            <small class="desc"
    104.              >这是详细介绍，真的是编的。这是详细介绍，真的是编的。</small
    105.            >
    106.          </p>
    107.          <div><bb class="icon">中级</bb><small>36438次播放</small></div>
    108.        </div>
    109.      </div>
    110.      <div>
    111.        <a href=""><img src="images/recommend3.jpg" alt="最新更新" /></a>
    112.        <div>
    113.          <h4><a>每日编程小知识，值得拥有</a></h4>
    114.          <p>
    115.            <small class="desc"
    116.              >这是详细介绍，真的是编的。这是详细介绍，真的是编的。</small
    117.            >
    118.          </p>
    119.          <div><bb class="icon">中级</bb><small>36438次播放</small></div>
    120.        </div>
    121.      </div>
    122.      <div>
    123.        <a href=""><img src="images/recommend3.jpg" alt="最新更新" /></a>
    124.        <div>
    125.          <h4><a>每日编程小知识，值得拥有</a></h4>
    126.          <p>
    127.            <small class="desc"
    128.              >这是详细介绍，真的是编的。这是详细介绍，真的是编的。这是详细介绍，真的是编的。这是详细介绍，真的是编的。</small
    129.            >
    130.          </p>
    131.          <div><bb class="icon">中级</bb><small>36438次播放</small></div>
    132.        </div>
    133.      </div>
    134.      <div>
    135.        <a href=""><img src="images/recommend3.jpg" alt="最新更新" /></a>
    136.        <div>
    137.          <h4><a>每日编程小知识，值得拥有</a></h4>
    138.          <p>
    139.            <small class="desc"
    140.              >这是详细介绍，真的是编的。这是详细介绍，真的是编的。</small
    141.            >
    142.          </p>
    143.          <div><bb class="icon">中级</bb><small>36438次播放</small></div>
    144.        </div>
    145.      </div>
    146.    </section>
    147.    <!-- 最新文章 -->
    148.    <section class="latest-article">
    149.      <h3 class="title">最新文章</h3>
    150.      <div>
    151.        <a href="">
    152.          <h4><p>文章标题</p></h4>
    153.          <p>发布时间：2020-04-11</p>
    154.        </a>
    155.        <a href=""><img src="images/recommend3.jpg" alt="最新文章" /></a>
    156.      </div>
    157.      <div>
    158.        <a href="">
    159.          <h4><p>文章标题</p></h4>
    160.          <p>发布时间：2020-04-11</p>
    161.        </a>
    162.        <a href=""><img src="images/recommend3.jpg" alt="最新文章" /></a>
    163.      </div>
    164.      <div>
    165.        <a href="">
    166.          <h4><p>文章标题</p></h4>
    167.          <p>发布时间：2020-04-11</p>
    168.        </a>
    169.        <a href=""><img src="images/recommend3.jpg" alt="最新文章" /></a>
    170.      </div>
    171.      <div>
    172.        <a href="">
    173.          <h4><p>文章标题</p></h4>
    174.          <p>发布时间：2020-04-11</p>
    175.        </a>
    176.        <a href=""><img src="images/recommend3.jpg" alt="最新文章" /></a>
    177.      </div>
    178.      <div>
    179.        <a href="">更多内容</a>
    180.      </div>
    181.    </section>
    182.    <!-- 最新博文 -->
    183.    <section class="latest-blog">
    184.      <h3 class="title">最新博文</h3>
    185.      <div>
    186.        <h4>
    187.          <a href=""
    188.            >博文标题博文标题博文标题博文标题题博文标题博文标题博文标博文标题博文标题</a
    189.          >
    190.        </h4>
    191.        <a href="">2020-04-12</a>
    192.      </div>
    193.      <div>
    194.        <h4><a href="">博文标题</a></h4>
    195.        <a href="">2020-04-12</a>
    196.      </div>
    197.      <div>
    198.        <h4><a href="">博文标题</a></h4>
    199.        <a href="">2020-04-12</a>
    200.      </div>
    201.      <div>
    202.        <h4><a href="">博文标题</a></h4>
    203.        <a href="">2020-04-12</a>
    204.      </div>
    205.      <div>
    206.        <h4><a href="">博文标题</a></h4>
    207.        <a href="">2020-04-12</a>
    208.      </div>
    209.      <div>
    210.        <a href="">更多内容</a>
    211.      </div>
    212.    </section>
    213.    <!-- 最新问答 -->
    214.    <section class="latest-answers">
    215.      <h3 class="title">最新问答</h3>
    216.      <div>
    217.        <h4><a href="">最新问题</a></h4>
    218.        <a href="">2020-04-12</a>
    219.      </div>
    220.      <div>
    221.        <h4><a href="">最新问题</a></h4>
    222.        <a href="">2020-04-12</a>
    223.      </div>
    224.      <div>
    225.        <h4><a href="">最新问题</a></h4>
    226.        <a href="">2020-04-12</a>
    227.      </div>
    228.      <div>
    229.        <h4><a href="">最新问题</a></h4>
    230.        <a href="">2020-04-12</a>
    231.      </div>
    232.      <div>
    233.        <h4><a href="">最新问题</a></h4>
    234.        <a href="">2020-04-12</a>
    235.      </div>
    236.      <div>
    237.        <a href="">更多内容</a>
    238.      </div>
    239.    </section>
    240.  </main>
    241.  <footer>
    242.    <a href=""
    243.      ><span class="iconfont">&#xe64e;</span>
    244.      <p>首页</p></a>
    245.    <a href=""
    246.      ><span class="iconfont">&#xe60a;</span>
    247.      <p>视频</p></a>
    248.    <a href=""
    249.      ><span class="iconfont">&#xf02a4;</span>
    250.      <p>社区</p></a>
    251.    <a href=""
    252.      ><span class="iconfont">&#xe654;</span>
    253.      <p>我的</p></a>
    254.  </footer>
    255. </body>
    256. </html>
  • css代码
  1.  * {
  2.   max-width: 800px;
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. html {
  8.   overflow-y: scroll;
  9. }
  11. :root {
  12.   overflow-y: auto;
  13.   overflow-x: hidden;
  14. }
  16. :root body {
  17.   position: absolute;
  18. }
  20. body {
  21.   width: 100vw;
  22.   overflow: hidden;
  23. }
  25. html {
  26.   width: 100vh;
  27.   height: 100vw;
  28.   font-size: 14px;
  29.   margin: auto;
  30. }
  32. body {
  33.   background-color: rgb(246, 248, 248);
  34.   min-width: 320px;
  35.   max-width: 800px;
  36.   display: flex;
  37.   flex-flow: column nowrap;
  38. }
  39. a {
  40.   color: rgb(105, 74, 74);
  41.   text-decoration: none;
  42. }
  43. a:hover {
  44.   color: skyblue;
  45. }
  47. /* 页眉 */
  48. header {
  49.   height: 8vh;
  50.   background-color: rgb(14, 12, 12);
  51.   display: flex;
  52.   align-items: center;
  53.   justify-content: space-around;
  54.   position: fixed;
  55.   width: 100vw;
  56. }
  57. header > a:nth-of-type(2) {
  58.   width: 60%;
  59. }
  60. header > a:last-of-type {
  61.   margin-right: 20px;
  62. }
  63. header > a:nth-of-type(2) > img {
  64.   width: 100%;
  65.   height: 7vh;
  66. }
  67. header > a > span {
  68.   font-size: 1.8rem;
  69. }
  71. /*广告图*/
  72. .slider {
  73.   margin-top: 7vh;
  74.   display: flex;
  75.   justify-content: center;
  76. }
  77. .slider > a > img {
  78.   width: 100vw;
  79.   height: 140px;
  80. }
  82. /* 导航区 */
  83. nav {
  84.   border-top: 1px solid lightgray;
  85.   margin: 5px 0;
  86.   width: 100vw;
  87.   padding: 10px 0px;
  88.   height: 140px;
  89.   display: flex;
  90.   flex-flow: row wrap;
  91.   align-content: space-between;
  92.   background-color: #fff;
  93. }
  94. nav > div {
  95.   width: 25%;
  96.   display: flex;
  97.   flex-flow: column nowrap;
  98.   align-items: center;
  99. }
  100. nav > div .iconfont {
  101.   font-size: 3em;
  102. }
  104. /*内容块标题*/
  105. .title {
  106.   color: rgb(145, 43, 43);
  107.   margin: 10px;
  108.   align-self: flex-start;
  109. }
  111. /*主体内容区通用属性设置*/
  112. .latest-update,
  113. .latest-article,
  114. .latest-blog,
  115. .latest-answers,
  116. .recommend {
  117.   margin: 5px;
  118.   width: 100vw;
  119.   border-top: 1px solid #cfcfcf;
  120.   display: flex;
  121.   flex-flow: column nowrap;
  122. }
  123. .latest-update,
  124. .latest-article,
  125. .latest-blog,
  126. .latest-answers,
  127. .recommend > div {
  128.   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  129. }
  131. /* 推荐区 */
  132. .recommend > div {
  133.   width: 100%;
  134.   display: flex;
  135.   margin: 5px 0;
  136.   justify-content: space-between;
  137. }
  139. .recommend > div > a {
  140.   width: 45vw;
  141.   padding: 10px;
  142. }
  143. .recommend > div img {
  144.   width: 100%;
  145.   height: 80px;
  146. }
  147. .recommend > div:first-of-type > a {
  148.   padding: 5px;
  149. }
  151. .recommend > div:not(:first-of-type) > a:last-of-type {
  152.   display: flex;
  153.   flex-flow: column nowrap;
  154.   justify-content: space-around;
  155.   padding: 10px;
  156. }
  158. /*等级图标*/
  159. .icon {
  160.   background-color: #800040;
  161.   color: wheat;
  162.   border-radius: 30%;
  163.   padding: 1px;
  164.   font-size: 0.8em;
  165. }
  166. /* 最新更新*/
  167. .latest-update > div {
  168.   display: flex;
  169.   background-color: #fff;
  170.   margin: 5px 0;
  171. }
  173. .latest-update > div > a {
  174.   width: 45%;
  175.   padding: 10px;
  176. }
  178. .latest-update > div img {
  179.   width: 90%;
  180.   height: 60px;
  181. }
  183. .latest-update > div > div {
  184.   width: 50%;
  185.   display: flex;
  186.   flex-flow: column nowrap;
  187.   justify-content: space-around;
  188.   padding: 10px;
  189.   padding-right: 30px;
  190. }
  192. .latest-update > div > div > div {
  193.   display: flex;
  194.   justify-content: space-between;
  195. }
  197. /*最新文章*/
  198. .latest-article > div {
  199.   display: flex;
  200.   height: 70px;
  201.   justify-content: space-between;
  202.   background-color: #fff;
  203.   margin: 5px 0;
  204. }
  206. .latest-article > div:last-of-type {
  207.   height: 25px;
  208.   display: flex;
  209.   justify-content: center;
  210.   align-items: center;
  211. }
  213. .latest-article > div > a:first-of-type {
  214.   display: flex;
  216.   flex-flow: column nowrap;
  217.   justify-content: space-around;
  218.   align-items: flex-start;
  219.   margin-left: 10px;
  220. }
  221. .latest-article > div > a:last-of-type {
  222.   display: flex;
  223.   align-items: center;
  224.   width: 48vw;
  225. }
  226. .latest-article > div > a:last-of-type > img {
  227.   width: 80%;
  228.   height: 50px;
  229.   margin-right: 30px;
  230. }
  232. /*最新博文*/
  233. .latest-blog > div {
  234.   display: flex;
  235.   height: 32px;
  236.   justify-content: space-between;
  237.   background-color: #fff;
  238.   margin: 5px 0;
  239.   padding: 10px;
  240.   padding-right: 30px;
  241.   align-items: center;
  242. }
  244. .latest-blog > div:last-of-type {
  245.   height: 20px;
  246.   padding: 0;
  247.   display: flex;
  248.   justify-content: center;
  249.   align-items: center;
  250. }
  252. /*最新问答*/
  253. .latest-answers > div {
  254.   display: flex;
  255.   height: 32px;
  256.   justify-content: space-between;
  257.   background-color: #fff;
  258.   margin: 5px 0;
  259.   padding: 10px;
  260.   padding-right: 30px;
  261.   align-items: center;
  262. }
  264. .latest-answers > div:last-of-type {
  265.   height: 20px;
  266.   padding: 0;
  267.   display: flex;
  268.   justify-content: center;
  269.   align-items: center;
  270. }
  272. /*页脚*/
  273. footer {
  274.   height: 8vh;
  275.   width: 100vw;
  276.   background-color: rgba(143, 130, 120, 0.8);
  277.   position: fixed;
  278.   bottom: 0;
  279.   /* padding: 0 10px; */
  280.   display: flex;
  281.   justify-content: space-around;
  282.   align-items: center;
  283. }
  285. /**/
  286. main {
  287.   margin-bottom: 8vh;
  288. }
  290. h4 {
  291.   white-space: nowrap;
  292.   text-overflow: ellipsis;
  293.   overflow: hidden;
  294. }
  295. .desc {
  296.   display: block;
  297.   font-size: 0.7rem;
  298.   white-space: nowrap;
  299.   text-overflow: ellipsis;
  300.   overflow: hidden;
  301. }

3.页面效果展示

  • 顶部

效果图

4.课程总结

  • flex布局规则简单，适应性强
  • 提前做好设计，通用样式用组合选择器能省很多代码
  • 敲代码要细心，如果发现页面效果和设置的不一样，优先检查自己是不是写错了字。（血的教训：width:vh/heigh:vw）
  • 页面配色也是需要学习的方面//尴尬
上一条：CSS - 利用flex布局仿PHP中文网移动站下一条：为php编译swoole扩展
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多