search

博客列表 >html学习：4.14作业，相册、12格栅、实战整站网站

html学习：4.14作业，相册、12格栅、实战整站网站

王小飞
王小飞原创
2020年05月25日 17:55:36837浏览

一、我的相册案例（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命名写要效率高的多，继续加深学习课堂老师教的知识。

上一条：CORS跨域请求与JSONP跨域请求下一条：nginx if指令 和 常用的判断条件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多