【css+div】常用的css分页样式(整理篇)

林氏智造 于 2018-01-24 发布 4328 人已阅

以下代码都是网上相关代码的整理篇,自己只是把CSS代码重新梳理了一下,最终版权归原作者所有

几种CSS分页样式

.digg{padding:3px; margin:3px; text-align:center;}
.digg a,.digg span{border:1px solid #aaaadd; padding:2px 5px; margin:2px; font-size:12px; color:#000099;}
.digg a:hover,.digg a:active{border-color:#000099;}
.digg span.current{border:1px solid #000099; font-weight:bold; color:#FFF; background-color:#000099;}
.digg span.disabled{border-color:#eee; color:#ddd;}

.black2{padding:7px; margin:3px; text-align:center;}
.black2 a,.black2 span{border:1px  solid #000000; padding:2px 5px;font-size:12px;color:#000000;margin:2px;}
.black2 a:hover,.black2 a:active,.black2 span.current{border-color:#000000; background-color:#000; color:#FFF;}
.black2 span.disabled { border-color:#eee; color:#ddd; margin:2px;}
.jogger{
    padding:2px; 
    margin:7px; 
    text-align:center;
    }
.jogger a,.jogger span{
    padding: 0.5em 0.64em 0.43em;
    background-color:#ee4e4e;
    color:#FFF; 
    margin:2px; 
    font-size:12px;
    }
.jogger a:hover,.jogger a:active{
    background-color:#de1818;
    }
.jogger span.current{
    background-color:#f6efcc;color:#6d643c;
    }
.jogger span.disabled{display:none;}
.badoo{
background-color:#FFFFFF;
color:#48B9EF;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
padding:10px 0px;
text-align:center;}
.badoo a,.badoo span{
border:2px solid #F0F0F0;
color:#48B9EF;
margin:0px 2px;
padding:2px 5px; 
font-size:12px;}
.badoo a:hover,.badoo a:active{
border-color: #FF5A00;
color: #FF5A00;}
.badoo span.current{
background-color: #FF6C16;
border-color: #FF5A00;
color: #FFFFFF;
font-weight: bold;}
.badoo span.disabled{display:none;}
.greenBlack{
margin:3px;
padding:3px;
text-align:center;}
.greenBlack a,.greenBlack span{
background:url(../images/page/image1.gif) repeat scroll 0 0 #2C2C2C;
border:1px solid #2C2C2C;color:#FFFFFF;
margin-right:2px;
padding:2px 5px; font-size:12px;}
.greenBlack a:hover,.greenBlack a:active,.greenBlack span.current{
border-color: #AAD83E;
color:#FFFFFF; 
background-image:url(../images/page/image2.gif);}
.greenBlack span.disabled{
border-color:#F3F3F3; 
background-image:none;
color: #CCCCCC;
background-color:#FFF;}
.yahoo{
margin:3px;
padding:3px;
text-align:center;}
.yahoo a,.yahoo span{
border:1px solid #FFFFFF;
color:#000099;
margin:2px;
padding:2px 5px; 
font-size:12px;}
.yahoo a:hover,.yahoo a:active{
border-color:#000099;
color:#000000;}
.yahoo span.current{
background-color: #FFFFFF;
border-color:#FFFFFF;
color:#000000;
font-weight:bold;}
.yahoo span.disabled{
border-color:#EEEEEE;
color:#DDDDDD;}

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快