简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex布局实战-仿PHP中文网手机端首页
Blogger Information
Blog 32
fans 0
comment 0
visits 27686
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局实战-仿PHP中文网手机端首页
Yang_Sir
Original
431 people have browsed it

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）
  • 页面配色也是需要学习的方面//尴尬
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：现在刚学, 先求对, 再求优吧
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！