发新贴  快速回复

做完了,老师给指点下,看哪还需要改进,我做的时候顺便优化了下代码。

  ら樱雪之城ペ
2017-07-17 13:07

<!doctype html>
<html>
<head>
<style>
    .null{width: 500px;border-top: 2px solid #f19552}
    .div1{height: 122px;}
    .div2{height: 121px;}
    .div3{height:120px;}
    .div4{height: 119px;}
    .div5{height: 196px;}
    .div6{height: 195px;}
    .div7{height: 180px;}
    .div1,.div3,.div5,.div7{border-left:2px solid #e15671;border-right:2px solid #e15671}
    .div2,.div4,.div6{border-bottom: 1px solid #8c1f34}
    .div8{height: 178px;border-bottom: 2px solid #e15671}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div class="null">
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3">
        <div class="div4"></div>
    </div>
    <div class="div5">
        <div class="div6"></div>
    </div>
    <div class="div7">
        <div class="div8"></div>
    </div>
</div>
</body>
</html>

本帖内容针对以下视频发布:

5-边框(border)练习
 
宋承龙

恭喜你,效果做得非常完整,代码层面上看很漂亮,群组选择器用得非常到位,一点小问题稍微注意一下

就是结构这一块稍微有点欠缺

你这里用了太多个层级,每一个小盒子都是两层,其实是没有必要的

首先一个盒子只给上面的边框,然后呢,另外一个盒子写左右下两个像素的边框,在这个盒子里面再去包含几个小的一个像素边框的盒子就可以了,这样结构会稍微清晰一点哦,也就节省一些标签

2017-07-19 16:44  回复本帖
登录 后才可以发表回复