Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html学习：4.14作业，相册、12格栅、实战整站网站
Blogger Information
Blog 52
fans 0
comment 3
visits 42424
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html学习：4.14作业，相册、12格栅、实战整站网站
王小飞
Original
830 people have browsed it

一、我的相册案例（grid响应式布局）

代码：

  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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #555;
  17.       }
  18.       a:hover {
  19.         color: rgb(255, 0, 0);
  20.       }
  22.       body {
  23.         background-color: rgb(57, 145, 245);
  24.       }
  25.       h1 {
  26.         /* 文字颜色 */
  27.         color: rgb(255, 1, 1);
  28.         /* 文字对齐方式 */
  29.         text-align: center;
  30.         /* 文字间距 */
  31.         letter-spacing: 5px;
  32.         /* 文字大小 */
  33.         font-size: 2.5rem;
  34.         /* 文字粗细 */
  35.         font-weight: 550;
  36.         /* 文字阴影 */
  37.         text-shadow: 4px 4px 4px #555;
  38.         /* 文字距离顶部距离 */
  39.         margin-top: 20px;
  40.       }
  42.       .container {
  43.         /* 最小宽度 */
  44.         min-width: 100vw;
  45.         /* 最小高度 */
  46.         min-height: 100vh;
  47.         /* 内间距 */
  48.         padding: 50px;
  49.         /* 设置布局方式 */
  50.         display: grid;
  51.         /* 自动填充,可以间接实现媒体查询的效果 */
  52.         /* auto-fill: 将项目全部填充到容器中 */
  53.         /* auto-fit: 忽略空的项目 */
  55.         /* 设置自动填充 行 */
  56.         grid-template-columns: repeat(auto-fill, 250px);
  57.         /* 设置自动填充 列 */
  58.         grid-template-rows: repeat(auto-fit, 280px);
  59.         /* 设置平均对齐 水平方向 */
  60.         justify-content: space-evenly;
  61.         /* 设置平均对齐 垂直方向 */
  62.         align-content: space-evenly;
  63.         /* 行内间距 */
  64.         gap: 25px;
  65.       }
  67.       .container img {
  68.         width: 100%;
  69.       }
  71.       .container > .item {
  72.         /* 内间距 */
  73.         padding: 10px;
  74.         /* 背景颜色 */
  75.         background-color: #eee;
  76.         /* 加个圆角 */
  77.         border-radius: 10px;
  78.         /* 设置容器 */
  79.         display: flex;
  80.         /* 方向调整 主轴调整到列轴上 nowrap不换行 */
  81.         flex-flow: column nowrap;
  82.         /* 所有项目居中对齐 */
  83.         align-items: center;
  84.         /* 所有项目居中对齐 */
  85.         justify-content: center;
  86.       }
  87.       /* hover 鼠标移动上去的效果 */
  88.       .container > .item:hover {
  89.         /* 阴影 */
  90.         box-shadow: 0 0 10px #555;
  91.         /* 宽度增加0.2倍 */
  92.         width: calc(100% * 1.02);
  93.         /* 背景色 */
  94.         background-color: rgb(231, 241, 90);
  95.       }
  96.     </style>
  97.   </head>
  98.   <body>
  99.     <h1>小飞的相册</h1>
  100.     <div class="container">
  101.       <div class="item">
  102.         <a href=""><img src="static/images/girl.jpg" alt="" /></a>
  103.         <a href="">中国美女1</a>
  104.       </div>
  105.       <div class="item">
  106.         <a href=""><img src="static/images/222.jpg" alt="" /></a>
  107.         <a href="">中国美女2</a>
  108.       </div>
  109.       <div class="item">
  110.         <a href=""><img src="static/images/333.jpg" alt="" /></a>
  111.         <a href="">中国美女3</a>
  112.       </div>
  113.       <div class="item">
  114.         <a href=""><img src="static/images/444.jpg" alt="" /></a>
  115.         <a href="">中国美女4</a>
  116.       </div>
  117.       <div class="item">
  118.         <a href=""><img src="static/images/555.jpg" alt="" /></a>
  119.         <a href="">中国美女5</a>
  120.       </div>
  121.       <div class="item">
  122.         <a href=""><img src="static/images/666.jpg" alt="" /></a>
  123.         <a href="">中国美女6</a>
  124.       </div>
  125.       <div class="item">
  126.         <a href=""><img src="static/images/777.jpg" alt="" /></a>
  127.         <a href="">中国美女7</a>
  128.       </div>
  129.       <div class="item">
  130.         <a href=""><img src="static/images/888.jpg" alt="" /></a>
  131.         <a href="">中国美女8</a>
  132.       </div>
  133.       <div class="item">
  134.         <a href=""><img src="static/images/999.jpg" alt="" /></a>
  135.         <a href="">中国美女9</a>
  136.       </div>
  137.       <div class="item">
  138.         <a href=""><img src="static/images/000.jpg" alt="" /></a>
  139.         <a href="">中国美女10</a>
  140.       </div>
  141.       <div class="item">
  142.         <a href=""><img src="static/images/01.jpg" alt="" /></a>
  143.         <a href="">中国美女11</a>
  144.       </div>
  145.       <div class="item">
  146.         <a href=""><img src="static/images/02.jpg" alt="" /></a>
  147.         <a href="">中国美女12</a>
  148.       </div>
  149.     </div>
  150.   </body>
  151. </html>

效果：

动态：

二、12格栅布局

代码：

  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>12列栅格布局</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body {
  15.         display: flex;
  16.         /* 水平垂直居中 */
  17.         justify-content: center;
  18.         align-items: center;
  19.         /* 视口 */
  20.         max-width: 100vw;
  21.         min-height: 100vh;
  22.       }
  24.       .container {
  25.         min-width: 1000px;
  27.         /* 网格布局, 默认创建的是一列多行 */
  28.         display: grid;
  29.         /* 行间距 */
  30.         gap: 5px;
  31.       }
  33.       .container > .row {
  34.         display: grid;
  35.         /* 默认将网格容器划分12等份 */
  36.         grid-template-columns: repeat(12, 1fr);
  37.         gap: 5px;
  38.         min-height: 50px;
  39.       }
  40.       .container > .row > .item {
  41.         background-color: lightblue;
  42.         padding: 10px;
  43.         border: 1px solid;
  44.       }
  46.       /* 常用网格列样式 */
  47.       .col-1 {
  48.         /* 项目从当前默认位置开始放置,所以起始列编号可省略 */
  49.         grid-column-end: span 1;
  50.       }
  51.       .col-2 {
  52.         grid-column-end: span 2;
  53.       }
  54.       .col-3 {
  55.         grid-column-end: span 3;
  56.       }
  57.       .col-4 {
  58.         grid-column-end: span 4;
  59.       }
  60.       .col-5 {
  61.         grid-column-end: span 5;
  62.       }
  63.       .col-6 {
  64.         grid-column-end: span 6;
  65.       }
  66.       .col-7 {
  67.         grid-column-end: span 7;
  68.       }
  69.       .col-8 {
  70.         grid-column-end: span 8;
  71.       }
  72.       .col-9 {
  73.         grid-column-end: span 9;
  74.       }
  75.       .col-10 {
  76.         grid-column-end: span 10;
  77.       }
  78.       .col-11 {
  79.         grid-column-end: span 11;
  80.       }
  81.       .col-12 {
  82.         grid-column-end: span 12;
  83.       }
  84.     </style>
  85.   </head>
  86.   <body>
  87.     <div class="container">
  88.       <!-- 第一步:创建行 -->
  89.       <div class="row">
  90.         <!-- 第二行: 划分列 -->
  91.         <span class="item col-1">1</span>
  92.       </div>
  93.       <div class="row">
  94.         <!-- 第二行: 划分列 -->
  95.         <span class="item col-2">2</span>
  96.       </div>
  97.       <div class="row">
  98.         <!-- 第二行: 划分列 -->
  99.         <span class="item col-3">3</span>
  100.       </div>
  101.       <div class="row">
  102.         <!-- 第二行: 划分列 -->
  103.         <span class="item col-4">4</span>
  104.       </div>
  105.       <div class="row">
  106.         <!-- 第二行: 划分列 -->
  107.         <span class="item col-5">5</span>
  108.       </div>
  109.       <div class="row">
  110.         <!-- 第二行: 划分列 -->
  111.         <span class="item col-6">6</span>
  112.       </div>
  113.       <div class="row">
  114.         <!-- 第二行: 划分列 -->
  115.         <span class="item col-7">7</span>
  116.       </div>
  117.       <div class="row">
  118.         <!-- 第二行: 划分列 -->
  119.         <span class="item col-8">8</span>
  120.       </div>
  121.       <div class="row">
  122.         <!-- 第二行: 划分列 -->
  123.         <span class="item col-9">9</span>
  124.       </div>
  125.       <div class="row">
  126.         <!-- 第二行: 划分列 -->
  127.         <span class="item col-10">10</span>
  128.       </div>
  129.       <div class="row">
  130.         <!-- 第二行: 划分列 -->
  131.         <span class="item col-11">11</span>
  132.       </div>
  133.       <div class="row">
  134.         <!-- 第二行: 划分列 -->
  135.         <span class="item col-12">12</span>
  136.       </div>
  137.     </div>
  138.   </body>
  139. </html>

效果：

三、整站模仿

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <!--当前文档要用到阿里字体图标-->
  6.     <link rel="stylesheet" href="font/iconfont.css" />
  7.     <link rel="stylesheet" href="image_list.css" />
  8.     <title>小飞图片站列表页</title>
  9.     <style>
  10.       /* 初始化 */
  11.       * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.       }
  16.       a {
  17.         text-decoration: none;
  18.         color: #555;
  19.       }
  20.       a:hover {
  21.         color: rgb(255, 0, 0);
  22.       }
  24.       body {
  25.         /* background-color: rgb(57, 145, 245); */
  26.       }
  27.       h1 {
  28.         /* 文字颜色 */
  29.         color: rgb(255, 1, 1);
  30.         /* 文字对齐方式 */
  31.         text-align: center;
  32.         /* 文字间距 */
  33.         letter-spacing: 5px;
  34.         /* 文字大小 */
  35.         font-size: 2.5rem;
  36.         /* 文字粗细 */
  37.         font-weight: 550;
  38.         /* 文字阴影 */
  39.         text-shadow: 4px 4px 4px #555;
  40.         /* 文字距离顶部距离 */
  41.         margin-top: 20px;
  42.       }
  44.       .container {
  45.         /* 最小宽度 */
  46.         min-width: 100vw;
  47.         /* 最小高度 */
  48.         min-height: 100vh;
  49.         /* 内间距 */
  50.         padding: 50px;
  51.         /* 设置布局方式 */
  52.         display: grid;
  53.         /* 自动填充,可以间接实现媒体查询的效果 */
  54.         /* auto-fill: 将项目全部填充到容器中 */
  55.         /* auto-fit: 忽略空的项目 */
  57.         /* 设置自动填充 行 */
  58.         grid-template-columns: repeat(auto-fill, 250px);
  59.         /* 设置自动填充 列 */
  60.         grid-template-rows: repeat(auto-fit, 280px);
  61.         /* 设置平均对齐 水平方向 */
  62.         justify-content: space-evenly;
  63.         /* 设置平均对齐 垂直方向 */
  64.         align-content: space-evenly;
  65.         /* 行内间距 */
  66.         gap: 25px;
  67.         width: 1200px;
  68.       }
  70.       .container img {
  71.         width: 100%;
  72.       }
  74.       .container > .item {
  75.         /* 内间距 */
  76.         padding: 10px;
  77.         /* 背景颜色 */
  78.         background-color: rgb(255, 255, 255);
  79.         /* 加个圆角 */
  80.         border-radius: 10px;
  81.         /* 设置容器 */
  82.         display: flex;
  83.         /* 方向调整 主轴调整到列轴上 nowrap不换行 */
  84.         flex-flow: column nowrap;
  85.         /* 所有项目居中对齐 */
  86.         align-items: center;
  87.         /* 所有项目居中对齐 */
  88.         justify-content: center;
  89.       }
  90.       /* hover 鼠标移动上去的效果 */
  91.       .container > .item:hover {
  92.         /* 阴影 */
  93.         box-shadow: 0 0 10px #555;
  94.         /* 宽度增加0.2倍 */
  95.         width: calc(100% * 1.02);
  96.         /* 背景色 */
  97.         background-color: rgb(231, 241, 90);
  98.       }
  99.     </style>
  100.   </head>
  102.   <body>
  103.     <!--公共页眉-->
  104.     <nav class="public-header">
  105.       <a href="">网站首页</a>
  106.       <a href="">专题</a>
  107.       <a href="">网站导航</a>
  108.       <a href="">二手商品</a>
  109.       <a href="">讨论区</a>
  110.       <span>
  111.         <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
  112.         <a href="">免费注册</a>
  113.       </span>
  114.     </nav>
  115.     <!--主体全部放在main元素中-->
  116.     <main>
  117.       <!--    头部-->
  118.       <div class="image-public-header">
  119.         <div class="content">
  120.           <h2>小飞</h2>
  121.           <span>图片站</span>
  122.           <div class="search">
  123.             <input type="search" id="search" placeholder="搜索关键字" />
  124.             <label class="iconfont icon-sousuo2" for="search"></label>
  125.           </div>
  126.         </div>
  127.       </div>
  129.       <!--引入大标题组件-->
  130.       <h1>小飞的相册</h1>
  131.       <div class="container">
  132.         <div class="item">
  133.           <a href=""><img src="images/girl.jpg" alt="" /></a>
  134.           <a href="">中国美女1</a>
  135.         </div>
  136.         <div class="item">
  137.           <a href=""><img src="images/222.jpg" alt="" /></a>
  138.           <a href="">中国美女2</a>
  139.         </div>
  140.         <div class="item">
  141.           <a href=""><img src="images/333.jpg" alt="" /></a>
  142.           <a href="">中国美女3</a>
  143.         </div>
  144.         <div class="item">
  145.           <a href=""><img src="images/444.jpg" alt="" /></a>
  146.           <a href="">中国美女4</a>
  147.         </div>
  148.         <div class="item">
  149.           <a href=""><img src="images/555.jpg" alt="" /></a>
  150.           <a href="">中国美女5</a>
  151.         </div>
  152.         <div class="item">
  153.           <a href=""><img src="images/666.jpg" alt="" /></a>
  154.           <a href="">中国美女6</a>
  155.         </div>
  156.         <div class="item">
  157.           <a href=""><img src="images/777.jpg" alt="" /></a>
  158.           <a href="">中国美女7</a>
  159.         </div>
  160.         <div class="item">
  161.           <a href=""><img src="images/888.jpg" alt="" /></a>
  162.           <a href="">中国美女8</a>
  163.         </div>
  164.         <div class="item">
  165.           <a href=""><img src="images/999.jpg" alt="" /></a>
  166.           <a href="">中国美女9</a>
  167.         </div>
  168.         <div class="item">
  169.           <a href=""><img src="images/000.jpg" alt="" /></a>
  170.           <a href="">中国美女10</a>
  171.         </div>
  172.         <div class="item">
  173.           <a href=""><img src="images/01.jpg" alt="" /></a>
  174.           <a href="">中国美女11</a>
  175.         </div>
  176.         <div class="item">
  177.           <a href=""><img src="images/02.jpg" alt="" /></a>
  178.           <a href="">中国美女12</a>
  179.         </div>
  180.       </div>
  181.       <!--    分页条-->
  182.       <div class="public-paginate">
  183.         <a href="">&lt;</a>
  184.         <a href="">1</a>
  185.         <a href="">2</a>
  186.         <a href="">3</a>
  187.         <a href="">4</a>
  188.         <a href="">5</a>
  189.         <a href="">6</a>
  190.         <a href="">7</a>
  191.         <a href="">8</a>
  192.         <a href="">&gt;</a>
  193.       </div>
  194.     </main>
  195.     <!--公共页脚-->
  196.     <footer class="public-footer">
  197.       <div>
  198.         <a href="">简介</a>
  199.         <a href="">联系我们</a>
  200.         <a href="">招聘信息</a>
  201.         <a href="">友情链接</a>
  202.         <a href="">用户服务协议</a>
  203.         <a href="">隐私权声明</a>
  204.         <a href="">法律投诉声明</a>
  205.       </div>
  206.       <div><span>LOGO</span></div>
  207.       <div>
  208.         <p>
  209.           2019 fengniao.com. All rights reserved .
  210.           安徽闹着玩有限公司（无聊网）版权所有
  211.         </p>
  212.         <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
  213.         <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
  214.       </div>
  215.       <div>
  216.         <p>关注公众号</p>
  217.         <img src="../images/erwei-code.png" alt="" />
  218.       </div>
  219.     </footer>
  220.   </body>
  221. </html>

效果：

总结：使用格栅布局+容器写出一个页面比传统div命名写要效率高的多，继续加深学习课堂老师教的知识。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这个作业很用心, 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post