CSS3等相关属性制作分页导航实现代码

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作，像是图片一样。前面都是随便说了一下制作的过程，为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。

目标

今天我们主要的目的是使用CSS3等相关属性来制作W3cplus站点上的分页导航效果，大家可以这点击这里查看站点上的效果，也可以直击狼蚁网站SEO优化的效果图

在这个效果中，其实只有两大看点

使用CSS3的属性，制作不规则图形效果，并且hover状态下会慢慢改变图形和字体颜色；让列表水平居中，这个效果我曾多次碰到同学问怎么使用一个列表居中显示，并且排在一行，列表还要自适应内容的宽度。看起来复杂，其实不难，这也是我狼蚁网站SEO优化要重点介绍的一个小技巧。

HTML Markup

有想做东西，我们就需要有材料，我这里所说的材料就是我们分页导航的HTML Markup，狼蚁网站SEO优化我们一起来看看吧

复制代码

代码如下:

这样的结构是我常用来制作分页导航的结构，大家还有其他的不同结构，今天我们就不去探讨这方面的问题。其实这个结构很简单，我们把每一页的序号放在了一个“<a>”中，然后对应放在列表项中。唯一需要注意的一点就是“当前页”，因为所处当前页是不需要有具有点击效果，所以我直接将当前页放在一个“li”中，并且命名一个“pager-current”的类名给他，大家可以从Firebug的截图中来看这样的区别

CSS Code
有了结构，就需要用CSS来美化他

复制代码

代码如下:

body {
font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
}
.pager {
list-style: none outside none;
margin: 20px;
padding: 0;
text-align: center;
}
.pager li {
display: inline-block;
margin: 0;
padding: 0;
}
html .pager li { display: inline; }
+html .pager li { display: inline; }
.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; / old browsers /
background: -moz-linear-gradient(, #3D4850 3%, #313d45 4%, #232B30 100%); / firefox /
background: -webkit-gradient(linear, left , left bottom, color-s(3%,#3D4850), color-s(4%,#313d45), color-s(100%,#232B30)); / webkit /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); / ie /
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / Firefox /
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / Safari, Chrome /
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / CSS3 /
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}
.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
background: #4C5A64; / old browsers /
background: -moz-linear-gradient(, #4C5A64 3%, #404F5A 4%, #2E3940 100%); / firefox /
background: -webkit-gradient(linear, left , left bottom, color-s(3%,#4C5A64), color-s(4%,#404F5A), color-s(100%,#2E3940)); / webkit /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); / ie /
color: #d54e21;
}

上面是DEMO效果所使用的CSS代码，狼蚁网站SEO优化我们一起来细看一下上面的代码

1、不规则图形

我在此处主要使用CSS3的border-readius属性制作的不规则圆角效果

复制代码

代码如下:

.pager li a
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
}

有关于其详细介绍，大家可以点击《》。上面是默认状态下的效果，那么在hover下改变图形样式，我想大家都想到了，是的那就是在“:hover”下改变其风格

复制代码

代码如下:

.pager li a:hover {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
}

2、背景色

通过第一步，我们只制作出来不规则的边界效果，需要在上面的基础上加上背景色，这样填充进行就形成了不规则的图形，类似于图片效果。这里填充颜色，使用的是CSS3的渐变属性——Gradient来实现的

复制代码

代码如下:

.pager li a {
background: #232B30; / old browsers /
background: -moz-linear-gradient(, #3D4850 3%, #313d45 4%, #232B30 100%); / firefox /
background: -webkit-gradient(linear, left , left bottom, color-s(3%,#3D4850), color-s(4%,#313d45), color-s(100%,#232B30)); / webkit /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); / ie /
}
.pager li a:hover {
background: #4C5A64; / old browsers /
background: -moz-linear-gradient(, #4C5A64 3%, #404F5A 4%, #2E3940 100%); / firefox /
background: -webkit-gradient(linear, left , left bottom, color-s(3%,#4C5A64), color-s(4%,#404F5A), color-s(100%,#2E3940)); / webkit /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0); / ie /
color: #d54e21;
}

3、动画效果

上面完成的只是一个静态的CSS3样式效果，但我们上面的DEMO中是有一个动态改变背景的效果，这个效果我主要使用了CSS3的transition属性

复制代码

代码如下:

.pager li a {
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}

请注意，我们的效果是在“a:hover”状态下发生的，所以大家会以为动画效果是加载在“a:hover”上，其实不是的，我需要在“a”上设置一个“transition”属性，当在“a:hover”状态下，元素样式参数值改变时，就会给我们带一个动画效果一样。具体的使用方法大家可以参阅《CSS3 Transition 》。大家如果成使用更好的动画效果，你可以使用CSS3的Animation来作。感兴趣的话可以参考animate.css和animatable.css。

4、当前项效果

因为我们当前项是没有放在“a”标签中的，为了让其和其他项样式一样，我们需要把当前项的样式和“a”链接的样式设置成一样，不同之处是，他的效果类似于“a:hover”效果

复制代码

代码如下:

.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; / old browsers /
background: -moz-linear-gradient(, #3D4850 3%, #313d45 4%, #232B30 100%); / firefox /
background: -webkit-gradient(linear, left , left bottom, color-s(3%,#3D4850), color-s(4%,#313d45), color-s(100%,#232B30)); / webkit /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); / ie /
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / Firefox /
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / Safari, Chrome /
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); / CSS3 /
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}

5、列表居中

这一点是我今天要特别提出来的一点，大家都知道，我们列表项要放置在一行显示，需要使用“float”来实现，使用了浮动后，我们就无法让整个分页导航水平居中，如此一来就会给我们带来一个两难境地。那么今天我在这里给大家展示一种处理方法“display:inline-block”来让列表项显示在一行，大爱看到这个肯定又说难了，因为其在IE6-7下是无法支持的。这一点大家说的一点不错，其实我们只需要在IE下稍作处理就ＯＫ了，我们具体来看一下如何实现其水平居中

复制代码

代码如下:

.pager {
text-align: center;/====让列表项内容居中放====/
padding: 0;
margin: 20px;
list-style: none outside none;
}
.pager li {
display: inline-block;/===改变列表项显示方式为行内块===/
margin: 0;
padding: 0;
}

起到列表水平居中的效果，我们靠的就是上面的两句代码“text-align: center”和“display: inline-block”，但大家写的时候一定不能放借位置哟，前一句是放在“ul”中，后一句是放在“li”中，我们来看看效果

从上图中我们很明显的看到了，ＩＥ6-7下是无法排在一行中显示的，那么我们现在来看如何处理他们的兼容问题。我们使用Hack来，让IE6-7下按一种方法显示

复制代码

代码如下:

[code]
html .pager li { display: inline; }
+html .pager li { display: inline; }
.pager li a {
zoom: 1;
}

[/code]
现在我们在来看一下，加上以上代码后的效果

现在在所有浏览器下都能水平居中了。只是部分浏览器不支持CSS3的属性，这些我们无需理会他了。为了让其更美丽一点，我在这里还使用了css3的其他属性，比如说text-shadow、box-shadow等等。

那么一个和W3cplus站点一样的分页效果就做好了，感兴趣的话你也可以动手一试。大家一起来看一下最终效果吧

上一篇：CSS3的Border-radius轻松制作圆角下一篇：inline-block元素的4px空白间距解决方案

CSS3等相关属性制作分页导航实现代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

CSS3等相关属性制作分页导航实现代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设