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

上一篇 / 下一篇  2019-09-19 16:45:37 / 个人分类:Web

一、html标签选择
1、<a></a> 的功能有连接,下载,锚点
2、<span></span> 用来区分字体样式,<strong></strong>和<em></em>用来强调某段文字
3、如果是描述性的某段文字,我们可以用<p></p>来修饰
4、<div></div>  块标签,用来将内容分块
5、 <img />用来引入图片的内容

二、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;}

三、块元素和内嵌元素
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

四、分页代码实现
<!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存在的话就使用,不存在的话就使用默认的。


TAG: 行和块元素 标签选择 分页

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2019-10-08  
  12345
6789101112
13141516171819
20212223242526
2728293031  

我的存档

数据统计

  • 访问量: 1102
  • 日志数: 13
  • 建立时间: 2019-09-13
  • 更新时间: 2019-09-23

RSS订阅

Open Toolbar