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存在的话就使用，不存在的话就使用默认的





标签：

相关文章