`
joerong666
  • 浏览: 422825 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

常用CSS

阅读更多

/*按钮样式*/
.ButtonCss
{
    font-family: "Tahoma" , "宋体";
    font-size: 9pt;
    color: #003399;
    border: 1px #003399 solid;
    color: #006699;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-image: url(../Images/bluebuttonbg.gif);
    background-color: #e8f4ff;
    cursor: hand;
    font-style: normal;
    width: 60px;
    height: 22px;
}

/*蓝色按钮样式*/
.blueButtonCss
{
    font-family: "Tahoma" , "宋体";
    font-size: 9pt;
    color: #003366;
    border: 0px #93bee2 solid; /* BORDER-BOTTOM: #93bee2 1px solid;      BORDER-LEFT: #93bee2 1px solid;      BORDER-RIGHT: #93bee2 1px solid;      BORDER-TOP: #93bee2 1px solid;*/
    background-image: url(../Images/blue_button_bg.gif);
    background-color: #ffffff;
    cursor: hand;
    font-style: normal;
}

/*红色按钮样式*/
.redButtonCss
{
    font-family: "Tahoma" , "宋体";
    font-size: 9pt;
    color: #0066cc;
    border: 1px #93bee2 solid;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-image: url(../Images/redbuttonbg.gif);
    background-color: #ffffff;
    cursor: hand;
    font-style: normal;
}
/*选择按钮样式*/
.selectButtonCss
{
    font-family: "Tahoma" , "宋体";
    font-size: 9pt;
    color: #0066cc;
    border: 1px #93bee2 solid;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-image: url(../Images/blue_button_bg.gif);
    background-color: #ffffff;
    cursor: hand;
    font-style: normal;
}

/*绿色按钮样式*/
.greenButtonCss
{
    font-family: "Tahoma" , "宋体";
    font-size: 9pt;
    color: #0066cc;
    border: 1px #93bee2 solid;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-image: url(../Images/greenbuttonbg.gif);
    background-color: #ffffff;
    cursor: hand;
    font-style: normal;
}
/*图像按钮*/
.imageButton
{
    cursor: hand; /*改变鼠标形状*/
}
/*页面正文样式*/
body
{
    scrollbar-face-color: #EDEDF3;
    scrollbar-highlight-color: #ffffff;
    scrollbar-shadow-color: #93949F;
    scrollbar-3dlight-color: #EDEDF3;
    scrollbar-arrow-color: #082468;
    scrollbar-track-color: #F7F7F9;
    scrollbar-darkshadow-color: #EDEDF3;
    font-size: 9pt;
    color: #003366;
    overflow: auto;
}
TD
{
    font-size: 12px;
}
TH
{
    font-size: 12px;
}
/*************************************
下拉选择框显示风格
*************************************/
SELECT
{
    border-right: #000000 1px solid;
    border-top: #FFFFFF 1px solid;
    font-size: 12px;
    border-left: #FFFFFF 1px solid;
    color: #003366;
    border-bottom: #000000 1px solid;
    background-color: #f4f4f4;
}

/*****************************************************
超级链接显示风格
*****************************************************/
A:Link, A:Visited
{
    color: #223355;
    text-decoration: none;
}
A:Hover
{
    color: red;
    text-decoration: none;
}

A.highlight:link, A.highlight:visited
{
    color: red;
    text-decoration: none;
}
A.highlight:hover
{
    color: red;
    text-decoration: underline;
}

A.thisclass:link, A.thisclass:visited
{
    color: #D9EBFD;
    font-weight: bold;
    text-decoration: none;
}
A.thisclass:hover
{
    color: #FFFFFF;
    font-weight: bold;
}

A.navlink:link, A.navlink:visited
{
    color: #D9EBFD;
    text-decoration: none;
}
A.navlink:hover
{
    color: #FFFFFF;
    text-decoration: none;
}


/*****************************************************
线条文本编辑框显示风格
*****************************************************/
.EditBox
{
    background: #ffffff;
    border: 1px solid #B7B7B7;
    color: #003366;
    cursor: text;
    font-family: "Arial";
    font-size: 9pt;
    height: 18px;
    padding: 1px;
}
/****************************************************
多行文本框样式
*****************************************************/
.MultiEditBox
{
    background: #f8f8f8;
    border-bottom: #B7B7B7 1px solid;
    border-left: #B7B7B7 1px solid;
    border-right: #B7B7B7 1px solid;
    border-top: #B7B7B7 1px solid;
    color: #000000;
    cursor: text;
    font-family: "Arial";
    font-size: 9pt;
    padding: 1px;
}

/*****************************************************
阴影风格的表单
*****************************************************/
.Shadow
{
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background: gray;
    background-color: #FFCC00;
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
}
/*****************************************************
只显一条横线的Text的样式!
*****************************************************/
.logintxt
{
    border-right: #ffffff 0px solid;
    border-top: #ffffff 0px solid;
    font-size: 9pt;
    border-left: #ffffff 0px solid;
    border-bottom: #c0c0c0 1px solid;
    background-color: #ffffff;
}
/*****************************************************
DataGrid页眉样式
*****************************************************/
.dgTitle
{
    height: 25px;
    color: #ffffff;
    font-size: large;
    text-align: center;
    vertical-align: middle;
    background-image: url(../images/tableTitle2.gif);
    height: 25px;
}

/*****************************************************
DataGrid数据显示样式
*****************************************************/
.dgItem
{
    height: 15px;
    text-align: center;
    vertical-align: middle;
}
/*****************************************************
文本框显示样式
*****************************************************/
.clarity
{
    border-right: #ffffff 0px solid;
    border-top: #ffffff 0px solid;
    font-size: 9pt;
    border-left: #ffffff 0px solid;
    border-bottom: #ffffff 0px solid;
}
TABLE.List
{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
TABLE.List TH, TABLE.List TD
{
    padding: 4px;
    background-color: #eeeeee;
    border-bottom: 2px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    color: #000000;
}
TABLE.List TH
{
    background-color: #0064a8;
    border-top: 2px solid #ffffff;
    color: #ffffff;
    font-weight: normal;
}
TABLE.List TH A:link
{
    color: #ffffff;
    text-decoration: none;
}
TABLE.List TH A:visited
{
    color: #ffffff;
    text-decoration: none;
}
TABLE.List TH A:hover
{
    color: #ffffff;
    text-decoration: underline;
}

TABLE.Form TH, TABLE.Form TD
{
    padding: 4px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #F6F6F6;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    color: #000000;
}
TABLE.Form TH
{
    background-color: #E8E8E8;
    border-top: 1px solid #ffffff;
    color: #006699;
    font-size: 12px;
    font-weight: normal;
    border-bottom: 1px;
}
TABLE.Form TH A:link
{
    color: #ffffff;
    text-decoration: none;
}
TABLE.Form TH A:visited
{
    color: #ffffff;
    text-decoration: none;
}
TABLE.Form TH A:hover
{
    color: #ffffff;
    text-decoration: underline;
}

TABLE.Sample TD
{
    padding: 2px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    color: #000000;
}
TABLE.Sample TH
{
    background-color: #AEC1D7;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    color: #000000;
    font-weight: normal;
}

TABLE.SampleD TD
{
    padding: 2px;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    color: #000000;
}
TABLE.SampleD TH
{
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    color: #000000;
    font-weight: normal;
}

TABLE.Form1 TH, TABLE.Form1 TD
{
    padding: 4px;
    background-color: #BED8F3;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    color: #000000;
}
/*****************************************************
 没有边框的输入框
*****************************************************/
.NoneInput
{
    text-align: center;
    width: 99%;
    height: 99%;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: #f6f6f6;
    border-bottom-style: none;
}

/*****************************************************
 扁平风格的表单样式
*****************************************************/

 

/*****************************************************/
TABLE
{
    border-collapse: collapse;
}

/*
进度条样式
*/
.bi-loading-status
{
    /*position:   absolute;*/
    width: 150px;
    padding: 1px;
    overflow: hidden;
    background-color: Gray;
}

 

.bi-loading-status .text
{
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    padding: 1px;
}


.bi-loading-status .progress-bar
{
    border: 1px solid ThreeDShadow;
    background: window;
    height: 10px;
    width: 100%;
    padding: 1px;
    overflow: hidden;
}


.bi-loading-status .progress-bar div
{
    background: Highlight;
    overflow: hidden;
    height: 100%;
    filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
/*****************************************************
 表头背景
*****************************************************/
.tabletop
{
    background-image: url(../images/tableTitle2.gif);
    height: 25px;
}
/*****************************************************
大标题
*****************************************************/
.tabletitle
{
    font-family: "Arial";
    font-size: 12pt;
    color: #0066cc;
    font-weight: bolder;
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#CCFFFF,offX=1,offY=1,positives=true);
}
/*****************************************************
小标题
*****************************************************/
.smalltitle
{
    background-color: #E8E8E8;
    font-size: 12px;
    font-weight: normal;
    color: #006699;
}
.calendarborder
{
    border: 1px #B7B7B7 solid;
}

分享到:
评论

相关推荐

    常用CSS跟JS效果整理

    以下是对标题“常用CSS跟JS效果整理”中涉及的知识点的详细说明。 **1. 常用CSS效果** 1. **布局**:CSS提供了流式布局、网格布局(CSS Grid)、Flexbox布局等,帮助开发者创建响应式的网页结构。 2. **定位**:...

    css例子培训资料及常用css定义

    本资料集“css例子培训资料及常用css定义”主要涵盖了CSS的基础概念、常用属性和实例,旨在帮助学习者快速掌握这一关键技术。 一、CSS基础 1. 选择器:CSS选择器是用于选取HTML元素的方式,例如`#id`、`.class`、`...

    常用css属性汇总大全

    下面将详细阐述在给定的标题和描述中提到的一些常用CSS属性。 1. **字体属性**: - `font-size`:设置字体大小,可以使用像素(PX)、百分比(%)等单位。 - `font-style`:定义字体样式,如`italic`为斜体,`...

    原子化css-常用css整理-快速css样式

    在给定的标题“原子化css-常用css整理-快速css样式”中,我们可以提炼出几个关键的知识点。首先,原子化CSS主张将样式细分为最小单位,这样的实践便于开发者快速地为项目中的各种元素添加样式。其次,“常用css整理...

    Css+div_常用CSS标签及属性

    Css+div_常用CSS标签及属性 Css+div是Web开发中最常用的技术之一,Css是用于描述网页样式和布局的标记语言,而div是Html中最基本的布局标签。本文将从Css+div的角度,总结常用的Css标签及属性,并进行分类。 Css中...

    常用css知识 html css

    常用css知识 html css css知识

    常用CSS工具类

    标题“常用CSS工具类”和描述“快速做页面,少写重复代码,减少起类命的痛苦”都指向了这一主题。 在JavaScript开发中,尤其是在前端框架如React、Vue或Angular中,CSS工具类的使用更为常见。它们可以与组件紧密...

    WEB开发常用CSS样式

    在探讨“WEB开发常用CSS样式”这一主题时,我们深入剖析了给定文件中的几个关键CSS样式示例,包括按钮样式、下拉选择框样式、以及页面滚动条样式。这些样式不仅展示了CSS的强大功能,也提供了实用的设计模式,对Web...

    Css_div_常用CSS标签及属性

    Css+div 常用CSS标签及属性 2009年10月15日 评论(0)|浏览(64) 点击查看原文 CSS中的长度 绝对单位:几乎不用在网页中 in 英寸 1in = 2.54cm cm 厘米 1cm = 0.394in pt 磅 1in = 72pt pc pica 1in = 6pc 相对...

    10个常用CSS代码片段(DOC文档)

    ` 是CSS中常用的技巧之一,用于使元素在其父容器内水平居中。 - 这种方法适用于固定宽度的元素。 - 如果元素宽度不是固定的,则需考虑使用其他方法,例如Flexbox或Grid布局。 #### 2. Sticky Footer 布局 **功能:...

    常用CSS命名规范

    ### 常用CSS命名规范 #### CSS命名规范的重要性 CSS命名规范对于前端开发来说至关重要。良好的命名习惯不仅能提升代码的可读性与维护性,还能帮助团队成员更好地理解和协作。本文将详细介绍一种符合W3C标准的CSS...

    网页制作之常用CSS缩写语法总结

    ### 网页制作之常用CSS缩写语法总结 在网页设计与开发的过程中,CSS(层叠样式表)是不可或缺的一部分。它不仅能够为网页添加丰富的样式,还能够提高页面的加载速度,优化用户体验。为了更好地掌握CSS,提高工作...

    文档里面是一些DIVCSS布局大全,Css_div_常用CSS标签及属性等

    在这个名为“Css_div_常用CSS标签及属性等”的文档集合中,我们可以期待找到关于这两个主题的深入学习材料。 首先,让我们详细了解一下`DIV`。`<div>`元素是HTML中的一个块级元素,意味着它会自动占据一整行,可以...

    网站常用css开发web项目

    网站常用css解决web项目div+css,使web页面随心所欲。方便大家下载

    网页常用css3按钮样式代码

    本资源“网页常用css3按钮样式代码”包含了一系列实用的CSS3代码片段,帮助设计师和前端开发者快速构建吸引人的网页按钮。 CSS3的引入极大地扩展了按钮样式的可能性,它支持多种新特性,如渐变、阴影、边框半径、...

    常用CSS3网页图标查看器.rar

    HTML5 常用CSS3网页图标查看器,说明:1、图标上面的编号是在调用时对应的编号,只要在CSS里面写上content:"\f001" 这里的那串就会显示出来!如果不明白可以查看本页面的源代码!  2、使用之前要先加载字体。

    CSS中常用的 reset.css文件

    }`:针对标题、段落、列表等常用元素进行重置。 4. `table{border-collapse:collapse;border-spacing:0;}`:让表格的边框合并,去除默认的边框间距。 5. `img{vertical-align:middle;border:0;}`:使图片居中对齐,...

    语言程序设计资料:Css_div_常用CSS标签及属性.doc

    语言程序设计资料:Css_div_常用CSS标签及属性.doc

    开发人员常用css api文档

    下面我们将详细探讨一些开发人员常用的CSS API知识点。 1. **CSS选择器**: - **基本选择器**:如标签选择器(例如`div`)、类选择器(`.class`)、ID选择器(`#id`)和通配符选择器(`*`)。 - **高级选择器**:...

Global site tag (gtag.js) - Google Analytics