微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > grid布局实战+demo项目页面模仿
博主信息
博文 58
粉丝 3
评论 0
访问量 76736
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
grid布局实战+demo项目页面模仿
岂几岂几
原创
1476人浏览过

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举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录