一、设置整体页面宽度
一般写个样式命名为.d{}设置整体页面指定宽度和居中，京东命名为.w{}，bootstrap里命名为.container{}
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0 auto;
}
.header{
height: 48px;
background-color: red;
}
.body{
background-color: aliceblue;
}
.foot{
background-color: blue;
}
.w{
width: 980px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="w"> <!-- 在div里设置这个样式 -->
头部内容
</div>
</div>
<div class="body">
<div class="w"> <!-- 在div里设置这个样式 -->
<a>主体内容</a>
</div>
</div>
<div class="foot">
<div class="w"> <!-- 在div里设置这个样式 -->
页脚内容
</div>
</div>
</body>
</html>
|
二、a标签
1、鼠标放上去是小手，不是竖杠
|
1
|
<a style="cursor: pointer">内容</a>
|
2、鼠标放上去不要下划线
|
1
|
<a style="text-decoration: none">内容</a>
|
三、圆角
图片或者button等，设置圆润程度：border-radius属性，50%就是个圆形了；
|
1
|
<img src="img/pp.jpg" style="border-radius: 10px;">
|
四、伪类和伪元素
1、伪类
CSS伪类用于向某些选择器添加特殊的效果。
鼠标放在任意标签上变色，以a标签为例：
|
1
2
3
4
5
6
7
8
|
.body .w a:hover{ background-color: green;
}<div class="body">
<div class="w">
<a style="">内容</a>
</div>
</div>
|
2、伪元素
伪元素用于将特殊的效果添加到某些选择器。
最常用的是：after
举例：clearfix
在div里有两个小div，float：left之后，会把最外层的div背景色覆盖掉，以前的解决办法是在最后加入一个div，样式是clear：both；换成新的样式clearfix，在：after里追加一些内容，隐藏起来。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.clearfix:after{
content: '.';
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
<div class="clearfix">
<div style="float: left">往左飘2</div>
<div style="float: left">往左飘2</div>
</div>
|
以后遇到float布局时，只添加clearfix样式就完美了。