分页布局实例（英文）

效果

结构

< div class ="page" >
     < span class ="page_invalid" > first </ span >
     < span class ="page_onlink" > 1 </ span >
     < a href ="#" > 2 </ a >
     < a href ="#" > 3 </ a >
     < a href ="#" > 4 </ a >
     < a href ="#" > 5 </ a >
     < a href ="#" > 6 </ a >
     < a href ="#" > 7 </ a >
    ...
     < a href ="#" > 199 </ a >
     < a href ="#" > 200 </ a >
     < a href ="#" > next </ a >
</ div >

样式

.page {
    text-align : center ;
    padding-top : 5px ;
    padding-bottom : 5px ;
    border : 1px solid #CCCCCC ;
}
.page_onlink {
    padding-right : 5px ;
    padding-left : 5px ;
}
.page_invalid {
    color : #999999 ;
    padding-top : 2px ;
    padding-right : 5px ;
    padding-bottom : 2px ;
    padding-left : 5px ;
    border : 1px solid #999999 ;
}
.page a {
    border : 1px solid #FF6600 ;
    color : #FF9900 ;
    padding-right : 5px ;
    padding-left : 5px ;
    padding-top : 2px ;
    padding-bottom : 2px ;
    margin-right : 5px ;
}
.page a:hover {
    color : #FFFFFF ;
    background-color : #FF9900 ;
    text-decoration : none ;
}

转载于:https://www.cnblogs.com/hidepeng/archive/2011/05/12/2044878.html

分页布局实例（英文）相关推荐

Html代码seo优化最佳布局实例讲解
搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...
Spring-Data-JPA尝鲜：快速搭建CRUD+分页后台实例
戳蓝字"CSDN云计算"关注我们哦! 简书ID:@我没有三颗心脏 github:wmyskxz 欢迎关注公众微信号:wmyskxz 前言:由于之前没有接触过Hibernat ...
PHP分页代码实例教程
PHP分页代码实例教程分享一段php分页代码,很简单,作为php分页的入门教程不错. 专题推荐:php分页代码大全 php分页原理 php分页类数据库链接及参数设定 //数据库连接 ...
CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
python pyqt5 窗体自适应_Pyqt5自适应布局实例
在pyqt5中要做到自适应布局,必须应用Layout类下面列出类似于 html 中 float 功能的布局方法: 实现原理:PyQt5中的布局中,stretch 属性类似于一个可自适应的空白布局.会 ...
CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？...
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
Bootstrap3栅格系统布局实例
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先.使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局. 先看一个简单实例,来加深对移动设备优先的理 ...
qt mysql分页控件_Qt分页布局与切分窗口的实现
一.如何实现分页展示? QStackedLayout类可对窗口实现分页展示,每次只显示一个布局,将其他页的布局隐藏.为方便,Qt提供一个内置QStackedLayout的便利类:QStackedWid ...
php3.2接口分页,thinkphp3.2.3分页完整实例
这篇文章主要介绍了关于thinkphp3.2.3分页完整实例,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 Common公共函数:/** * TODO 基础分页的相同代码封装,使前台的 ...

分页布局实例（英文）

分页布局实例（英文）相关推荐

最新文章

热门文章