仿写影视相册案例,属性都添加上注释
效果展示：
源码参考：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>仿写影视相册案例,属性都添加上注释</title><style>* {/* 初始化 */margin: 0;padding: 0;box-sizing: border-box;}body {/* 转化盒子 */display: flex;/* 垂直水平居中 */justify-content: center;align-items: center;/* 最小高度100%视口 */min-height: 100vh;background-color: lightblue;}.container {display: flex;width: 1000px;/* 各项周围留有空白 */justify-content: space-between;/* 居中对齐弹性盒的各项 */align-items: center;/* 允许换行 */flex-flow: row wrap;margin: 3em;}.container .box {width: 20em;height: 24em;margin: 1em;background-color: lightgreen;/* 弹性盒子，居中 */display: flex;justify-content: center;align-items: center;}.container .box .content {padding: 2em;text-align: center;}.container .box .content .quto {/* 逗号图标尺寸 */max-width: 3em;}.container .box .content .user {max-width: 4em;/* 图片圆形 */border-radius: 50%;}/* 媒体查询宽度配置 */@media screen and (max-width: 1000px) {.container {justify-content: center;}}@media screen and (max-width: 800px) {.container .box {width: 100%;height: auto;padding: 30px 20px;}}</style></head><body><div class="container"><div class="box"><div class="content"><img src="static/images/quto.png" alt="" class="quto" /><p>《大话西游之大圣娶亲》（又名《大话西游之仙履奇缘》）是周星驰彩星电影公司1994年制作和出品的一部经典的无厘头搞笑爱情片...</p><img src="static/images/1.jpg" alt="" class="user" /><h3>大圣娶亲-朱茵</h3></div></div><div class="box"><div class="content"><img src="static/images/quto.png" alt="" class="quto" /><p>《仙剑奇侠传三》故事发生在《仙剑》第一代的五十年前，那时候，李三思刚刚发出赤子的第一声啼哭；巫后还是襁褓中的婴儿，而剑圣，则还没有..</p><img src="static/images/2.jpg" alt="" class="user" /><h3>仙剑奇侠传-刘思思</h3></div></div><div class="box"><div class="content"><img src="static/images/quto.png" alt="" class="quto" /><p>未来久益一修还将在更多城市开展连锁经营，为更多的客户提供我们的标准化、高品质服务</p><img src="static/images/3.jpg" alt="" class="user" /><h3>没名气的男演员</h3></div></div></div></body></html>
案例总结：
web前端开发技巧：多练习、多仿写、多总结，熟练生巧…