Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局实现仿PHP中文网布局
Blogger Information
Blog 28
fans 0
comment 0
visits 30072
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中文网布局
G
Original
509 people have browsed it

利用flex实现网站PC端布局实战：

  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>仿凡科网首页</title>
  7.     <style>
  8.       /* 初始化样式 */
  9.       * {
  10.         box-sizing: border-box;
  11.         margin: 0;
  12.         padding: 0;
  13.       }
  14.       a,
  15.       p {
  16.         text-decoration: none;
  17.         color: rgba(255, 255, 255, 0.7);
  18.         font-size: 1.2em;
  19.         margin: 0 1em;
  20.       }
  21.       body {
  22.         display: flex;
  23.         flex-flow: column nowrap;
  24.         background-color: #f3f5f7;
  25.       }
  26.       /* 页眉 */
  27.       header {
  28.         background-color: rgb(0, 0, 0);
  29.         padding: 1.5em;
  30.         justify-content: center;
  31.         align-items: center;
  32.       }
  33.       header {
  34.         height: 2em;
  35.         /* 将header转为flex弹性盒子后，后续的弹性项目才可以操作 */
  36.         display: flex;
  37.         text-align: center;
  38.       }
  39.       /* 设置logo距离顶部菜单栏右侧一定距离 */
  40.       header > a:first-of-type {
  41.         background: url(https://www.php.cn/static/images/logo.png) no-repeat;
  42.         width: 9em;
  43.         height: 4em;
  44.       }
  45.       /* 设置登录和注册在最右侧 */
  46.       header > a:nth-of-type(7) {
  47.         margin-left: auto;
  48.       }
  49.       /* 设置鼠标放置在a标签上的样式，并排除logo变色 */
  50.       header > a:hover:not(:first-of-type) {
  51.         color: red;
  52.       }
  53.       /* 主体区 */
  54.       .container {
  55.         display: flex;
  56.         justify-content: center;
  57.         width: 100vw;
  58.         height: 83.7vh;
  59.         margin-top: 2em;
  60.       }
  61.       .container > aside,
  62.       .container > main {
  63.         border: 1px solid #000;
  64.       }
  65.       .container > aside {
  66.         flex: 0 0 15vw;
  67.       }
  68.       .container > main {
  69.         flex: 0 0 70vw;
  70.       }
  71.       .container main a {
  72.         color: rgb(51, 51, 51);
  73.       }
  74.       .header-a {
  75.         background-color: #ffffff;
  76.         padding: 0.5em 0;
  77.       }
  78.       .header-a {
  79.         display: flex;
  80.         align-items: center;
  81.         justify-content: center;
  82.         margin-bottom: -1em;
  83.       }
  84.       .search {
  85.         margin-left: auto;
  86.         margin-right: 3em;
  87.       }
  88.       .container main img:first-of-type {
  89.         width: 100%;
  90.         display: flex;
  91.       }
  92.       .container > .search {
  93.         display: flex;
  94.       }
  95.       .container .search input {
  96.         outline: none;
  97.         border-radius: 0.5em;
  98.         width: 13em;
  99.         height: 2em;
  100.       }
  101.       .container main div:last-of-type {
  102.         display: flex;
  103.         flex-flow: row nowrap;
  104.         justify-content: center;
  105.         align-items: center;
  106.         margin-top: 1.8em;
  107.       }
  108.       .container main div:last-of-type img {
  109.         border-radius: 0.5em;
  110.         width: 100%;
  111.       }
  112.       /* 页脚 */
  113.       footer {
  114.         background-color: rgb(0, 0, 0);
  115.         display: flex;
  116.         flex-flow: column;
  117.         justify-content: center;
  118.         align-items: center;
  119.       }
  120.     </style>
  121.   </head>
  122.   <body>
  123.     <header>
  124.       <a href=""></a>
  125.       <a href="">首页</a>
  126.       <a href="">视频教程</a>
  127.       <a href="">入门教程</a>
  128.       <a href="">社区问答</a>
  129.       <a href="">技术文章</a>
  130.       <a href="">登录</a>
  131.       <a href="">注册</a>
  132.     </header>
  133.     <div class="container">
  134.       <aside></aside>
  135.       <main>
  136.         <div class="header-a">
  137.           <a href="">PHP头条</a>
  138.           <a href="">独孤九剑</a>
  139.           <a href="">学习路线</a>
  140.           <a href="">在线工具</a>
  141.           <a href="">趣味课堂</a>
  142.           <div class="search">
  143.             <input type="text" placeholder="想查找什么？" id="search" />
  144.             <button>搜索</button>
  145.           </div>
  146.         </div>
  147.         <div>
  148.           <a href=""
  149.             ><img
  150.               src="https://www.php.cn/static/images/index_banner1.png"
  151.               alt=""
  152.           /></a>
  153.         </div>
  154.         <div>
  155.           <a href=""
  156.             ><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""
  157.           /></a>
  158.           <a href=""
  159.             ><img
  160.               src="https://www.php.cn/static/images/index_php_item2_.png?1"
  161.               alt=""
  162.           /></a>
  163.           <a href=""
  164.             ><img
  165.               src="https://www.php.cn/static/images/index_php_item3.jpg?1"
  166.               alt=""
  167.           /></a>
  168.           <a href=""
  169.             ><img
  170.               src="https://www.php.cn/static/images/index_php_new4.jpg?1"
  171.               alt=""
  172.           /></a>
  173.         </div>
  174.       </main>
  175.       <aside>侧边栏2</aside>
  176.     </div>
  177.     <footer>
  178.       <p>
  179.         php中文网&copy;版权所有(2015-2022) | 备案号:
  180.         <a href="">皖ICP-150********</a>
  181.       </p>
  182.       <p>中国.合肥政务新区置地广场 | 电话: 0551-888999**</p>
  183.     </footer>
  184.   </body>
  185. </html>

效果：

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