首页 > > 网页制作 > css >

html+css 基础（标签选择，分页，行和块元素）

2018-06-24 01:06:33来源：未知阅读 ()

（1）html标签选择

1、<a></a> 的功能有连接，下载，锚点

2、<span></span> 用来区分字体样式，<strong></strong>和<em></em>用来强调某段文字

3、如果是描述性的某段文字，我们可以用<p></p>来修饰

4、<div></div> 块标签，用来将内容分块

5、 <img />用来引入图片的内容

（2）css重置

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}

（3）块元素和内嵌元素

1、块的特征

a、默认独占一行

b、没有宽度时默认独占一行

c、支持所有的css命令

2、内嵌的特征

a、同排可以继续跟同类的标签

b、内容撑开宽度

c、不支持宽高

d、不支持上下的margion和padding

e、代码换行被解析

3、块和内嵌的转换

a、dispaly: block

使内联元素具备块元素标签的特性

b、display: inline

使行块属性标签具备内联元素的特性

c、inline-block的特点和问题

特性：块在一行显示，行内属性标签支持宽高，没有宽度的时候内容撑开宽度

问题：代码换行被解析，ie6，ie7不支持块属性标签的inline-block

4、分页代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>styles</title>
<style>
a{text-decoration: none}
.pages{
height: 40px;
border: 2px solid #CDCDCD;
text-align: center;
background: #E8E8E8;
margin: 90px auto;
padding-top: 10px;
}

.pages a{
height: 28px;
line-height: 28px;
color: #333333;
display: inline-block;
border: 1px solid #CDCDCD;
padding: 0 9px;
}

.pages a:hover{border-color: red;color: red}
.pages .active{font-weight: bold;background: #fcf9ea;
cursor: text;}
.pages .active:hover{border-color: #CDCDCD;color: #333333}

</style>
</head>
<body>
<div class="pages">
<a class="active" href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">下一页</a>
</div>
</body>
</html>