search

博客列表 >天勒！这个装修网站pc端的首页布局原形，太有创意了！

天勒！这个装修网站pc端的首页布局原形，太有创意了！

张福根一修品牌运营
张福根一修品牌运营原创
2020年10月29日 14:10:37661浏览

按自己想法完善pc端的布局页面

效果展示：

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>按自己想法完善pc端的布局页面</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: black;
  17.       }
  18.       body {
  19.         display: flex;
  20.         min-width: 40em;
  21.         flex-flow: column nowrap;
  22.         background-color: white;
  23.       }
  24.       header,
  25.       footer {
  26.         height: 45px;
  27.         /* border: 1px solid coral; */
  28.       }
  30.       header {
  31.         display: flex;
  32.         align-items: center;
  33.         background-color: green;
  34.         font-size: 1.1rem;
  35.         margin-bottom: 0.5em;
  36.         margin-top: 6em;
  37.       }
  39.       header > a {
  40.         flex: 0 1 8em;
  41.         text-align: center;
  42.         color: white;
  43.       }
  45.       /* LOGO */
  46.       header > a:first-of-type {
  47.         margin-right: 4em;
  48.       }
  50.       /* Login button 应该是在哪右边 */
  51.       header > a:last-of-type {
  52.         margin-left: auto;
  53.       }
  55.       header > a:hover:not(:first-of-type) {
  56.         color: coral;
  57.       }
  59.       /* 主体样式 */
  60.       .container {
  61.         min-height: 40em;
  62.         display: flex;
  63.         justify-content: center;
  64.       }
  66.       .container > aside,
  67.       .container > main {
  68.         /* border: 1px solid coral; */
  69.         background-color: #dadada;
  70.       }
  72.       .container > aside {
  73.         flex: 0 0 200px;
  74.       }
  76.       .container > main {
  77.         flex: 0 0 60em;
  78.         margin: 0 0.5em;
  79.       }
  81.       /* 页脚 */
  83.       footer {
  84.         display: flex;
  85.         flex-flow: column nowrap;
  86.         background-color: #c5c3c3a6;
  87.         text-align: center;
  88.         margin-top: 0.5em;
  89.         height: 8em;
  90.         /* 垂直居中 */
  91.         justify-content: center;
  92.       }
  93.       /* 媒体查询 */
  94.       @media screen and (max-width: 1000px) {
  95.         aside:last-of-type {
  96.           display: none;
  97.         }
  98.       }
  99.       @media screen and (max-width: 700px) {
  100.         aside,
  101.         footer,
  102.         header > a:not(:first-of-type):not(:last-of-type) {
  103.           display: none;
  104.         }
  105.       }
  106.     </style>
  107.   </head>
  108.   <body>
  109.     <!-- 页眉 -->
  110.     <header>
  111.       <a href="">LOGO</a>
  112.       <a href="">首页</a>
  113.       <a href="">服务项目</a>
  114.       <a href="">线下门店</a>
  115.       <a href="">装修设计</a>
  116.       <a href="">旧房翻新</a>
  117.       <a href="">局部装修</a>
  118.       <a href="">维修安装</a>
  119.       <a href="">预约记录</a>
  120.       <a href="">客户评价</a>
  121.       <a href="">登录</a>
  122.     </header>
  123.     <!-- 主体三列 -->
  124.     <div class="container">
  125.       <aside>左边</aside>
  126.       <main>主体</main>
  127.       <aside>右边</aside>
  128.     </div>
  129.     <!-- 页脚 -->
  130.     <footer>
  131.       <p>
  132.         php中文网&copy;版权所有(2015-2022) | 备案号:
  133.         <a href="">皖ICP-150********</a>
  134.       </p>
  135.       <p>中国.合肥政务新区置地广场 | 电话: 0551-888999**</p>
  136.     </footer>
  137.   </body>
  138. </html>

效果总结：

  • web前端开发技巧：多学习、多练习、多总结
上一条：pc端页面布局 自己添加内容下一条：BFC块和flex基础属性细说
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多