-
哈哈查看全部
-
代码整理：a标签里有的，a:hover里面不需要
有公共属性的可以把公共属性删除
查看全部 -
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.page-normal{
color: #ff6500;
text-align: center;
font-size: 0;
}
.page-normal a{
border: 1px solid #ff9600;
text-decoration: none;
color: #ff6500;
}
.page-normal a:hover{
border: 1px solid #ff6500;
background: #ffb494;
}
.page-current{
border: 1px solid #ff6500;
color: #ff6500;
background: #ffb494;
}
.page-prev{
border: 1px solid #ffe3c6;
color: #ffe3c6;
}
.page-prev,.page-current,.page-normal a{
padding: 5px 7px;
font-size: 18px;
margin-left: 15px;
}
.page-normal i{
display: inline-block;
width: 5px;
height: 9px;
background: url("e.gif");
}
.page-prev i{
background-position: -67px -608px;
margin-right: 5px;
}
.page-next i{
background-position: -74px -608px;
margin-left: 5px;
vertical-align: middle;
}
</style>
</head>
<!--
行内元素中间有空隙
原因：换行符、tab制表符、空格产生空隙
解决：元素写在一行
font-size：0;
-->
<body>
<div class="page-normal">
<span class="page-prev"><i></i><</span>
<span class="page-current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
...
<a href="#">199</a>
<a href="#">200</a>
<a href="#" class="page-next">><i></i></a>
</div>
</body>
</html>
查看全部 -
呵呵查看全部
-
2、画实心圆的方法： 宽度和高度一致(正方形)，然后四个角设置为高度或者宽度的1/2. <div class="circle"></div> .circle{ width:100px; height:100px; background-color:#cb18f8; border-radius:50px; } 效果： 总结： CSS3实现圆角的方式既优雅又方便，但是兼容性不够好，如果需要考虑旧版本的浏览器的话，可以考虑优雅降级的方式。开始提到的两种方式的优点是兼容性好，但不够优雅。查看全部
-
宽度和高度对于行内元素没有效果，只有块状元素才有效果。查看全部
-
font-size是一个会继承的属性，当父容器定义了这个属性，下面的子元素（孙元素）都会继承这个属性。 例子中，当为外面容器div添加font-size:0的时候，div下面的所有span和a标签都继承了这个样式，字体大小变为了0px，所以看不到任何数字内容了；当为其它类添加font-size:14px后，这个属性覆盖了父容器继承下来的属性（CSS的后来居上原则），因此div下的span和a标签里的数字内容就恢复了正常。 解决方法： 如果需要看见，可以将原来的小点点（...）文本替换为下面的内容： <span class="ellipsis">...</span> 并在css中增加一下内容： .ellipsis{ font-size:14px; border:none; margin-left: 8px; }查看全部
-
行内元素的间隔bug 问题：行内元素间有换行符、tab、空格等会产生空隙； 解决： 1 把所有的代码写成一行（但代码显示混乱） 2 根元素中设置：font-size:0;再在其余分页页码标签中设置正常的font-size.再通过设置margin控制间隔等查看全部
-
内联块状元素 in-block 被设置的元素在一行不像block独占一行 页码的小图标一般用<i></i>标签（内联元素）然后把它转换成inline-block元素设置width height值插入blackground：img再blackground-position： X轴 Y轴查看全部
-
内联元素设置居中时可以为所在容器设置text-align:center;查看全部
-
1.用html实体标签来代替“〈”，“〉” ＆lt＝〈 ＆gt＝〉 2.前一页和当前页不用超链接，用span代替即可！查看全部
-
lalalla查看全部
-
行内样式的bug问题查看全部
-
行内元素中间有空隙产生原因：换行符、tab制表符、空格产生空隙 解决方法：（1）元素写成一行（2）设置font-size：0查看全部
-
制作分页页码标签：<a>标签、<span>标签、<div>标签 html实体标签：< 同等于 < >同等于 >查看全部
举报