inline-block的应用:下一页

最新推荐文章于 2024-08-07 10:29:06 发布

布吉

最新推荐文章于 2024-08-07 10:29:06 发布

阅读量136

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/fighting_0808/article/details/83999847

版权

inline-block的应用（下一页）:
//html

<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标记</title>
<link type="text/css" href="p.css" rel="stylesheet">
</head>

<body>
   <div>
       <a href="#">上一页</a>
       <a id="now" 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="#">....</a>
       <a href="#">99</a>
       <a href="#">100</a>
       <a href="#">下一页</a>
   </div>
</body>
</html>

//css

*{
  margin:0;
  padding:0;
}
div{
 text-align:center;
 height:58px;
 width:600px;
 background-color:#e8e8e8;
 margin:190px auto;
}

a{
display:inline-block;
 height:28px;
 line-height:28px;
 background-color:#FFFFFF;
 border:1px solid #cdcdcd;
 text-decoration:none;
 color:#333333;
 padding:0px 9px 0 9px;

}
a:hover{
  border:1px #FF0000 solid;
  color:#FF0000;
}
#now{
  font-weight:bold;
  background-color:#FCF9EA;
  cursor:text;
}
#now:hover{
    color:#333333;
	border:1px solid #cdcdcd;
	
}

在这里插入图片描述