简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Grid实现响应式相册与制作十二列栅格模仿华为首页
Blogger Information
Blog 39
fans 0
comment 2
visits 47043
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Grid实现响应式相册与制作十二列栅格模仿华为首页
Tlilam的PHP之路
Original
1024 people have browsed it

grid制作响应式网络相册

html代码：

  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>
  8. </head>
  9. <body>
  10.     <h1>跑车相册</h1>
  11.     <div class="container">
  12.       <div class="item box">
  13.         <a href=""><img src="http://pic1.win4000.com/wallpaper/8/58ac089795b71_270_185.jpg" alt="" /></a>
  14.         <a href="">法拉利812</a>
  15.       </div>
  16.       <div class="item">
  17.         <a href=""><img src="http://pic1.win4000.com/wallpaper/c/584f5405ee753_270_185.jpg" alt="" /></a>
  18.         <a href="">科尼塞克agera</a>
  19.       </div>
  20.       <div class="item">
  21.         <a href=""><img src="http://pic1.win4000.com/wallpaper/6/584f5398e4963_270_185.jpg" alt="" /></a>
  22.         <a href="">科尼塞克agera</a>
  23.       </div>
  24.       <div class="item">
  25.         <a href=""><img src="http://pic1.win4000.com/wallpaper/f/58352b856ce36_270_185.jpg" alt="" /></a>
  26.         <a href="">2016款兰博基尼</a>
  27.       </div>
  28.       <div class="item">
  29.         <a href=""><img src="http://pic1.win4000.com/wallpaper/e/582fe7704249b_270_185.jpg" alt="" /></a>
  30.         <a href="">道奇蝰蛇</a>
  31.       </div>
  32.       <div class="item">
  33.         <a href=""><img src="http://pic1.win4000.com/wallpaper/c/5811c676042e9_270_185.jpg" alt="" /></a>
  34.         <a href="">2016款布加迪</a>
  35.       </div>
  36.       <div class="item">
  37.         <a href=""><img src="http://pic1.win4000.com/wallpaper/0/57fb03c57b7d4_270_185.jpg" alt="" /></a>
  38.         <a href="">保时捷经典超跑911</a>
  39.       </div>
  40.       <div class="item">
  41.         <a href=""><img src="http://pic1.win4000.com/wallpaper/e/57182abb1ab10_270_185.jpg" alt="" /></a>
  42.         <a href="">道奇Viper ACR</a>
  43.       </div>
  44.       <div class="item">
  45.         <a href=""><img src="http://pic1.win4000.com/wallpaper/2/57d272fcbef96_270_185.jpg" alt="" /></a>
  46.         <a href="">法拉利488 </a>
  47.       </div>
  48.       <div class="item">
  49.         <a href=""><img src="http://pic1.win4000.com/wallpaper/2/570724d3b1a42_270_185.jpg" alt="" /></a>
  50.         <a href="">柯尼塞格</a>
  51.       </div>
  52.     </div>
  53. </body>
  54. </html>

css样式：

  1.    *{
  2.             padding: 0 ;
  3.             margin: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         a{
  7.             text-decoration: none;
  8.             color: #333;
  9.         }
  10.         body{
  11.             background-color: lightseagreen;
  12.         }
  13.         h1{
  14.             color: white;
  15.             text-align: center;
  16.             font-size: 2.5rem;
  17.             margin-top: 20px;
  18.             text-shadow: 2px 2px 2px #333;
  19.         }
  20.         .container{
  21.             display: grid;
  22.             min-width: 100vw;
  23.             min-height: 100vh;
  24.             padding: 50px;
  26.             /* 自动填充数量 列宽250PX 行高180px */
  27.             grid-template-columns: repeat(auto-fill,280px);
  28.             grid-template-rows: repeat(auto-fill,220px);
  29.             /* 设置行和列的对齐方式 平均对齐 */
  30.             place-content: space-evenly;
  32.             /* 设置行和列间距 */
  33.             gap: 30px;
  34.         }
  35.         /* 设置图片宽度百分百，并设置圆角5px */
  36.         .container img{
  37.             width: 100%;
  38.             border-radius: 5px;
  39.         }
  40.         .container > .item{
  41.             /* item背景色和 padding制造出边框效果，设置10px圆角 */
  42.             background-color: #eee;
  43.             padding: 10px;
  44.             border-radius: 10px;
  46.             /* 设置flex 处理细节 文本和图片的对齐关系 */
  47.             display: flex;
  48.             flex-flow: column nowrap;
  49.             justify-content: center;
  50.             align-items: center;
  52.             /*设置整个item 鼠标图标改为手势 */
  53.             cursor: pointer;
  54.         }
  55.         .container >.item:hover{
  56.             /* 发光效果 */
  57.             box-shadow: 0 0 15px #eee;
  58.             /* 改变盒子宽度，制作出变大效果 */
  59.             width: calc(100% * 1.02);
  60.             background-color: lightcyan;
  61.         }

运行效果：

grid十二栅格模仿华为首页

html代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>使用flex和grid十二格模仿华为官网</title>
  5.     <!-- 华为官网的图标 -->
  6.     <link rel="stylesheet" type="text/css" href="https://www.huawei.com/Assets/corp/2020/css/common.css?ver=202008012338">
  7.     <!-- 自定义的css样式表 -->
  8.     <link rel="stylesheet" href="css/grid-huawei.css">
  9. </head>
  10. <body>
  11.     <div class="top">
  12.         <div>
  13.             <a href=""><span class="iconfont icon-header-linkgroup-new"></span>集团网站<span class="iconfont icon-arrow-down hidden-xs hidden-sm"></span></a>
  14.             <a href=""><span class="iconfont icon-header-language-new"></span>选择区域/语言<span class="iconfont icon-arrow-down hidden-xs hidden-sm"></span></a>
  15.             <a href=""><span class="iconfont icon-header-login" style=""></span>登录</a>
  16.         </div>
  17.     </div>
  18.     <header>
  19.         <div><a href=""><img src="https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png"></a></div>
  20.         <div>
  21.             <a href="">个人及家庭产品</a>
  22.             <a href="">商用产品及方案</a>
  23.             <a href="">服务支持</a>
  24.             <a href="">合作伙伴与开发者</a>
  25.             <a href="">关于华为</a>
  26.         </div>
  27.         <div>
  28.             <a href=""><span class="iconfont icon-bags" style="font-size: 1.2rem;" ></span><span>在线购买</span><span class="iconfont icon-arrow-down"></span> </a>
  29.             <a href="" style="margin-left: 15px; "><span class="iconfont icon-search" style="font-size: 1.3rem; " ></span></a>
  30.         </div>
  31.     </header>
  32.     <div class="slide">
  33.         <div class="slideimg">
  34.             <div class="mask"></div>
  35.             <img src="https://www-file.huawei.com/-/media/corp2020/home/banner/2/hc2020-cn.jpg"></div>
  36.         <div class="btn-group slidebox1"><a href="">了解更多</a> </div>
  37.         <div class="slideprev"><a href=""><span style="color: #c7000b;font-size: 2rem;" > < </span></a></div>
  38.         <div class="slidenext"><a href=""><span style="color: #c7000b;font-size: 2rem;" > > </span></a></div>
  39.         <div class="pagination">
  40.             <a href=""><div class="progress-div"><div></div> </div></a>
  41.             <a href=""><div class="progress-div"><div></div> </div></a>
  42.             <a href=""><div class="progress-div"><div></div> </div></a>
  43.         </div>
  45.     </div>
  47.     <div class="container imgshow ">
  48.         <div class="row">
  49.             <!-- 12栅格 -->
  50.             <div class="item col-12"><h2>推荐信息</h2></div>
  51.             <!-- 84栅格 -->
  52.             <div class="item col-8">
  53.                 <div class="mask"></div>
  54.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/box/1/p40pro-5g-pc2.jpg"></div>
  55.                 <div  class="text-box" >
  56.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  57.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  58.                 </div>
  59.             </div>
  60.             <div class="item col-4">
  61.                 <div class="mask"></div>
  62.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/banner/featured_nova7.jpg"></div>
  63.                 <div  class="text-box" >
  64.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  65.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  66.                 </div>
  67.             </div>
  68.             <!-- 48栅格 -->
  69.             <div class="item col-4">
  70.                 <div class="mask"></div>
  71.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/banner/matepad-pro-pc.jpg"></div>
  72.                 <div  class="text-box" >
  73.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  74.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  75.                 </div>
  76.             </div>
  77.             <div class="item col-8">
  78.                 <div class="mask"></div>
  79.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/box/1/5g-china-tour.jpg"></div>
  80.                 <div  class="text-box" >
  81.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  82.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  83.                 </div>
  84.             </div>
  85.             <!-- 444栅格 -->
  86.             <div class="item col-4">
  87.                 <div class="mask"></div>
  88.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/box/1/huawei-live.gif"></div>
  89.                 <div  class="text-box" >
  90.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  91.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  92.                 </div>
  93.             </div>
  94.             <div class="item col-4">
  95.                 <div class="mask"></div>
  96.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/box/1/boxbanner-pengan.jpg"></div>
  97.                 <div  class="text-box" >
  98.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  99.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  100.                 </div>
  101.             </div>
  102.             <div class="item col-4">
  103.                 <div class="mask"></div>
  104.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/box/1/f5g.jpg"></div>
  105.                 <div  class="text-box" >
  106.                     <p>华为直播</p><div class="text-box-h">智向万千，直击未来</div> <p>5G重构创造力</p>
  107.                     <div style="margin-bottom: -50px; padding-top: 20px;">了解更多 <span style="color: #c7000b;">></span> </div>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.     </div>
  112.     <div class="slide">
  113.         <img src="https://www-file.huawei.com/-/media/corp2020/home/sbanner/1/sbanner-pengan-cn.jpg">
  114.         <div class="btn-group slidebox2"><a href="">了解更多</a> </div>
  115.     </div>
  116.     <div class="container">
  117.         <div class="row">
  118.             <!-- 12栅格 -->
  119.             <div class="item col-12"><h2>新闻与活动</h2></div>
  121.             <div class="item col-4 listbox " >
  122.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/event/1/f5g2020.jpg"></div>
  123.                 <div class="type"><span>活动</span></div>
  124.                 <div class="textbox">
  125.                     <div class="title">    拥抱F5G，筑新基建之“基”    </div>
  126.                     <div class="info"> <div class="address"><span>标</span><span>线上直播</span></div> <div class="info"><span>标</span><span>2020年8月13日</span></div>     </div>
  127.                     <div class="text">畅谈F5G时代下的新生活、新机遇</div>
  128.                 </div>
  129.             </div>
  130.             <div class="item col-4 listbox">
  131.                 <div class="img-box"><img src="https://www-file.huawei.com/-/media/corp2020/home/event/1/5gforgood-cn4.png"></div>
  132.                 <div class="type"><span>展会活动</span></div>
  133.                 <div class="textbox">
  134.                     <div class="title">
  135.                         5“机”峰会 新价值 新机遇
  136.                     </div>
  137.                     <div class="info"> <div class="address"><span>线上直播</span></div> <div class="info"><span>日期</span></div>     </div>
  138.                     <div class="text">
  139.                         5G掘金五大产业机遇，<br> 联接 · 云 · AI · 计算 · 行业应用 </div>
  140.                 </div>
  141.             </div>
  142.             <div class="item col-4 listnewbox">
  143.                 <div class="type"><span>新闻</span></div>
  144.                 <div class="listnew">
  145.                     <a href=""><h4>全球首个FDD NR 40MHz（2.1GHz 频段）创新解决方案落地深圳，深圳电信携手华为打造5G极致体验创新试点
  146.                                     </h4><div class="time" >2020年8月12日</div></a>
  147.                     <a href=""><h4>全球首个FDD NR 40MHz（2.1GHz 频段）创新解决方案</h4><div class="time" >2020年8月12日</div></a>
  148.                     <a href=""><h4>全球首个FDD NR 40MHz（2.1GHz 频段）创新解决方案</h4><div class="time" >2020年8月12日</div></a>
  149.                     <a href=""><h4>全球首个FDD NR 40MHz（2.1GHz 频段）创新解决方案</h4><div class="time" >2020年8月12日</div></a>
  150.                 </div>
  151.             </div>
  152.             <div class="item col-3"></div>
  153.             <div class="item col-6 btn"><div class="btn-group"><a href="">更多活动</a> <a href="">更多新闻</a></div> </div>
  154.             <div class="item col-3"></div>
  155.         </div>
  156.     </div>
  158.     <footer>
  159.         <span>©2020 华为技术有限公司</span>
  160.         <span><a href="">粤A2-20044005号</a> <a href="">粤公网安备  44030702002388号</a></span> |
  161.         <span><a href=""> 联系我们 </a><a href=""> 法律声明</a>  <a href="">隐私保护 </a>     <a href="">除名查询</a></span>
  162.     </footer>
  163. </body>
  164. </html>

css代码：

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6. a{
  7.     text-decoration: none;
  8.     color: rgb(51, 51, 51);
  9. }
  10. body{
  11.     /* 设置flex */
  12.     display: flex;
  13.     /* 主轴方向为垂直 不换行 */
  14.     flex-flow: column nowrap;
  15.     /* 设置主轴方向居中 */
  16.     justify-content: center;
  17.     /* 设置侧轴方向居中 */
  18.     align-items: center;
  19.     font-family: "microsoft YaHei";
  20. }
  23. /*栅格代码开始*/
  24. .container{
  25.     /*width: 80vw;*/
  26.     width: 75vw;
  27.     display: grid;
  28.     /*background-color: lightcyan;*/
  29.     padding: 40px 0;
  30. }
  31. .container> .row{
  32.     display: grid;
  33.     grid-template-columns: repeat(12,1fr);
  34.     grid-gap: 20px;
  35. }
  37. .col-1{
  38.     grid-column: span 1;
  39. }
  40. .col-2{
  41.     grid-column: span 2;
  42. }
  43. .col-3{
  44.     grid-column: span 3;
  45. }
  46. .col-4{
  47.     grid-column: span 4;
  48. }
  49. .col-5{
  50.     grid-column: span 5;
  51. }
  52. .col-6{
  53.     grid-column: span 6;
  54. }
  55. .col-7{
  56.     grid-column: span 7;
  57. }
  58. .col-8{
  59.     grid-column: span 8;
  60. }
  61. .col-9{
  62.     grid-column: span 9;
  63. }
  64. .col-10{
  65.     grid-column: span 10;
  66. }
  67. .col-11{
  68.     grid-column: span 11;
  69. }
  70. .col-12{
  71.     grid-column: span 12;
  72. }
  74. /*栅格代码结束*/
  77. /* 顶部黑色小条 */
  78. .top{
  79.     background-color: black;
  80.     width: 100%;
  81.     text-align: right;
  82. }
  83. .top  a{
  84.     padding-right: 25px;
  85. }
  86. .top  a, .top  a >span{
  87.     font-size: 0.7rem;
  88.     color: #ccc;
  89.     line-height: 25px;
  91. }
  92. /* end */
  94. /* 导航条 */
  95. header{
  96.     display: flex;
  97.     justify-content: space-between;
  98.     align-items: center;
  99.     width: 100%;
  100.     height: 79px;
  101.     border-bottom: 1px solid #e6e6e6;
  102.     font-size: 0.9rem;
  103.     padding: 0 20px;
  104. }
  105.     /* logo图片大小 */
  106. header img{  
  107.     height: 30px;
  108. }
  109. header > div:nth-of-type(2) >a{
  110.     padding: 28px;
  111. }
  112. header > div:nth-of-type(2) >a:hover{
  113.     border-bottom: 2px solid #c7000b;
  114. }
  115. /* end */
  117. /* 页脚 */
  118. footer{
  119.     width: 100%;
  120.     height: 50px;
  121.     align-self: center;
  122.     text-align: center;
  123.     background-color: #e6e6e6;
  124. }
  125. footer span,a{
  126.     columns: rgb(102, 102, 102);
  127.     font-size: 0.8rem;
  128. }
  129. /* end */
  131. /* 轮播图设置 */
  132.     /* 轮播图宽度设置 */
  133. .slide > .slideimg > img {
  134.     width: 100%;
  135. }
  136. .slide{
  137.     position: relative;
  138. }
  139.     /*每一个轮播图了解更多按钮设置不同的定位*/
  140. .slidebox1{
  141.     position: absolute;
  142.     top: 70%;
  143.     left:10%;
  144. }
  145.     /*每一个轮播图了解更多按钮设置不同的定位*/
  146. .slidebox2{
  147.     position: absolute;
  148.     top: 60%;
  149.     left:3%;
  150.     color: white;
  151. }
  152.     /* 中间横图的了解更多按钮设置 */
  153. .btn-group.slidebox2  a {
  154.     color: white;
  155.     padding: 10px 50px;
  156.     border: 1px solid white;
  157. }
  158.     /* 轮播图上一个按钮 */
  159. .slideprev{
  160.     position: absolute;
  161.     top: 45%;
  162.     left:0;
  163.     height: 50px;
  164.     width: 40px;
  165.     padding: 10px;
  166.     display: none;
  167. }
  168.     /* 轮播图下一个按钮 */
  169. .slidenext{
  170.     position: absolute;
  171.     top: 45%;
  172.     right: 0;
  173.     padding: 30px;
  174.     display: none;
  175. }
  176.     /* 鼠标经过轮播图显示上下页按钮 */
  177. .slideimg:hover~div{
  178.     display: inline;
  179. }
  180.     /* 轮播图底部三个小横条 最外层div */
  181. .pagination{
  182.         position: absolute;
  183.         width: 100%;
  184.         text-align: center;
  185.         margin: 0;
  186.         bottom: 0;
  187. }
  188.     /* 内层div */
  189. .progress-div{
  190.     display: inline-block;
  191.     margin: 0 5px;
  192.     padding: 20px 0;
  193.     font-size: 0.875em;
  194. }
  195.     /* 横条样式 */
  196. .progress-div>div{
  197.     width: 100px;
  198.     height: 3px;
  199.     background-color: #ccc;
  200. }
  201.     /* 播放中的选中样式 */
  202. .pagination a:nth-of-type(2) > .progress-div div{
  203.     background-color: #fff;
  204. }
  205. /* end */
  207. /* container imgshow 区域的样式设置 */
  209. /* 设置row里面的图片宽度百分百 */
  210. .row img{
  211.     width: 100%
  212. }
  213. /*图片放大*/
  214. .row  img:hover{
  215.     transform: scale(1.1); 
  216. }
  218. .item{
  219.     position: relative;
  220.     overflow: hidden;
  221. }
  222. /* imgshow第一个item 内容居中 */
  223. .imgshow .item:first-of-type{
  224.     text-align: center;
  225. }
  226. .item h2{
  227.     font-size: 2rem;
  228.     color: #333;
  229.     padding-bottom: 8px;
  230. }
  231. .item > .text-box  {
  232.     position: absolute;
  233.     bottom: 0;
  234.     left: 0;
  235.     padding: 25px 30px;  
  236.     width: 100%;
  237. }
  238. .item > .text-box * {
  239.     color: #ffffff;
  240. }
  241. .item > .text-box:hover {
  242.     height: 60%;
  243. }
  244. .item > .text-box > .text-box-h  {
  245.     font-size: 1.2rem;
  246.     font-weight: 700;
  247. }
  248. /* h2后面增加红色小横条样式 定位到h2内容下面 */
  249. .item h2:after{
  250.         content: '';
  251.         width: 10%;
  252.         height: 2px;
  253.         background-color: #c7000b;
  254.         position: absolute;
  255.         left: 50%;
  256.         margin-left: -5%;
  257.         bottom: 0;
  258. } 
  260. /* 底部三栏设置 */
  261. .img-box{
  262.     overflow: hidden;
  263. }
  264. /* 底部活动左上角标签 */
  265. .item >.type{
  266.     padding: 7px 20px;
  267.     background: url(https://www.huawei.com/Assets/corp/2020/img/exhibition/type2.png);
  268.     position: absolute;
  269.     top: 0;
  270. }
  271. .item >.type span{
  272.     width: auto;
  273.     color: #ffffff;
  274. }
  275. .item > .textbox{
  276.     padding: 25px 28px 36px 28px;
  277.     background-color: rgb(248,248,248);
  278.     height: 30Vh;
  279. }
  280. .item > .textbox > .title{
  281.     color: rgb(51, 51, 51);
  282.     font-size: 1rem;
  283.     font-weight: 700;
  284.     margin-bottom: 5px;
  285. }
  286. .item > .textbox > .info {
  287.     color: #333333;
  288.     font-size: 0.9rem;
  289.     margin-bottom: 20px;
  290.     line-height: 20px;
  291.     height: 40px;
  292. }
  293. .item > .textbox > .info > * {
  294.     display: inline-block;
  295. }
  296. .item > .textbox > .text {
  297.     color: #666666;
  298.     font-size: 0.9rem;
  299. }
  300. /* 底部新闻 */
  301. .item.listnewbox{
  302.     /*padding-top: 32px;*/
  303.     background: #f8f8f8;
  304.     overflow: auto;
  305.     height: 390px;
  306. }
  307. .listnewbox>.listnew{
  308.     padding: 32px 5px 0 5px;
  309. }
  310. .listnewbox>.listnew a{
  311.     display: block;
  312.     margin-bottom: 15px;
  313. }
  314. .listnewbox>.listnew a:hover h4{
  315.     color: #c7000b;
  316. }
  317. /* end */
  320. /* 了解更多 更多活动 更多新闻 按钮 */
  321. .btn-group > a{
  322.     display: inline-block;
  323.     padding: 10px 40px;
  324.     border: 1px solid black;
  325. }
  326. .btn-group > a:hover{
  327.     color: #fff;
  328.     background-color: #cf000b;
  329.     border: 1px solid #cf000b;
  330. }
  331. .btn-group > a:last-of-type{
  332.     margin-left: 10vw;
  333. }
  334. /* end */
  336. /*创建图片遮罩层*/
  337. .mask{
  338.     visibility: visible;
  339.     /*设置 div 元素的不透明级别：*/
  340.     opacity: 1;
  341.     height: 50%;
  342.     width: 100%;
  343.     /*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。*/
  344.     content: "";
  345.     /*linear-gradient() 函数用于创建一个线性渐变的 "图像"。*/
  346.     background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 70%);
  347.     display: block;
  348.     top: auto;
  349.     bottom: 0;
  350.     position: absolute;
  351. }

运行结果：

总结

  • 使用grid布局可以很快的进行布局，十分方便，响应式方面十分好用。
  • 华为首页有些特效没有模仿出来，这些特效属于css方面，个人的经验不足，还有一些样式属性没有摸透，不太会用，css方面还需加强
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！