search

博客列表 >完善pc端的布局页面，仿写相册案例。

完善pc端的布局页面，仿写相册案例。

YwQ
YwQ原创
2020年10月29日 09:46:15749浏览
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>

上一条：PHP 开源工作流引擎 代理授权模式下一条：早上好good morming
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多