Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2020年流行的影视相册案例，flex响应式呈现，太漂亮了！
Blogger Information
Blog 65
fans 2
comment 0
visits 60214
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
2020年流行的影视相册案例，flex响应式呈现，太漂亮了！
张福根一修品牌运营
Original
1309 people have browsed it

仿写影视相册案例,属性都添加上注释

效果展示：

影视相册

源码参考：

  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.       body {
  15.         /* 转化盒子 */
  16.         display: flex;
  17.         /* 垂直水平居中 */
  18.         justify-content: center;
  19.         align-items: center;
  20.         /* 最小高度100%视口 */
  21.         min-height: 100vh;
  22.         background-color: lightblue;
  23.       }
  24.       .container {
  25.         display: flex;
  26.         width: 1000px;
  27.         /* 各项周围留有空白 */
  28.         justify-content: space-between;
  29.         /* 居中对齐弹性盒的各项  */
  30.         align-items: center;
  31.         /* 允许换行 */
  32.         flex-flow: row wrap;
  33.         margin: 3em;
  34.       }
  35.       .container .box {
  36.         width: 20em;
  37.         height: 24em;
  38.         margin: 1em;
  39.         background-color: lightgreen;
  40.         /* 弹性盒子，居中 */
  41.         display: flex;
  42.         justify-content: center;
  43.         align-items: center;
  44.       }
  45.       .container .box .content {
  46.         padding: 2em;
  47.         text-align: center;
  48.       }
  49.       .container .box .content .quto {
  50.         /* 逗号图标尺寸 */
  51.         max-width: 3em;
  52.       }
  53.       .container .box .content .user {
  54.         max-width: 4em;
  55.         /* 图片圆形 */
  56.         border-radius: 50%;
  57.       }
  58.       /* 媒体查询宽度配置 */
  59.       @media screen and (max-width: 1000px) {
  60.         .container {
  61.           justify-content: center;
  62.         }
  63.       }
  64.       @media screen and (max-width: 800px) {
  65.         .container .box {
  66.           width: 100%;
  67.           height: auto;
  68.           padding: 30px 20px;
  69.         }
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <div class="container">
  75.       <div class="box">
  76.         <div class="content">
  77.           <img src="static/images/quto.png" alt="" class="quto" />
  78.           <p>
  79.             《大话西游之大圣娶亲》（又名《大话西游之仙履奇缘》）是周星驰彩星电影公司1994年制作和出品的一部经典的无厘头搞笑爱情片...
  80.           </p>
  81.           <img src="static/images/1.jpg" alt="" class="user" />
  82.           <h3>大圣娶亲-朱茵</h3>
  83.         </div>
  84.       </div>
  86.       <div class="box">
  87.         <div class="content">
  88.           <img src="static/images/quto.png" alt="" class="quto" />
  89.           <p>
  90.             《仙剑奇侠传三》故事发生在《仙剑》第一代的五十年前，那时候，李三思刚刚发出赤子的第一声啼哭；巫后还是襁褓中的婴儿，而剑圣，则还没有..
  91.           </p>
  92.           <img src="static/images/2.jpg" alt="" class="user" />
  93.           <h3>仙剑奇侠传-刘思思</h3>
  94.         </div>
  95.       </div>
  97.       <div class="box">
  98.         <div class="content">
  99.           <img src="static/images/quto.png" alt="" class="quto" />
  100.           <p>
  101.             未来久益一修还将在更多城市开展连锁经营，为更多的客户提供我们的标准化、高品质服务
  102.           </p>
  103.           <img src="static/images/3.jpg" alt="" class="user" />
  104.           <h3>没名气的男演员</h3>
  105.         </div>
  106.       </div>
  107.     </div>
  108.   </body>
  109. </html>

案例总结：

web前端开发技巧：多练习、多仿写、多总结，熟练生巧…

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