代码代码代码
来源：4-7 编程练习
Tenderness的家
2015-06-04 17:11
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
.top{ width:295px; height:30px; border:1px solid #ccc; }
.top .to{ font-size:12px; border:1px solid #ccc;display:block; width:40px; height:20px;line-height:20px;text-align:center;float:left;margin:4px 5px;}
.top .tol{ font-size:12px; border:1px solid #ccc;display:block; width:20px; height:20px;line-height:20px;text-align:center;float:left;margin:4px 5px;}
.top .tol{ font-size:12px; border:1px solid #ccc;display:block; width:20px; height:20px;line-height:20px;text-align:center;float:left;margin:4px 5px;}
.top .tol p{ margin:0px; background:red;}
</style>
</head>
<body>
<!--在此制作页码的基本结构-->
<div class="top">
<span class="to">首页</span>
<span class="tol"><</span>
<span class="tol"><p>1</p></span>
<span class="tol">2</span>
<span class="tol">3</span>
<span class="tol">....</span>
<span class="tol">></span>
<span class="to">末页</span>
</div>
</body>
</html>
写回答
关注
1回答
-
- 正是泽
- 2015-12-25 17:44:51
不要用display:block;用display:inline-block;就会在同一行了
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157043 学习 · 1984 问题
相似问题