Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 完善pc端的布局页面，仿写相册案例。
Blogger Information
Blog 11
fans 0
comment 0
visits 8301
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
完善pc端的布局页面，仿写相册案例。
YwQ
Original
750 people have browsed it
1027作业
1. 按自己想法完善pc端的布局页面(不要求细节)
  1. <!DOCTYPE html>
  2. <html lang="">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿写京东页面布局</title>
  8.     <style>
  9.         /* 公共样式 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             /* 转为ie盒子 */
  15.         }
  17.         a {
  18.             text-decoration: none;
  19.             /* 去掉下划线 */
  20.             color: #000;
  21.         }
  23.         /* 页面样式 */
  24.         /* 顶部 */
  25.         .box {
  26.             display: flex;
  27.             /* 将整个页面元素转为弹性布局 */
  28.             flex-flow: column nowrap;
  29.             /* 主轴方向为垂直，不换行 */
  30.             min-width: 50em;
  31.             /* 整体box设置最小宽度 */
  32.             min-width: 40em;
  33.             /* 设置最小宽度 */
  34.         }
  36.         .top {
  37.             background-color: #cccccc;
  38.             display: flex;
  39.             /* 将top转为弹性布局 */
  40.         }
  42.         .top>a:first-of-type {
  43.             margin-right: 10em;
  44.         }
  46.         .top>a:last-of-type {
  47.             margin-left: auto;
  48.         }
  50.         .top>a {
  51.             flex: 0 1 5em;
  52.             /* 不放大，可以缩小，基准宽度5em */
  53.             text-align: center;
  54.             color: dimgray;
  55.         }
  58.         /* 主体 */
  59.         .container {
  60.             display: flex;
  61.             /* 将主体区转为弹性布局 */
  62.             height: 30em;
  63.             /* 设置固定的高度 */
  64.             justify-content: center;
  65.             /* 将top中所有项目在主轴上进行居中分配 */
  66.         }
  68.         .container>.banner {
  69.             flex: 0 0 30em;
  70.             /* 不放大，不缩小，基准宽度30em */
  71.             background-color: seagreen;
  72.         }
  74.         .container>aside {
  75.             background-color: sandybrown;
  76.             flex: 0 0 5em;
  77.             /* 不放大，不缩小，基准宽度5em */
  78.         }
  80.         /* 底部 */
  81.         footer {
  82.             display: flex;
  83.             /* 将底部转为弹性布局 */
  84.             flex-flow: column nowrap;
  85.             /* 主轴方向变为垂直方向，不换行 */
  86.             height: 10em;
  87.             background-color: #ccc;
  88.         }
  90.         footer>.foot-1 {
  91.             height: 5em;
  92.             display: flex;
  93.             /* 将底部一转为弹性布局 */
  94.             justify-content: space-evenly;
  95.             /* 将每个项目在主轴上进行平均对齐 */
  96.             align-items: center;
  97.             /* 将每个项目在交叉轴上进行居中对齐 */
  98.         }
  100.         footer>.foot-1>a {
  101.             flex: 0 1 4em;
  102.             /* 不放大，可以缩小，基准宽度4em */
  103.         }
  105.         footer>.foot-2 {
  106.             display: flex;
  107.             /* 将底部二转为弹性布局 */
  108.             height: 5em;
  109.             justify-content: space-evenly;
  110.             /* 将每个项目在主轴上进行平均对齐 */
  111.             align-items: center;
  112.             /* 将每个项目在交叉轴上进行居中对齐 */
  113.         }
  115.         footer>.foot-2>div {
  116.             flex: 0 1 8em;
  117.             /* 不放大，可以缩小，基准宽度8em */
  118.             height: 3em;
  119.             background-color: skyblue;
  120.             margin: 0 0.5em;
  121.         }
  123.         /* 设置自适应 */
  124.         @media screen and (max-width: 900px) {
  125.             aside:last-of-type {
  126.                 display: none;
  127.             }
  128.         }
  130.         /* 小于900时，右侧边栏消失 */
  132.         @media screen and (max-width: 800px) {
  133.             aside:first-of-type {
  134.                 display: none;
  135.             }
  136.         }
  138.         /* 小于800时，左侧边栏也消失 */
  140.         @media screen and (max-width: 700px) {
  142.             footer>.foot-2,
  143.             .top>a:not(:first-of-type):not(:last-of-type) {
  144.                 display: none;
  145.             }
  146.         }
  148.         /* 小于700时，顶部除第一个最后一个之外的a也消失 */
  149.         /* 小于700时，底部下边合作商家栏消失 */
  150.         @media screen and (max-width: 600px) {
  152.             footer {
  153.                 display: none;
  154.             }
  155.         }
  157.         /* 小于600时，底部整个消失 */
  158.     </style>
  159. </head>
  161. <body>
  162.     <div class="box">
  163.         <!-- 顶部 -->
  164.         <div class="top">
  165.             <a href="">陕西</a>
  167.             <a href="">登录</a>
  168.             <a href="">注册</a>
  169.             <a href="">订单</a>
  170.             <a href="">卖家</a>
  171.             <a href="">服务</a>
  173.             <a href="">手机端</a>
  174.         </div>
  175.         <!-- 主体 -->
  176.         <div class="container">
  177.             <aside>左侧边栏</aside>
  178.             <div class="banner"></div>
  179.             <aside>右侧边栏</aside>
  180.         </div>
  181.         <!-- 页脚 -->
  182.         <footer>
  183.             <!-- 关于我们 -->
  184.             <div class="foot-1">
  185.                 <a href="">关于我们</a>
  186.                 <a href="">联系我们</a>
  187.                 <a href="">联系客服</a>
  188.                 <a href="">合作招商</a>
  189.                 <a href="">商家帮助</a>
  190.                 <a href="">营销中心</a>
  191.                 <a href="">友情链接</a>
  192.             </div>
  193.             <!-- 合作商家 -->
  194.             <div class="foot-2">
  195.                 <div class="img"> </div>
  196.                 <div class="img"> </div>
  197.                 <div class="img"> </div>
  198.                 <div class="img"> </div>
  199.                 <div class="img"> </div>
  200.             </div>
  201.         </footer>
  202.     </div>
  203. </body>
  205. </html>
2. 仿写demo6案例,尽可能给每一个属性都添加上注释
  1. <!DOCTYPE html>
  2. <html lang="">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.             /* 转为ie盒子 */
  14.         }
  16.         body {
  17.             background-color: skyblue;
  18.             /* 整体给个背景色 */
  19.         }
  21.         .container {
  22.             display: flex;
  23.             /* 转为弹性布局 */
  24.             flex-flow: row wrap;
  25.             /* 默认水平方向 换行 */
  26.             justify-content: center;
  27.             /* 全部项目在主轴上的对齐方式为居中 */
  28.         }
  30.         .box {
  31.             border: 1px slategray solid;
  32.             /* 边框 */
  33.             background-color: darkseagreen;
  34.             /* box给个背景色 */
  35.             text-align: center;
  36.             /* 字体居中 */
  37.             padding: 2em;
  38.             /* 内边距 */
  39.             width: 20em;
  40.             /* 盒子宽度 */
  41.             margin: 2em;
  42.             /* 外边距 */
  43.         }
  45.         .box>.comma {
  46.             width: 3em;
  47.             /* 逗号宽度 */
  48.         }
  50.         .box>.profile {
  51.             width: 5em;
  52.             /* 头像宽度 */
  53.             border-radius: 50%;
  54.             /* 圆角50%为正圆 */
  55.         }
  57.         .box>h5 {
  58.             font-size: 1.2em;
  59.             /* 名字字体大小 */
  60.             font-family: sans-serif;
  61.             /* 字体 */
  62.         }
  64.         @media screen and (max-width: 1000px) {
  65.             .container .box {
  66.                 height: auto;
  67.                 padding: 20px 10px;
  68.             }
  69.         }
  71.         /* 如果显示屏幕宽度小于1000px时，box高度自适应，内边距调整 */
  73.         @media screen and (max-width: 800px) {
  74.             .container .box {
  75.                 width: 80%;
  76.                 height: auto;
  77.                 padding: 30px 20px;
  78.             }
  79.         }
  81.         /* 如果显示屏幕宽度小于800px时，宽度为整体的80%，box高度自适应，内边距调整 */
  82.     </style>
  83. </head>
  85. <body>
  86.     <div class="container">
  87.         <div class="box">
  88.             <img src="static/images/quto.png" class="comma">
  89.             <p>“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛</p>
  90.             <img src="static/images/1.jpg" class="profile">
  91.             <h5>痴心妄想</h5>
  92.         </div>
  93.         <div class="box">
  94.             <img src="static/images/quto.png" class="comma">
  95.             <p>“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛</p>
  96.             <img src="static/images/2.jpg" class="profile">
  97.             <h5>痴心妄想</h5>
  98.         </div>
  99.         <div class="box">
  100.             <img src="static/images/quto.png" class="comma">
  101.             <p>“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛“余欢水”的怂，中年人的痛</p>
  102.             <img src="static/images/3.jpg" class="profile">
  103.             <h5>痴心妄想</h5>
  104.         </div>
  105.     </div>
  107. </body>
  109. </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