导航
首页
站内首页
网罗天下
网页前端
软件使用
站内首页
>
网页前端
>
HTML
> 正文
一个不错的蓝色风格div+css分页样式
本人写的一个分页样式,本来想研究当li被浮动后怎么样居中的问题,但结果不理想,所以现在先把这个给发出来吧,在IE和FF下测试通过:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>分页样式Netton.cn</title><style type="text/css">* { margin:0; padding:0;}body { font-size:12px; font-family:Verdana;}a { color:#333; text-decoration:none;}ul { list-style:none;}#pagelist {width:600px; margin:30px auto; padding:6px 0px; height:20px;}#pagelist ul li { float:left; border:1px solid #5d9cdf; height:20px; line-height:20px; margin:0px 2px;}#pagelist ul li a, .pageinfo { display:block; padding:0px 6px; background:#e6f2fe;}.pageinfo { color:#555;}.current { background:#a9d2ff; display:block; padding:0px 6px; font-weight:bold;}</style></head><body><div id="pagelist"> <ul> <li><a href="#">首页</a></li> <li><a href="#">上页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="current">3</li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">下页</a></li> <li><a href="#">尾页</a></li> <li class="pageinfo">第3页</li> <li class="pageinfo">共8页</li> </ul></div></body></html>
Netton.cn
提示:可以先修改部分代码后再运行
<<
CSS网页布局入门教程5:二列宽度自适应
div css表单布局的五个小技巧
>>
查看所有评论
昵称
评论内容
相关文章
在线留言
© 2021
i0561搜索
.All rights reserved.
v3.24
作者:
佚名
来源:
网络
浏览:
发布时间:
10/12/28