Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局实战+demo项目页面模仿
Blogger Information
Blog 57
fans 3
comment 0
visits 60550
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
grid布局实战+demo项目页面模仿
岂几岂几
Original
1184 people have browsed it

1. 电子相册

  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.             border: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         body {
  15.             background-color:teal;
  16.         }
  18.         h1 {
  19.             text-align: center;
  20.             font-weight: 400;
  21.             text-shadow: 5px 5px 5px gray;
  22.         }
  24.         .container {
  25.             min-height: 1000px;
  26.             display: grid;
  28.             grid-template-columns: repeat(auto-fill, 250px);
  29.             grid-template-rows: repeat(auto-fill, 330px);
  31.             justify-content: space-evenly;
  32.             align-content: space-around;
  34.             gap: 25px;
  35.         }
  37.         .container .item {
  38.             background-color: white;
  39.             padding: 10px;
  41.             display: flex;
  43.             flex-flow: column nowrap;
  44.             justify-content: space-between;
  45.             align-items: center;
  47.             border-radius: 10px;
  48.         }
  50.         .container .item:hover {
  51.             width:calc(100%*1.02);
  52.             box-shadow: 0 0 10px lightgrey;
  53.             background-color: wheat;
  54.         }
  56.         .container .item a:hover {
  57.             color: red;
  58.         }
  60.         .container .item img {
  61.             width: 100%;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <h1>我的相册</h1>
  67.     <div class="container">
  68.         <div class="item">
  69.             <img src="xc.png" alt="">
  70.             <a href="#">照片标题1</a>
  71.         </div>
  72.         <div class="item">
  73.             <img src="xc.png" alt="">
  74.             <a href="#">照片标题1</a>
  75.         </div>
  76.         <div class="item">
  77.             <img src="xc.png" alt="">
  78.             <a href="#">照片标题2</a>
  79.         </div>
  80.         <div class="item">
  81.             <img src="xc.png" alt="">
  82.             <a href="#">照片标题3</a>
  83.         </div>
  84.         <div class="item">
  85.             <img src="xc.png" alt="">
  86.             <a href="#">照片标题4</a>
  87.         </div>
  88.         <div class="item">
  89.             <img src="xc.png" alt="">
  90.             <a href="#">照片标题5</a>
  91.         </div>
  92.         <div class="item">
  93.             <img src="xc.png" alt="">
  94.             <a href="#">照片标题6</a>
  95.         </div>
  96.         <div class="item">
  97.             <img src="xc.png" alt="">
  98.             <a href="#">照片标题7</a>
  99.         </div>
  100.         <div class="item">
  101.             <img src="xc.png" alt="">
  102.             <a href="#">照片标题8</a>
  103.         </div>
  104.         <div class="item">
  105.             <img src="xc.png" alt="">
  106.             <a href="#">照片标题9</a>
  107.         </div>
  108.         <div class="item">
  109.             <img src="xc.png" alt="">
  110.             <a href="#">照片标题10</a>
  111.         </div>
  112.         <div class="item">
  113.             <img src="xc.png" alt="">
  114.             <a href="#">照片标题11</a>
  115.         </div>
  116.         <div class="item">
  117.             <img src="xc.png" alt="">
  118.             <a href="#">照片标题12</a>
  119.         </div>
  120.     </div>
  121. </body>
  122. </html>

运行效果图:

2. 仿格栅布局组件

  1. 格栅布局组件: /static/css/style.css
  1. /* 把demo1.html中写好的栅格布局样式搬到这里来 */
  2. /* 2.设置通用样式 */
  3. * {
  4.     border: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. /* 3.body看做flex布局, 主轴为垂直方向, 宽高等于100视口, 这样可以撑起宽高 */
  10. body {
  11.     display: flex;
  12.     flex-flow: column nowrap;
  13.     width: 100vw;
  14.     height: 100vh;
  16.     justify-content: start;
  17.     align-items: center;
  18. }
  20. /* 4.格栅布局的容器 */
  21. .container {
  22.     /* 4.0.设置容器最小宽度,以撑起空间 */
  23.     min-width: 1000px;
  25.     /* 4.1.生成grid容器(感觉设置成flex布局也OK,反正都是部署成一列) */
  26.     display: grid;
  28.     /* 4.2.不设置显示生成单元格样式时,grid布局默认是生成一列多行式布局 */
  30.     /* 4.3.设置网格区域之间的间隙宽度为5px */
  31.     row-gap: 5px;
  33. }
  35. /* 5.格栅布局的行 */
  36. .row {
  37.     width: 100%;
  39.     /* 5.1.设置为grid布局 */
  40.     display: grid;
  42.     /* 行优先(默认就是,其实可以省略) */
  43.     grid-auto-flow: row;
  45.     /* 5.2.只设置显示生成单元格的列数量,平均分配为12列 */
  46.     grid-template-columns: repeat(12, 1fr);
  47.     /* 默认就是,其实可以省略 */
  48.     grid-template-rows: repeat(1, 1fr);
  50.     /* 5.3.网格区域之间的间隙 */
  51.     gap: 5px;
  53. }
  55. /* 6.栅格中的共通样式 */
  56. .item {
  57.     border: 1px solid;
  58.     min-height: 50px;
  59. }
  61. /* 7.设置不同大小栅格(项目)的布局样式 */
  62. .col-1 {
  63.     /* 布局占1列 */
  64.     grid-column-end: span 1;
  65. }
  67. .col-2 {
  68.     /* 布局占2列 */
  69.     grid-column-end: span 2;
  70. }
  72. .col-3 {
  73.     /* 布局占3列 */
  74.     grid-column-end: span 3;
  75. }
  77. .col-4 {
  78.     grid-column-end: span 4;
  79. }
  81. .col-5 {
  82.     grid-column-end: span 5;
  83. }
  85. .col-6 {
  86.     grid-column-end: span 6;
  87. }
  89. .col-7 {
  90.     grid-column-end: span 7;
  91. }
  93. .col-8 {
  94.     grid-column-end: span 8;
  95. }
  97. .col-9 {
  98.     grid-column-end: span 9;
  99. }
  101. .col-10 {
  102.     grid-column-end: span 10;
  103. }
  105. .col-11 {
  106.     grid-column-end: span 11;
  107. }
  109. .col-12 {
  110.     grid-column-end: span 12;
  111. }
  1. 自定义格栅布局使用 /demo1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         @import url('static/css/style.css');
  10.     </style>
  11. </head>
  13. <body>
  14.     <!-- 1.先照bootstrap的山歌布局结构写出HTML结构 -->
  15.     <div class="container">
  16.         <!-- 创建行 -->
  17.         <div class="row">
  18.             <!-- 创建列(两列) -->
  19.             <div class="item col-6">6</div>
  20.             <div class="item col-6">6</div>
  21.         </div>
  23.         <!-- 1.END -->
  25.         <!-- 自制山歌布局其他测试 -->
  26.         <!-- 创建行 -->
  27.         <div class="row">
  28.             <!-- 创建列(三列) -->
  29.             <div class="item col-2">2</div>
  30.             <div class="item col-8">8</div>
  31.             <div class="item col-2">2</div>
  32.         </div>
  34.         <!-- 创建行 -->
  35.         <div class="row">
  36.             <!-- 创建列(十二列) -->
  37.             <div class="item">1</div>
  38.             <div class="item">2</div>
  39.             <div class="item">3</div>
  40.             <div class="item">4</div>
  41.             <div class="item">5</div>
  42.             <div class="item">6</div>
  43.             <div class="item">7</div>
  44.             <div class="item">8</div>
  45.             <div class="item">9</div>
  46.             <div class="item">10</div>
  47.             <div class="item">11</div>
  48.             <div class="item">12</div>
  49.         </div>
  52.         <!-- 创建行 -->
  53.         <div class="row">
  54.             <!-- 创建列(不布局完) -->
  55.             <div class="item col-2">2</div>
  56.             <div class="item col-8">8</div>
  57.         </div>
  58.     </div>
  59. </body>
  61. </html>

运行效果图:

3. 模仿实战项目页面

首页模仿

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         @import url('static/font_icon/iconfont.css');
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  17.         li {
  18.             list-style-type: none;
  19.         }
  21.         body {
  22.             font-size: 14px;
  23.             width: 100vw;
  24.             height: 100vh;
  25.         }
  27.         header {
  28.             background-color: black;
  29.             color: #ccc;
  30.             width: 100%;
  31.             height: 44px;
  32.             padding: 0 20px;
  33.             display: flex;
  34.             flex-flow: row nowrap;
  35.             justify-content: space-between;
  36.             align-items: center;
  37.         }
  39.         header a {
  40.             color: inherit;
  41.             margin-right: 20px;
  42.             text-decoration: none;
  43.         }
  45.         header>.right a {
  46.             margin-right: unset;
  47.             margin-left: 20px;
  48.         }
  50.         section{
  51.             width: 100%;
  52.         }
  54.         section:first-of-type
  55.         , section:nth-of-type(3) {
  56.             /* width: 100%; */
  57.             background-color: #fafafa;
  58.             padding-bottom: 30px;
  59.         }
  61.         section:first-of-type>*>* {
  62.             max-width: 1200px;
  63.             margin: 0 auto;
  64.         }
  66.         section:not(:first-of-type)>* {
  67.             max-width: 1200px;
  68.             margin: 0 auto;
  69.         }
  71.         section>.top>.top-header {
  72.             /* max-width: 1050px; */
  73.             /* margin: 0 auto; */
  75.             display: flex;
  76.             flex-flow: row nowrap;
  77.             justify-content: space-between;
  78.             align-items: center;
  79.         }
  81.         section>.top>.top-header>.right {
  82.             height: 36px;
  83.             display: flex;
  84.             flex-flow: row nowrap;
  85.             align-items: start;
  86.             position: relative;
  87.         }
  89.         section>.top>.top-header>.right>input {
  90.             height: 36px;
  91.             width: 319px;
  92.             border: 1px solid #aaa;
  93.             border-radius: 10px;
  94.         }
  96.         section>.top>.top-header>.right>input:hover {
  97.             box-shadow: 0 0 5px #aaa;
  98.         }
  100.         section>.top>.top-header>.right>span {
  101.             position: absolute;
  102.             font-size: 1.5rem;
  103.             color: #aaa;
  104.             top: 4px;
  105.             left: 290px;
  106.             cursor: pointer;
  107.         }
  109.         section>.top>.top-header>.right>a:first-of-type {
  110.             margin-left: 40px;
  111.         }
  113.         section>.top>.top-header>.right>a:not(:first-of-type) {
  114.             margin-left: 20px;
  115.         }
  117.         section>.top>.top-header>.right>a>span {
  118.             font-size: 33px;
  119.             height: 36px;
  120.             line-height: 36px;
  121.             display: inline-block;
  122.             text-decoration: none;
  123.             color: #666;
  124.         }
  126.         section>.top>.nav{
  127.             /* max-width: 1050px; */
  128.             /* margin: 0 auto; */
  129.             display: flex;
  130.             flex-flow: row nowrap;
  131.             justify-content: start;
  132.             align-items:stretch;
  134.         }
  136.         section>.top>.nav>.nav-box {
  137.             display: grid;
  138.             grid-auto-flow: row;
  139.             grid-template-columns: repeat(6, 1fr);
  140.             grid-template-rows: repeat(2, 1fr);
  141.             margin-right: 30px;
  142.             flex: 1 1 auto;
  143.         }
  145.         section>.top>.nav>.nav-box>span{
  146.             font-size: 40px;
  147.             display: inline-block;
  148.             grid-row-end: span 2;
  149.             color: red;
  150.         }
  152.         section>.top>.nav>.nav-box>a {
  153.             display: inline-block;
  154.             text-align: center;
  155.             text-decoration: none;
  156.             color: #666;
  157.         }
  159.         section>.top>.nav>.nav-box>a:nth-of-type(5n+1) {
  160.             border-right: 1px solid #999;
  161.         }
  163.         section>.top>.lunbo {
  164.             margin-top: 20px;
  165.             display:flex;
  166.             flex-flow: row nowrap;
  167.             justify-content: space-between;
  168.         }
  170.         section>.top>.lunbo>img:first-of-type{
  171.             width: 75%;
  172.             flex: 3 3 auto;
  173.             margin-right: 10px;
  174.         }
  176.         section>.top>.lunbo>img:last-of-type {
  177.             width: 25%;
  178.             flex: 1 1 auto;
  179.         }
  181.         section>.top>.lunbo>img:hover {
  182.             box-shadow: 0 0 5px #666;
  183.         }
  185.         section:nth-of-type(2) {
  186.             /* width: 100%; */
  187.             background-color: #ddd;
  188.             padding-bottom: 10px;
  189.         }
  191.         section:nth-of-type(2)>.section-box:first-child {
  192.             background-color: #fafafa;
  193.             height: 520px;
  194.             margin-bottom: 10px;
  195.         }
  197.         section>.section-box>.title{
  198.             background-color: #ddd;
  199.             height: 100px;
  200.             line-height: 100px;
  201.             text-align: center;
  202.         }
  204.         section>.section-box>.title> span {
  205.             border-bottom: 2px solid orange;
  206.             font-size: 30px;
  207.         }
  209.         section>.section-box.news>.box-content{
  210.             /* height: 420px; */
  211.         }
  213.         section>.section-box.pic-site>.box-content {
  214.             /* height: 470px; */
  215.             padding: 0;
  216.         }
  218.         section>.news>.box-content, section>.pic-site>.box-content {
  219.             display: grid;
  220.             grid-auto-flow: row;
  221.             grid-template-columns: repeat(3, 1fr);
  222.             grid-template-rows: 1fr;
  223.             justify-items: stretch;
  224.             align-items: stretch;
  225.             padding: 30px 15px;
  226.             column-gap: 20px;
  228.         }
  230.         section>.section-box.news>.box-content:hover
  231.         , section>.section-box.secondhand-trade>.box-content:hover {
  232.             box-shadow: 0 0 10px black;
  233.         }
  235.         section>.section-box.news>.box-content>.left{
  236.             display:grid;
  237.             grid-auto-flow: row;
  238.             grid-template-columns: repeat(2, 1fr);
  239.             grid-template-rows: repeat(2, 1fr);
  240.         }
  242.         section>.section-box.news>.box-content>.left>a {
  243.             text-decoration: none;
  244.             color: #333;
  245.         }
  247.         section>.section-box.news>.box-content>.left>a:first-of-type {
  248.             grid-column-end: span 2;
  249.         }
  251.         section>.section-box.news>.box-content>.left>a>div{
  252.             width: 100%;
  253.             height: 95%;
  254.             display: flex;
  255.             flex-flow: column nowrap;
  256.             justify-content: space-between;
  257.         }
  259.         section>.section-box.news>.box-content>.left>a img{
  260.             width: inherit;
  261.         }
  263.         section>.section-box.news>.box-content>div:not(:first-of-type)>p>a{
  264.             font-size: 23px;
  265.             color: red;
  266.             text-decoration: none;
  267.         }
  269.         section>.section-box.news>.box-content>div:not(:first-of-type)>ul:first-of-type {
  270.             margin-bottom: 40px;
  271.         }
  273.         section>.section-box.news>.box-content>div:not(:first-of-type)>ul>li{
  274.             /* margin: 10px 0; */
  275.             height: 32px;
  276.             line-height: 32px;
  277.         }
  279.         section>.section-box.news>.box-content>div:not(:first-of-type)>ul>li>span {
  280.             color: #666;
  281.             margin-right: 10px;
  282.         }
  284.         section>.section-box.news>.box-content>div:not(:first-of-type)>ul>li>a {
  285.             text-decoration: none;
  286.             color: #333;
  288.         }
  290.         section>.section-box.pic-site>.box-content>div{
  291.             background-color: #fafafa;
  292.             border-radius: 10px;
  293.             /* height: 100%; */
  294.         }
  296.         section>.section-box.pic-site>.box-content>div:hover {
  297.             box-shadow: 0 0 10px black;
  298.         }
  300.         section>.section-box.pic-site{
  301.             height: 570px;
  302.         }
  304.         section>.section-box.pic-site>.box-content>div{
  305.             padding: 20px 20px 0 20px;
  306.         }
  308.         section>.section-box.pic-site>.box-content .title{
  309.             height: 50px;
  310.             line-height: 30px;
  311.             border-bottom: 1px solid #999;
  312.         }
  314.         section>.section-box.pic-site>.box-content .title>span {
  315.             font-size: 30px;
  316.             vertical-align: middle;
  317.             color: #666;
  318.         }
  320.         section>.section-box.pic-site>.box-content .title>a {
  321.             color: red;
  322.             margin-left: 20px;
  323.             text-decoration: none;
  324.         }
  326.         section>.section-box.pic-site>.box-content .pic-content{
  327.             padding: 20px 0;
  328.             display: grid;
  329.             grid-template-columns: repeat(2, 1fr);
  330.             grid-template-rows: repeat(2, 1fr);
  331.             justify-content: space-between;
  332.             gap: 20px;
  333.         }
  335.         section>.section-box.pic-site>.box-content .pic-content>.pic-box{
  336.             max-width: 100%;
  337.         }
  339.         section>.section-box.pic-site>.box-content .pic-content>.pic-box>img{
  340.             width: 100%;
  341.         }
  343.         section>.secondhand-trade {
  344.             background-color: #fafafa;
  345.             margin-bottom: 10px;
  346.         }
  348.         section>.secondhand-trade>.box-content {
  350.             display: grid;
  351.             grid-auto-flow: row;
  352.             grid-template-columns: 2fr 1fr;
  353.             grid-template-rows: 1fr;
  354.             justify-items: stretch;
  355.             align-items: stretch;
  356.             padding: 20px 15px;
  357.             column-gap: 20px;
  358.         }
  360.         section>.secondhand-trade>.box-content>.title{
  361.             height: 50px;
  362.             line-height: 30px;
  363.             border-bottom: 1px solid #666;
  364.             grid-column-end: span 2;
  365.         }
  367.         section>.secondhand-trade>.box-content>.title>span:first-of-type{
  368.             font-size: 30px;
  369.             color: #666;
  370.             vertical-align: middle;
  371.         }
  373.         section>.secondhand-trade>.box-content>.title>span:last-of-type {
  374.             margin-left: 20px;
  375.             color:red;
  377.         }
  379.         section>.secondhand-trade>.box-content>.hot-cats {
  380.             height: 70px;
  381.             line-height: 30px;
  382.             padding-top: 20px;
  383.             grid-column-end: span 2;
  384.         }
  386.         section>.secondhand-trade>.box-content>.hot-cats>span{
  387.             font-size: 30px;
  388.             color: red;
  389.             vertical-align: middle;
  390.         }
  392.         section>.secondhand-trade>.box-content>.hot-cats>a {
  393.             margin-left: 20px;
  394.             text-decoration: none;
  395.             color: #666;
  396.         }
  398.         section>.secondhand-trade>.box-content>.girl-content{
  399.             padding: 5px;
  400.             display: grid;
  401.             grid-template-columns: repeat(4, 1fr);
  402.             grid-template-rows: repeat(2, 1fr);
  403.         }
  405.         section>.secondhand-trade>.box-content>.girl-content>.girl-box{
  406.             padding: 5px;
  407.             display: block;
  408.             text-decoration: none;
  409.         }
  411.         section>.secondhand-trade>.box-content>.girl-content>.girl-box>img{
  412.             width: 100%;
  413.             border: 1px solid #aaa;
  414.             border-radius: 10px;
  415.         }
  417.         section>.secondhand-trade>.box-content>.girl-content>.girl-box>p{
  418.             color: #666;
  419.             display: inline-block;
  420.             margin-top: 10px;
  421.         }
  423.         section>.secondhand-trade>.box-content>.girl-content>.girl-box>div{
  424.             display: flex;
  425.             flex-flow: row nowrap;
  426.             justify-content: space-between;
  427.             margin-top: 10px;
  428.         }
  430.         section>.secondhand-trade>.box-content>.girl-content>.girl-box>div>span:first-of-type{
  431.             color: red;
  432.         }
  434.         section>.secondhand-trade>.box-content>.girl-content>.girl-box>div>span:last-of-type{
  435.             background-color:limegreen;
  436.             color: #fff;
  437.             padding: 0 5px;
  438.         }
  440.         section>.secondhand-trade>.box-content>.secondhand{
  441.             display: grid;
  442.             grid-template-columns: repeat(2, 1fr);
  443.             grid-template-rows: repeat(3, 1fr);
  444.             padding-top: 10px;
  445.             gap: 10px
  446.         }
  447.         section>.secondhand-trade>.box-content>.secondhand>.secondhand-box {
  448.             padding:5px;
  449.         }
  451.         section>.secondhand-trade>.box-content>.secondhand>.secondhand-box>img{
  452.             width: 100%;
  453.         }
  455.         section>.secondhand-trade>.box-content>.secondhand>.seconhand-box-lg {
  456.             grid-column-end: span 2;
  457.         }
  459.         section>.secondhand-trade>.box-content>.secondhand>.seconhand-box-lg img {
  460.             width: 100%;
  461.         }
  463.         section>.friend-link{
  464.             padding: 30px 30px 0 30px;
  465.             display: grid;
  466.             grid-auto-flow: row;
  467.             grid-template-columns: repeat(auto-fill, 100px);
  468.             row-gap: 20px;
  469.         }
  471.         section>.friend-link a {
  472.             text-decoration: none;
  473.             color: #666;
  474.         }
  476.         section>.friend-link a:hover{
  477.             color: lightskyblue;
  478.         }
  480.         footer {
  481.             background-color: black;
  482.             color: #999;
  483.             padding: 30px 30px;
  484.         }
  486.         footer>.footer-box{
  487.             max-width: 1200px;
  488.             margin: 0 auto;
  489.             display: grid;
  490.             grid-auto-flow: row;
  491.             grid-template-columns: 2fr 1fr;
  492.             grid-template-rows: 1fr;
  493.         }
  495.         footer>.footer-box>.left{
  496.             display: grid;
  497.             grid-template-columns: 25% 75%;
  498.             grid-template-rows: 1fr;
  499.             row-gap: 20px;
  500.             border-right: 1px solid #999;
  501.         }
  503.         footer>.footer-box>.left>.footer-nav{
  504.             grid-column-end: span 2;
  505.             display: flex;
  506.             flex-flow: row nowrap;
  507.             justify-content: space-evenly;
  508.             align-items: center;
  509.         }
  511.         footer>.footer-box>.left>.footer-nav>a {
  512.             color: #999;
  513.             text-decoration: none;
  514.         }
  516.         footer>.footer-box>.left>.banquanxinxi>p {
  517.             padding: 10px 0;
  518.         }
  519.     </style>
  520. </head>
  522. <body>
  523.     <header>
  524.         <div class="left">
  525.             <a href="">网站首页</a>
  526.             <a href="">专题</a>
  527.             <a href="">网站导航</a>
  528.             <a href="">二手商品</a>
  529.             <a href="">讨论区</a>
  530.         </div>
  531.         <div class="right">
  532.             <a href="">
  533.                 <span class="iconfont icon-yonghu"></span>&nbsp;
  534.                 <span>登录</span>
  535.             </a>
  536.             <a href="">免费注册</a>
  537.         </div>
  538.     </header>
  539.     <section>
  540.         <div class="top">
  541.             <div class="top-header">
  542.                 <img src="static/images/logo.png" alt="" class="logo">
  543.                 <div class="right">
  544.                     <input type="text" name="" id="">
  545.                     <span class="iconfont icon-icon--"></span>
  546.                     <a href=""><span class="iconfont icon-iconfontqz"></span></a>
  547.                     <a href=""><span class="iconfont icon-pinglun"></span></a>
  548.                     <a href=""><span class="iconfont icon-fasong"></span></a>
  549.                     <a href=""><span class="iconfont icon-icon--"></span></a>
  550.                     <a href=""><span class="iconfont icon-yonghu"></span></a>
  551.                     <a href=""><span class="iconfont icon-dianzan"></span></a>
  552.                 </div>
  553.             </div>
  554.             <div class="nav">
  555.                 <div class="nav-box">
  556.                     <span class="iconfont icon-wendang"></span>
  557.                     <a href="">资讯</a>
  558.                     <a href="">器材</a>
  559.                     <a href="">大师</a>
  560.                     <a href="">学院</a>
  561.                     <a href="">实战</a>
  562.                     <a href="">学习</a>
  563.                     <a href="">大赛</a>
  564.                     <a href="">裤子</a>
  565.                     <a href="">影视</a>
  566.                     <a href="">其他</a>
  567.                 </div>
  568.                 <div class="nav-box">
  569.                     <span class="iconfont icon-wendang"></span>
  570.                     <a href="">资讯</a>
  571.                     <a href="">器材</a>
  572.                     <a href="">大师</a>
  573.                     <a href="">学院</a>
  574.                     <a href="">实战</a>
  575.                     <a href="">学习</a>
  576.                     <a href="">大赛</a>
  577.                     <a href="">裤子</a>
  578.                     <a href="">影视</a>
  579.                     <a href="">其他</a>
  580.                 </div>
  581.                 <div class="nav-box">
  582.                     <span class="iconfont icon-wendang"></span>
  583.                     <a href="">资讯</a>
  584.                     <a href="">器材</a>
  585.                     <a href="">大师</a>
  586.                     <a href="">学院</a>
  587.                     <a href="">实战</a>
  588.                     <a href="">学习</a>
  589.                     <a href="">大赛</a>
  590.                     <a href="">裤子</a>
  591.                     <a href="">影视</a>
  592.                     <a href="">其他</a>
  593.                 </div>
  594.                 <div class="nav-box">
  595.                     <span class="iconfont icon-wendang"></span>
  596.                     <a href="">资讯</a>
  597.                     <a href="">器材</a>
  598.                     <a href="">大师</a>
  599.                     <a href="">学院</a>
  600.                     <a href="">实战</a>
  601.                     <a href="">学习</a>
  602.                     <a href="">大赛</a>
  603.                     <a href="">裤子</a>
  604.                     <a href="">影视</a>
  605.                     <a href="">其他</a>
  606.                 </div>
  607.             </div>
  608.             <div class="lunbo">
  609.                 <img src="static/images/lunbo1.jpg" alt="">
  610.                 <img src="static/images/lunbo2.jpg" alt="">
  611.             </div>
  612.         </div>
  613.     </section>
  614.     <section>
  615.         <div class="section-box news">
  616.             <div class="title"><span>行业资讯</span></div>
  617.             <div class="box-content">
  618.                 <div class="left">
  619.                     <a href="">
  620.                         <img src="static/images/news1.jpg" alt="">
  621.                     </a>
  622.                     <a href="">
  623.                         <div>
  624.                             <img src="static/images/n-2.jpg" alt="">
  625.                             <p>三星Note10发布搭载挖孔前摄</p>
  626.                         </div>
  627.                     </a>
  628.                     <a href="">
  629.                         <div>
  630.                             <img src="static/images/n-3.jpg" alt="">
  631.                             <p>小米发布1亿像素手机信息</p>
  632.                         </div>
  633.                     </a>
  634.                 </div>
  635.                 <div class="center">
  636.                     <p>
  637.                         <a href="">大隐于市的摄影师,薇薇安·迈尔</a>
  638.                     </p>
  639.                     <ul>
  640.                         <li>
  641.                             <span>[新闻]</span>
  642.                             <a href="">佳能注册相机无线充电和眼控对焦专利</a>
  643.                         </li>
  644.                         <li>
  645.                             <span>[新闻]</span>
  646.                             <a href="">Entaniya宣布推出Super 35 PL卡口鱼眼镜头</a>
  647.                         </li>
  648.                         <li>
  649.                             <span>[新闻]</span>
  650.                             <a href="">轻便灵巧可变形 JOBY入门迷你三脚架套装试用</a>
  651.                         </li>
  652.                         <li>
  653.                             <span>[新闻]</span>
  654.                             <a href="">乐摄宝Photo Active BP 300 AW背包评测</a>
  655.                         </li>
  656.                     </ul>
  657.                     <ul>
  658.                         <li>
  659.                             <span>[新闻]</span>
  660.                             <a href="">佳能注册相机无线充电和眼控对焦专利</a>
  661.                         </li>
  662.                         <li>
  663.                             <span>[新闻]</span>
  664.                             <a href="">Entaniya宣布推出Super 35 PL卡口鱼眼镜头</a>
  665.                         </li>
  666.                         <li>
  667.                             <span>[新闻]</span>
  668.                             <a href="">轻便灵巧可变形 JOBY入门迷你三脚架套装试用</a>
  669.                         </li>
  670.                         <li>
  671.                             <span>[新闻]</span>
  672.                             <a href="">乐摄宝Photo Active BP 300 AW背包评测</a>
  673.                         </li>
  674.                         <li>
  675.                             <span>[新闻]</span>
  676.                             <a href="">乐摄宝Photo Active BP 300 AW背包评测</a>
  677.                         </li>
  678.                     </ul>
  679.                 </div>
  680.                 <div class="right">
  681.                     <p>
  682.                         <a href="">元旦春节,双节联动,备年货啦!!</a>
  683.                     </p>
  684.                     <ul>
  685.                         <li>
  686.                             <span>[促销]</span>
  687.                             <a href="">佳能 EOS RP 12899元起</a>
  688.                         </li>
  689.                         <li>
  690.                             <span>[促销]</span>
  691.                             <a href="">定焦,变焦, 新人小白如何选择?这三款值得买</a>
  692.                         </li>
  693.                         <li>
  694.                             <span>[促销]</span>
  695.                             <a href="">新一代入门神器？ 佳能EOS 850D将到来</a>
  696.                         </li>
  697.                         <li>
  698.                             <span>[促销]</span>
  699.                             <a href="">无低通次旗舰 D7500套机6899元</a>
  700.                         </li>
  701.                     </ul>
  702.                     <ul>
  703.                         <li>
  704.                             <span>[促销]</span>
  705.                             <a href="">佳能注册相机无线充电和眼控对焦专利</a>
  706.                         </li>
  707.                         <li>
  708.                             <span>[促销]</span>
  709.                             <a href="">E复古全幅单反 尼康Df套机14500元</a>
  710.                         </li>
  711.                         <li>
  712.                             <span>[促销]</span>
  713.                             <a href="">索尼α7R IV超广套装售42698元</a>
  714.                         </li>
  715.                         <li>
  716.                             <span>[促销]</span>
  717.                             <a href="">RF大三元长焦 RF70-200mm售17699</a>
  718.                         </li>
  719.                         <li>
  720.                             <span>[促销]</span>
  721.                             <a href="">有所保留 佳能EOS-1D X III再曝新功能</a>
  722.                         </li>
  723.                     </ul>
  724.                 </div>
  725.             </div>
  726.         </div>
  727.     <!-- </section>
  728.     <section> -->
  729.         <div class="section-box pic-site">
  730.             <div class="title"><span>图片专区</span></div>
  731.             <div class="box-content">
  732.                 <div class="left">
  733.                     <div class="title">
  734.                         <span>美女</span>
  735.                         <a href="">纵观摄影艺术</a>
  736.                     </div>
  737.                     <div class="pic-content">
  738.                         <div class="pic-box">
  739.                             <img src="static/images/img1.jpg" alt="">
  740.                             <p>阴沉夏日的柔美身姿 复古少女的藕荷色心情</p>
  741.                         </div>
  742.                         <div class="pic-box">
  743.                             <img src="static/images/img2.jpg" alt="">
  744.                             <p>愿你生活的都是每一天都是快快乐乐的, 一定要</p>
  745.                         </div>
  746.                         <div class="pic-box">
  747.                             <img src="static/images/img3.jpg" alt="">
  748.                             <p>今夜我不关心人类,我只想你,从爱上你的那天起</p>
  749.                         </div>
  750.                         <div class="pic-box">
  751.                             <img src="static/images/img4.jpg" alt="">
  752.                             <p>我转头,看见你走来,在阳光里,于是笑容从我心里溢出</p>
  753.                         </div>
  754.                     </div>
  755.                 </div>
  756.                 <div class="center">
  757.                     <div class="title">
  758.                         <span>健康</span>
  759.                         <a href="">纵观摄影艺术</a>
  760.                     </div>
  761.                     <div class="pic-content">
  762.                         <div class="pic-box">
  763.                             <img src="static/images/img1.jpg" alt="">
  764.                             <p>阴沉夏日的柔美身姿 复古少女的藕荷色心情</p>
  765.                         </div>
  766.                         <div class="pic-box">
  767.                             <img src="static/images/img2.jpg" alt="">
  768.                             <p>愿你生活的都是每一天都是快快乐乐的, 一定要</p>
  769.                         </div>
  770.                         <div class="pic-box">
  771.                             <img src="static/images/img3.jpg" alt="">
  772.                             <p>今夜我不关心人类,我只想你,从爱上你的那天起</p>
  773.                         </div>
  774.                         <div class="pic-box">
  775.                             <img src="static/images/img4.jpg" alt="">
  776.                             <p>我转头,看见你走来,在阳光里,于是笑容从我心里溢出</p>
  777.                         </div>
  778.                     </div>
  779.                 </div>
  780.                 <div class="right">
  781.                     <div class="title">
  782.                         <span>青春</span>
  783.                         <a href="">纵观摄影艺术</a>
  784.                     </div>
  785.                     <div class="pic-content">
  786.                         <div class="pic-box">
  787.                             <img src="static/images/img1.jpg" alt="">
  788.                             <p>阴沉夏日的柔美身姿 复古少女的藕荷色心情</p>
  789.                         </div>
  790.                         <div class="pic-box">
  791.                             <img src="static/images/img2.jpg" alt="">
  792.                             <p>愿你生活的都是每一天都是快快乐乐的, 一定要</p>
  793.                         </div>
  794.                         <div class="pic-box">
  795.                             <img src="static/images/img3.jpg" alt="">
  796.                             <p>今夜我不关心人类,我只想你,从爱上你的那天起</p>
  797.                         </div>
  798.                         <div class="pic-box">
  799.                             <img src="static/images/img4.jpg" alt="">
  800.                             <p>我转头,看见你走来,在阳光里,于是笑容从我心里溢出</p>
  801.                         </div>
  802.                     </div>
  803.                 </div>
  804.             </div>
  805.         </div>
  806.         <div class="section-box secondhand-trade">
  807.             <div class="title"><span>二手交易</span></div>
  808.             <div class="box-content">
  809.                 <div class="title">
  810.                     <span>抢好货</span>
  811.                     <span href="">0低价, 便捷,安全,快速</span>
  812.                 </div>
  813.                 <div class="hot-cats">
  814.                     <span>热门分类</span>
  815.                     <a href="">美女写真</a>
  816.                     <a href="">日本美女</a>
  817.                     <a href="">美国美女</a>
  818.                     <a href="">国内美女</a>
  819.                     <a href="">AV美女</a>
  820.                 </div>
  821.                 <div class="girl-content">
  822.                     <a href="#" class="girl-box">
  823.                         <img src="static/images/shop1.jpg" alt="">
  824.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  825.                         <div>
  826.                             <span>¥345</span>
  827.                             <span>美女</span>
  828.                         </div>
  829.                     </a>
  830.                     <a href="#" class="girl-box">
  831.                         <img src="static/images/shop1.jpg" alt="">
  832.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  833.                         <div>
  834.                             <span>¥345</span>
  835.                             <span>美女</span>
  836.                         </div>
  837.                     </a>
  838.                     <a href="#" class="girl-box">
  839.                         <img src="static/images/shop1.jpg" alt="">
  840.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  841.                         <div>
  842.                             <span>¥345</span>
  843.                             <span>美女</span>
  844.                         </div>
  845.                     </a>
  846.                     <a href="#" class="girl-box">
  847.                         <img src="static/images/shop1.jpg" alt="">
  848.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  849.                         <div>
  850.                             <span>¥345</span>
  851.                             <span>美女</span>
  852.                         </div>
  853.                     </a>
  854.                     <a href="#" class="girl-box">
  855.                         <img src="static/images/shop1.jpg" alt="">
  856.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  857.                         <div>
  858.                             <span>¥345</span>
  859.                             <span>美女</span>
  860.                         </div>
  861.                     </a>
  862.                     <a href="#" class="girl-box">
  863.                         <img src="static/images/shop1.jpg" alt="">
  864.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  865.                         <div>
  866.                             <span>¥345</span>
  867.                             <span>美女</span>
  868.                         </div>
  869.                     </a>
  870.                     <a href="#" class="girl-box">
  871.                         <img src="static/images/shop1.jpg" alt="">
  872.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  873.                         <div>
  874.                             <span>¥345</span>
  875.                             <span>美女</span>
  876.                         </div>
  877.                     </a>
  878.                     <a href="#" class="girl-box">
  879.                         <img src="static/images/shop1.jpg" alt="">
  880.                         <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  881.                         <div>
  882.                             <span>¥345</span>
  883.                             <span>美女</span>
  884.                         </div>
  885.                     </a>
  886.                 </div>
  887.                 <div class="secondhand">
  888.                     <div class="seconhand-box">
  889.                         <a href="">
  890.                             <img src="static/images/sh1.png" alt="">
  891.                         </a>
  892.                     </div>
  893.                     <div class="seconhand-box">
  894.                         <a href="">
  895.                             <img src="static/images/sh2.png" alt="">
  896.                         </a>
  897.                     </div>
  898.                     <div class="seconhand-box">
  899.                         <a href="">
  900.                             <img src="static/images/sh3.png" alt="">
  901.                         </a>
  902.                     </div>
  903.                     <div class="seconhand-box">
  904.                         <a href="">
  905.                             <img src="static/images/sh4.png" alt="">
  906.                         </a>
  907.                     </div>
  908.                     <div class="seconhand-box-lg">
  909.                         <a href="">
  910.                             <img src="static/images/sh5.png" alt="">
  911.                         </a>
  912.                         <a href="">
  913.                             <img src="static/images/sh6.jpg" alt="">
  914.                         </a>
  915.                     </div>
  916.                 </div>
  917.             </div>
  918.         </div>
  919.         <div class="section-box secondhand-trade">
  920.             <div class="title"><span>合作单位</span></div>
  921.         </div>
  922.     </section>
  923.     <section>
  924.         <div class="section-box friend-link">
  925.             <a href="">友情链接1</a>
  926.             <a href="">友情链接2</a>
  927.             <a href="">友情链接3</a>
  928.             <a href="">友情链接4</a>
  929.             <a href="">友情链接5</a>
  930.             <a href="">友情链接6</a>
  931.             <a href="">友情链接7</a>
  932.             <a href="">友情链接8</a>
  933.             <a href="">友情链接9</a>
  934.             <a href="">友情链接10</a>
  935.             <a href="">友情链接11</a>
  936.             <a href="">友情链接12</a>
  937.             <a href="">友情链接13</a>
  938.             <a href="">友情链接14</a>
  939.             <a href="">友情链接15</a>
  940.             <a href="">友情链接16</a>
  941.             <a href="">友情链接17</a>
  942.             <a href="">友情链接18</a>
  943.             <a href="">友情链接19</a>
  944.             <a href="">友情链接20</a>
  945.         </div>
  946.     </section>
  947.     <footer>
  948.         <div class="footer-box">
  949.             <div class="left">
  950.                 <div class="footer-nav">
  951.                     <a href="">简介</a>
  952.                     <a href="">联系我们</a>
  953.                     <a href="">招聘信息</a>
  954.                     <a href="">友情链接</a>
  955.                     <a href="">用户服务协议</a>
  956.                     <a href="">隐私声明</a>
  957.                     <a href="">法律投诉声明</a>
  958.                 </div>
  959.                 <div class="logo">
  960.                     <img src="" alt="">
  961.                 </div>
  962.                 <div class="banquanxinxi">
  963.                     <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
  964.                     <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  965.                     <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  966.                 </div>
  967.             </div>
  968.             <div class="right"></div>
  969.         </div>
  970.     </footer>
  971. </body>
  973. </html>

运行效果:

学习心得

  • grid和flex让布局变得简单, 而且学习起来也比较容易理解. 但是到了实战, 总体感觉是自己学会了, 但是却写不出来. 或者一个简单的实现, 需要写很多样式代码才能实现, 有些对齐方式还要靠猜, 说到底应该还是写得少.
  • 仿站实战, 感觉还是老问题, css代码太乱, 还没有学会怎样规划样式. 有点像面向过程编码, 样式复用率低. 需要找时间把老师的实战代码通读理解, 主要是学习老师的实现方式和样式规划思想. 如果老师能解读一下就更好了.
  • 上班狗, 前端的作业除”0408的盒模型浮动定位”还没写, 其他的都补完了, 挺有成就感的.
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