# 前端常见标签样式设置
# a标签样式集合
# 不同a标签链接使用不同样式
/* link */
a[href^="http://"]{
background: url(link.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
background: url(pdf.png) no-repeat center right;
}
a[href^="http://"]{
color: blue;
}
a[href^="mailto:"]{
color: red;
}
a[href$=".pdf"]{
color:pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 显示a链接得URLs
@media print {
a:after {
content: " [" attr(href) "] ";
}
}
1
2
3
4
5
2
3
4
5
# css中的table
# div中table的宽度超过div的宽度问题
首先注意table的一个样式
table {
table-layout:fixed;
width: 100%;
}
1
2
3
4
2
3
4
tableLayout 属性用来设定表格单元格、行、列显示属性。table-layout有以下取值：
| 值 | 描述 |
|---|---|
| automatic | 默认。列宽度由单元格内容设定 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
# table边框加圆角踩坑
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
}
th,td {
border: 1px solid #d8d8d8;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
会发现行列之间存在空隙，难看。表格之间之所以有空隙是因为table有默认的样式，每个单元格之间都有一定的空隙。 只需要在css里让border重合，去掉空隙就好了
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
/* 消除单元格之间的空隙 */
border-collapse: collapse;
}
th,td {
border: 1px solid #d8d8d8;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
空隙是没了，但是，小圆角也不见了。 原来，当我们使用了border-collapse的时候，border-radius属性就不会被应用到表格元素上了
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
/* 消除单元格之间的空隙 */
border-collapse: collapse;
/* 消除掉外边框 */
border-style:hidden
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
使用box-shadow:(X偏移量，Y偏移量，阴影模糊半径，阴影扩展半径，阴影颜色) 我们想让这个阴影替代border，那就把X，Y偏移量以及阴影模糊半径都设置为0，扩展半径就是我们希望的border的粗细。阴影颜色就是希望的border的颜色。这样一个假border就做好了
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
/* 消除单元格之间的空隙 */
border-collapse: collapse;
/* 消除掉外边框 */
border-style:hidden;
/* hack一下加个阴影 */
box-shadow: 0 0 0 1px #d8d8d8;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Td边框属性设置
<table border="1" bordercolor="#FF9966" >
<tr>
<td width="102" style="border-right-style:none">隐藏右边框</td>
<td width="119" style="border-left-style:none">隐藏左边框</td>
</tr>
<tr>
<td style="border-top-style:none">隐藏上边框</td>
<td style="border-bottom-style:none">隐藏下边框</td>
</tr>
</table>
<table>
<tr>
<td style="border-right:#cccccc solid 1px;">显示右边框</td>
<td style="border-left:#cccccc solid 1px;">显示左边框</td>
<td style="border-top:#cccccc solid 1px;">显示上边框</td>
<td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
</tr>
</table>
<table>
<tr>
<td style="border-right : thin dashed blue;">右边框显示细虚线</td>
<td style="border-bottom: thick dashed yellow;">左边框显示粗虚线</td>
<td style="border-top: double green;">上边框显示两条线</td>
<td style="border-left: dotted red;">下边框显示点</td>
<td style="border-bottom:1px dashed #cccccc;">下边框虚线</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30