search

博客列表 >grid布局实战+demo项目页面模仿

grid布局实战+demo项目页面模仿

岂几岂几
岂几岂几原创
2020年04月22日 00:13:461185浏览

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的盒模型浮动定位”还没写, 其他的都补完了, 挺有成就感的.
上一条：运算符与流程控制下一条：函数的类型、返回值和参数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多