当前位置：首页 > 网页特效 > 导航菜单

24种简单的div+css分页代码

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

24种简单的div+css分页代码

简介

在页面中引入pages.css文件。

```html
<link rel="stylesheet" href="css/pages.css" type="text/css" />
```
#####  HTML结构
所有的page分页的HTML结构基本相似，都采用div包裹一组超链接a元素。例如第一种Digg Style的分页HTML代码如下：

```html
<div class="digg">
  <span class="disabled"> < </span>
  <span class="current">1</span>
  <a href="#?page=2">2</a>
  <a href="#?page=3">3</a>
  <a href="#?page=4">4</a>
  <a href="#?page=5">5</a>
  <a href="#?page=6">6</a>
  <a href="#?page=7">7</a>
  ...
  <a href="#?page=199">199</a>
  <a href="#?page=200">200</a>
  <a href="#?page=2"> > </a>
</div>
```
#####  CSS样式
所有分页样式都通过CSS来进行渲染，每种分页CSS样式都非常简单，不超过10行代码。例如第一种Digg Style的分页CSS样式如下：

```html
/*css digg style pagination*/
div.digg{padding:3px;margin:3px;text-align:center}
div.digg a{border:#aaaadd 1px solid;padding:2px 5px;margin:2px;color:#000099;text-decoration:none}
div.digg a:hover{border:#000099 1px solid;color:#000;}
div.digg a:active{border:#000099 1px solid;color:#000;}
div.digg span.current{border:solid 1px #000099;padding:2px 5px;font-weight:bold;margin:2px;color:#fff;background-color:#000099;}
div.digg span.disabled{border:#eee 1px solid;padding:2px 5px;margin:2px;color:#ddd;}   
```

web299.com

24种简单的div+css分页代码

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果