html+css基础2(标签选择,分页,行和块元素)

时间:2022-11-14 19:54:05


(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、分页代码实现

html+css基础2(标签选择,分页,行和块元素)


<!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>

这里做一下cursor解释:

cursor,指针样式,可以自定义

cursor: url(hand.cur),pointer   hand.cur存在的话就使用,不存在的话就使用默认的