翻页效果竖排居中变横排居中

发布网友发布时间：2022-04-22 07:03

共2个回答

热心网友时间：2022-06-17 04:13

等下我写给你。其实很简单的就一个float就可以了。

css样式：

ul#page li{
display:block;
list-style:none;
float:left;
text-align:center;
margin-left:8px;
}
ul#page li a{
display:list-item;
color:#666;
padding:8px 13px;
text-decoration:none;
font:bold 14px "微软雅黑";
border-radius:5px;
border:1px solid #bcbcbc;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#ededed));
background:-moz-linear-gradient(#FFF,#ededed);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#ededed');
}
ul#page li a:hover{
color:white;
border-radius:5px;
border:1px solid #d21e2c;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff828c), to(#e60012));
background:-moz-linear-gradient(#ff828c,#e60012);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff828c', endColorstr='#e60012');
}

html：

效果：

注意：渐变背景我是用样式写的，有可能IE会出现兼容性问题，你可以考虑使用制作背景图片替换的方法，排除这个问题的存在。

热心网友时间：2022-06-17 04:14

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0}
.container{width:1000px;margin:0 auto;min-height: 500px}
.content{height:auto;font:14px/26px "微软雅黑";color:#333}
.content p{margin:10px 0;text-align: center}
.page{width:350px;min-height:35px;margin:0 auto}
.page li{float: left;list-style: none}
.page li a{display:block;width:33px;height:33px;line-height:33px;border: 1px solid #ddd;border-right:0;background-color: #fff;text-align: center;color:#333;text-decoration: none}
.page li a:hover{color:#c00}
.page li.last a{border-right:1px solid #ddd}
.page li.on a,.page li.on a:hover{background-color: #c00;color:#fff}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>如图所示，我的页面翻页效果如图（左）居中于页面，而我想要如图（右）的样式居中于页面应该怎么做？需要贴上CSS，谢谢</p>
<p>如图所示，我的页面翻页效果如图（左）居中于页面，而我想要如图（右）的样式居中于页面应该怎么做？需要贴上CSS，谢谢</p>
<p>如图所示，我的页面翻页效果如图（左）居中于页面，而我想要如图（右）的样式居中于页面应该怎么做？需要贴上CSS，谢谢</p>
<p>如图所示，我的页面翻页效果如图（左）居中于页面，而我想要如图（右）的样式居中于页面应该怎么做？需要贴上CSS，谢谢</p>
</div>
<div class="page">
<ul>
<li class="on"><a href="javascript:;">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li class="last"><a href="#">9</a></li>
</ul>
</div>
</div>
</body>
</html>