本文用css的简单样式来实现边框、表格和三角形的页面展示，包括一些常用写法的学习。
边框的设置
我们先举例实现，再深入探究其中的写法。
例子.png
1 . 先总览全局
需要哪些html的标签：
<p> <div>
需要哪些css的样式：
边框的设置，其中有颜色、四周边框的显示和隐藏、背景颜色。
元素的居中设置
文字和边框的距离设置
2 .写出html
因为元素相对少，且不复杂，直接在html的body里面用div把内容包裹起来。然后div下面再嵌套四个同级的div标签，这四个div里面分别嵌套一个p标签，p标签里面写入文本。具体如下：
html1.png
3 .写出css样式
我们先把整个页面元素全部居中，设置<body>下的子代<div class="layout">,然后css中设置其块级元素margin=0 auto居中。如下：
HTML2.png
其中width：600px设置整个块级元素<div>的宽度
然后设置每个边框之间的距离，因为每个边框的标签都是有layout这个类别下面的div的子代，所以选择器写成 .layout>div即可，margin-top使外边框的高度改变，我们设置成30px。如下：
html3.png
现在所有的段落位置就就位了，我们只要对每个段落的文本框进行编辑就可以了。设置各个包裹<p>标签的div类别分别为h-container、h-container style-1、h-container style-2、h-container style-3。如图：
html1.png
从上图可以看出如果对.h-container进行样式编辑，则可以对所有含有.h-container类别的标签进行设置样式。
第一个边框有很细的灰色的实线边框，四个角为小幅度圆角，行高1.5倍，还要设置内边距的距离，写法如下：
html4.png
有朋友会问，你这样写下面不是全部会变成一样的格式吗？
是的，下面确实变成一样的格式，但是接下来我们设置下面表格的样式使用的是.h-container.style-n的方式，我们知道当同时具备相同类别的样式设置时，权重大的生效，此时后者有两个类选择器，权重更重，所以会覆盖掉我们前面设置的不要的属性。
然后我们看下一个边框，背景为粉红色，左右边框是红色，上下边框没有内边距和上一个一样不做修改，没有圆角。所以写法如下：
html5.png
这里同样有一个样式覆盖的情况，同一个标签样式设置下面的样式会覆盖上面的样式，所以本边框最后并不会全部消失。
下面两个边框情况类似，所以就只放图片了：
html6.png
自此，边框页面实现。
总结
对于实现这个边框，这种写法最关键的地方在于对同一个标签的同样属性设置样式时，权重和优先级的确定。把全局通用的属性，通过权重较轻、优先级弱的选择器设置出来，再分别对个性化比较强的属性通过权重重，优先级高的标签选择器单独设置，大大减少了设置过程中的时间。
表格
我们同样再看一个例子
html7.png
1 .纵览全局
上下两个表格内容上是一模一样，样式不同；
很容易想到用表格table标签实现这个页面；
边框不一样，怎么设置出部分边框不一致，这是难点；
表格背景颜色是白灰交替，这也是难点；
2 .html
html8.png
3 .css
首先还是如上面例子一样，先设置全局属性，把字体、两个表格居中，并且设置表格的外边框。如下：
html9.png
然后这里我们发现有个问题，那就是对于表格而言，里面的每个单元格都有自己独立的边框，而在我们要求完成的样式中是公用的，所以需要让表格边框共用，就要用到border-collapse: collapsed;但有时候表格合并不了，为了以防万一可以加上border-spacing: 0。
然后把表格通用格式先写出来，如下：
html10.png
这里提示一下，关于width：100%并不是一个好主意，简单页面看不出来，一旦到页面比较复杂的时候，其宽度通常会超出，因为这个语句本身的意思是和父元素一样的宽度，但是这个可不包含margin。
然后我们再让表格的行<tr>底部的border再设置一下，防止之後表格2用borber:none;的时候消失，我们需要使用一个权重比较大的选择器。如下：
html11.png
在通用属性下，我们再次在两个表格的行下添加了权重比较重的样式，下面我们只需要对表格2使用borber:none就可以让原本通用属性边框消失，而权重重，优先级高的选择器保留，效果就类似于把上左右的边框消失。
html12.png
那么间隔的灰白色怎么解决？
我用的是伪类选择器 .h-table tr:nth-child(2n)，意思是类别为.h-table类别的table下，匹配父代为标签为tr，其tr的子代顺序为双数的子代，翻译一下就是表格里行里面为双数行数的这部分。写法如图：
html13.png
剩下的事就把样式补全
html14.png
总结
同样是使用权重和优先级的选择器方式来实现边框的隐藏和出现。
在选择白灰交替出现的行时，我们用了伪类选择器，实现了这个效果。
三角形
html15.png
1 .纵览全局
这个实现主要是考虑怎么变成三角形。这里使用的方式是边框变粗，然后里面宽高为0，但是这样的话就是个正方形，所以再把上下左右的边框变成可见或者不可见。
2 .html
html16.png
3 .css
先设置全局属性
html17.png
想要边框不可见，使用transparent
.aa{ border-top: 30px solid blue; border-left: 30px solid red; border-right: 30px solid yellow; border-bottom: 30px solid green;
} .bb{ border-top: 30px solid blue; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent;
} .cc{ border-top: 30px solid transparent; border-left: 30px solid red; border-right: 30px solid transparent; border-bottom: 30px solid transparent;
} .dd{ border-top: 30px solid transparent; border-left: 30px solid transparent; border-right: 30px solid yellow; border-bottom: 30px solid transparent;
} .ee{ border-top: 30px solid transparent; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid green;
} .ff{ border-top: 30px solid transparent; border-left: 30px solid red;
} .gg{ border-top: 30px solid transparent; border-right: 30px solid green;
}
作者：张路1806
链接：https://www.jianshu.com/p/e76372e75b1b
共同学习，写下你的评论
评论加载中...
作者其他优质文章
