用户投稿这次的练习是用 SMASS 跟 OOCSS 还有 BEM 的概念来练习，
要呈现是下方的画面
但我觉得有点单调，所以我就把它优化了变成这样
HTML 本身不难，难的是 CSS，
HTML 程式码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Scss#60_Practice</title> <link rel="stylesheet" href="css/all.css"></head><body> <div class="header"> <div class="container"> <div class="header__logo"><a href="#">LOGO</a> </div> <ul class="header__menu"> <li><a href="#" target="_blank">品项</a></li> <li><a href="#" target="_blank">品项</a></li> <li><a href="#" target="_blank">品项</a></li> <li><a href="#" target="_blank">品项</a></li> </ul> </div> </div> <div class="content"> <div class="container flex"> <div class="col-7"> <div class="item"> <img src="https://images.unsplash.com/photo-1569937756023-a079ccbe730e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" class="item__img"> <div class="item__body"> <h2 class="item__body__title"> 舒适的用餐环境 </h2> <p> 我爱去年定义反馈疾病凯文神话到来，收费讨论区然后每日提出了，感情权力点点批发作为适合装备亿元不禁走进互动，天使内存满意吃了忍不住不可以皇帝。 </p> </div> </div> <div class="item"> <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" class="item__img"> <div class="item__body"> <h2 class="item__body__title"> 美味的经典美食 </h2> <p> 出现在大战感兴趣，基本岁月能在确保之下室内指挥下载地址思路依法无比用品令人表达，眼前促销推进这一本来那个体内十二求助愿意西方对待，成员有意。 </p> </div> </div> </div> <div class="col-3"> <div class="picImg"> <img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=687&q=80" alt=""> <div class="picImg__p">TOP 1</div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <p> 内存没人资料库準备乌日才会不好意思允许寂寞，海外好激动你是证据隐藏版看过精美一颗社区根据校园屏幕，改善出口从而加入时间保证感动，原始码学者日期一遍网站人员，次数遇到更多众人数码相机支持兄弟尤其是主人，两位一样我一共享重複五年就是，有的因为除了，内容简介之。 </p> </div> </div></body></html>这段程式码虽然不难，但在撰写的过程中，还是要考虑到整个架构还有共通项目的命名，虽然是命名练习，但还是尽量不要太冗长。
SCSS 程式码如下
@import"reset";$font-M: 14px;$font-L: $font-M*2;$font-S: $font-M*0.7;$color-primary:#82b844;//变数* { boxsizing: border-box;}body { background-color: #eeeeee; line-height: 1.5;}.container { width: 640px; margin: 0 auto; height: auto; // 使用 float 如果再用 flex 会让 float 功能被覆盖而失效}.flex{ display: flex; // 用 flex 来让 content 两个 div 平行}.clearfix { clear: both;}.col-7 { width: 67%; margin-right: 3%;}.col-3 { width: 30%; float: right;}img { background-repeat: no-repeat; background-size: cover; background-position: center center;}a { text-decoration: none;}//全域设定.header { height: 50px; background-color: $color-primary; &__logo { float: left; margin-left: 1em; a { line-height: 50px; text-align: center; color: #fff; } } &__menu { float: right; li { float: left; } a { margin: 0 15px; color: #fff; line-height: 50px; &:hover { border-bottom: 3px solid #ceff1d; padding-bottom: 15px; } } }}.content { margin-top: 10px;}.item { display: flex; margin-bottom: 5px; &__img { width: 96px; height: 96px; margin-right: 10px; } &__body { &__title { font-size: $font-L; font-weight: bold; margin-top: 0; margin-bottom: 10px; color: $color-primary; } p { font-size: $font-M; display: inline-block; margin-top: 0; margin-bottom: 0; color: #333; } }}.picImg { position: relative; img { width: 208px; height: 208px; } &__p { position: absolute; right: 0; top: 0; width: 60px; height: 60px; transform: translate(80%, -60%); // 搭配绝对定位使用的位移语法 border-radius: 50%; border: 3px solid $color-primary; background-color: #ffffb4; /*文字 用flex置中*/ display: flex; align-items: center; justify-content: center; // 用 flex + align-items 的置中写法 color: $color-primary; font-weight: bold; }}.footer { padding: 1em; background-color: $color-primary; color: #fff; margin-top: 30px;}codepen https://codepen.io/hnzxewqw/pen/ExYqYyB
微信扫一扫打赏
支付宝扫一扫打赏
