安科网

常用CSS集合

HTML CSS

HTML CSS

2017-03-23

关注 关注

/**//*按钮样式*/

.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;

}

border font-size font-family css css样式

HTML CSS

HTML CSS

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

css常用的简写技巧_css background简写、css border 简写、css font属性简写等

css样式中有很多简写方式，比如：设置背景，字体，边框，盒子等。我们都可以把css代码合并为一行，这篇文章将总结有哪些属性支持css简写。font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;d

淡风wisdon大大 2020-06-06

rails常用命令

数据库迁移部分：。rake db:create 依照目前的 RAILS_ENV 環境建立資料庫。rake db:rollback STEP=n 回復上N個 Migration 動作。rake db:migrate:up VERSION=2008090612

chenshuixian 2013-06-01

浏览器缓存机制

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同

羽化大刀Chrome 2013-05-31

如何为 Mac 安装 Java？

要在 Mac OS X 上运行 Java 7，需要 64 位浏览器。在 Mac 平台上，32 位浏览器不支持 Java 7。下面的屏幕截图和说明适用于 Java 7 Update 6 。如果正在安装其他版本，请务必相应地更改版本号。示例：对于 Java 版

quanhaoH 2013-06-17

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi 2020-08-09

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass 2020-07-19

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。这里我们利用transparent的透明颜色来代替。上面实现的三角形都是没有带边框的，如果在需求中需要实现带边框的三角形改如何实现呢？整体

猫沙盆 2020-07-07

Wyn Enterprise中如何转换数据类型？

在设计报表或者仪表板时，有时候从数据集获取到的数据类型和我们分析所需的类型并不匹配，不是同一种数据类型，可能会造成无法将数据正确分类或者过滤等情况。此处主要是仪表板数据集的数据类型转换。此处要注意，直接通过下拉选择调整类型可能部分情况不会生效。此时，需要使

大象从不倒下 2020-07-31

CSS（五）- 背景与边框 - 边框圆角与阴影基础用法

本文仅仅做border的基础使用，想要深入了解的话可以戳以下几个链接，觉得作者写的很好。border:style：dotted（点）、dashed（虚线）、solid（实线）、double、其它3D. 如今只有IE8和Opera Mini不支持border

猫沙盆 2020-07-08

你知道我们平时在CSS中写的%都是相对于谁吗？

在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现：。line-height：

云端漂移 2020-07-06

css 四个角

position:relative;padding:5px;height:50px;width:300px;position:absolute;content:‘‘;height:10px;width:10px;right:0;top:0;border-r

xiaohuli 2020-06-11

用css制作三角形图标

width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent;b

葉無聞 2020-06-09

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

福叔 2020-06-02

CSS盒模型（重点）

CSS三个大核心模块：盒模型 、浮动和定位，其余的都是细节。就是把网页元素资源放入盒子里，利用CSS合理摆放盒子的过程。盒模型就是把HTML页面中的元素看成是一个个矩形的盒子，里面装着内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。在网页中，

CaiKanXP 2020-06-02

css解决移动端1px边框问题

@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.bo

opspider 2020-05-29

Kafka 客户端的缓存管理

Kafka 作为一个高吞吐量的消息队列，它的很多设计都体现了这一点。比如它的客户端，无论是 Producer 还是 Consumer ，都会内置一个缓存用来存储消息。这样类似于我们写文件时，并不会一次只写一个字节，而是先写到一个缓存里，然后等缓存满了，才会

guicaizhou 2020-05-06

移动端的特殊样式

-webkit-appearance:none 清除iOS中预置的样式，如input，botton

RexLeee 2020-05-01

css盒模型

padding：内边距，边框到内容的距离。盒子的真实宽度=height+2*padding+2*border

sdbxpjzq 2020-04-21

scss

mixin 混合未知格式和数量的变量, 使用...@each $animal in puma, sea-slug, egret, salamander {

jiangfulai 2020-04-11

CSS实现等边三角形

聪明的你应该已经看出来了，border的边框是由四个三角形组成的，接下来我们就使用这一原理来实现等边三角形吧~将其他的三个边框给取消。你或许有个疑问？上右下左的顺序来控制四个边框，隐藏某边框就设置transparent,显示某边框就写个颜色就可以啦~比如上

buttonChan 2020-04-10
HTML CSS

HTML CSS

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号