简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Grid实现响应式相册与制作十二列栅格模仿华为首页

Grid实现响应式相册与制作十二列栅格模仿华为首页

Tlilam的PHP之路
Tlilam的PHP之路原创
2020年08月14日 13:22:521023浏览

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方面还需加强
上一条：获取页面元素的5种方式-js-39课8.13下一条：使用Cookie和PDO实现用户登陆退出案例-7月17日作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多