CSS常用样色表

最新推荐文章于 2025-04-28 22:56:23 发布
原创 最新推荐文章于 2025-04-28 22:56:23 发布 · 828 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #float #border #url #table #redirect

自己整理在项目中经常用到的一些样色

/* CSS Document */
/*----------------------------------整体框架自适应宽度布局（注：这部分不能修改）---------------------------------*/
* { margin:0; padding:0;}
#Wrapper{ width:auto; min-width:900px; text-align:left; margin-left:auto; position:relative;}
#Outer{ margin-left:251px;}
#Header{ position:absolute; top:0; left:0; width:100%; height:132px; overflow:hidden;}
#Footer{ width:100%; clear:both; position:relative;}
#ClearHeader{ height:132px;}
#CenterContent{ float:right; width:99%;}
html>body #CenterContent{ margin:0 -0.5%}/*ff兼容*/
#Left {position:relative;width:251px;float:left;left:0px;margin-left:-248px;}
* html #Outer, * html #Wrapper,* html #CenterContent{ height:1%}
* html #Left{ margin-right:-3px;}
* html #Outer{margin-left:248px;}
.Outerwrap{ float:left; width:99%;}
.Clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}
/*----------------------------------整体框架自适应宽度布局（注：这部分不能修改）---------------------------------*/


/*-----------------------------页面基本效果--------------------------------------*/
body { font-size:12px; font-family:"",""; color:#666666; background:url(../image/sub_r1_c3.jpg) repeat-x }
li{ list-style:none}
table{text-align:left;}
p{margin: 15px 0px 15px 0px;padding: 3px 0px 3px 0px;}
hr{border:#000000 0px solid;border-top: #D1D7DC 1px solid;height: 0px;}
img{border:0px;}
form{margin:0;padding:0;}
input,select,textarea{ font: 12px Tahoma, Verdana; color: #000000; font-weight: normal;}
input{height:17px; background-color:#FFFFEE; color:#993300;border:expression((!(this.type=="checkbox" || this.type=="radio")) ?"1px solid #8EC1DB":"style");}
input{ cursor:expression((this.type=="button" || this.type=="submit")?"pointer":"auto");}
textarea{ border:1px solid #8EC1DB;}

a:visited,a:Link{
    font-size:12px;
    color:#000099;
    text-decoration:none;
}
a:hover{
    color:#005681;
    text-decoration:underline;
}
a:active{
    color:#666666;
    text-decoration:underline;
}
#Footer{ height:110px; background:url(../image/foot01.gif) no-repeat center; clear:both}
#Header{ height:132px; background:url(../image/sub_r1_c1.jpg) no-repeat}
.com_h1{ width:70%; float:left; height:50px;}
.com_h2{ width:30%; float:left; height:50px; text-align:right;}
.com_h3{ width:100%; float:left; height:72px; text-align:right;}
#SideBar{ width:251px; float:left; height:600px ;background:#666666 ;background:url(../image/sub_r2_c1.jpg) no-repeat}
/*------------------------欢迎页------------------------------*/
#home{ width:100%; background:url(../image/main_r1_c2.jpg) repeat-x top}
.logo{ width:900px; height:90px; margin:0px auto}
.logo li{ float:left; list-style:none}
.logo .L_1{ width:400px;}
.logo .L_2{ width:500px;text-align:right; padding-top:35px}
#home .main{ width:900px; height:645px; background:url(../image/main_r2_c1.jpg) no-repeat; margin:0px auto; padding-top:0px;}
#home .index_flash{ width:640px; height:72px; margin:0px auto; margin-left:150px; margin-bottom:60px; }
#home .login{ width:300px; height:150px; margin:0px auto; margin-left:550px }
#home .login li{ height:30px; line-height:30px; list-style:none }
#home .main .mes{ width:400px; margin-left:500px}
#home .main .mes li{ list-style:none}
#home .main .bq{ padding-top:140px; padding-left:570px; font-size:14px}
/*-----------------------------左边菜单--------------------------------------*/
#SideBar .text1{height:170px;}
#SideBar li{list-style:none; width:150px ;height:25px; line-height:25px; border-bottom:#CCCCCC dashed 1px; margin:0px auto;}
#SideBar li a {display: block;width: 150px;text-decoration: none; font-size: .8em;} 
#SideBar li a:hover {text-decoration: none; background:#DDF4FC;} 
#SideBar .lm{ width:169px;margin-left:auto; margin-right:auto; border-left:#CCCCCC solid 1px;border-right:#CCCCCC solid 1px; text-align:center;}
#SideBar .lm_dl{width:99%; list-style:url(../image/sub_r3_c2.gif);line-height:30px; text-align:center; font-size:16px; font-weight:bold; cursor:pointer; background-color:#999999; color:#FFFFFF; }
.lm_dl_check{ width:99% ;list-style:url(../image/sub_r3_c2.gif);line-height:30px; text-align:center; font-size:16px; font-weight:bold; cursor:pointer; background-color:#005681; color:#FFFFFF; }
.lm_xl_check{color:#005681; background-color:#BBDDFF; }
#SideBar .sidebar_f{ background:url(../image/sub_r3_c1.jpg) no-repeat bottom; padding-bottom:80px}
#SideBar a:visited, #SideBar a:Link{
    font-size:12px;
    color:#6A2D28;
    text-decoration:none;
}
#SideBar a:hover{
    color:#005681;
    text-decoration:underline;
}
#SideBar a:active{
    color:#666666;
    text-decoration:underline;
}
/*-----------------    tip页面连接提示-------------------*/
.tip{position:relative;    text-decoration:none;}
.tip:hover{background:none;color:#000000; text-decoration:none;}
.tip span {    display: none;}
.tip:hover span{display:block;position:absolute; width:auto;top:10px;left:50px;}
.tip:hover span p {background-color:#FFFFFF; color:#FF9F71;text-align:left;padding:5px;border:1px solid #CCCCCC;}
/*------------------------带标题的框------------------------------*/
fieldset {border:1px solid #CCCCCC; background:#fff; width:89%;}
fieldset legend {color:#005681;    font-weight:bold; padding:3px 20px 3px 20px; margin-left:20px; border:0px solid #CCCCCC; background:#fff;}
fieldset label {float:left;    width:120px; text-align:right; padding:4px;    margin:1px;}
fieldset div {clear:left; margin-bottom:2px; text-align:left;}
/*--------------------Searche搜索页----------------------------*/
.common_shou{ border:#CCCCCC solid 1px; margin:5px auto; text-align:center}
.common_shou ul li{ height:30px; line-height:30px; list-style:none}
.Search_text{border:#666666 solid 1px;}
.Search_button{background-color:#999999; color:#FFFFFF; border:#666666 solid 1px;}
/*--------------------页面主要部分----------------------------*/
#CenterContent .zlm{width:100%; border-bottom:#990000 solid 3px; margin-top:20px}
#CenterContent .zlm li{width:50px;height:25px;padding-left:5px;padding-right:5px; line-height:25px;text-align:center;float:left;    list-style:none;color:#999999;display:inline;white-space:nowrap; border-left:#C08181 solid 1px;border-top:#C08181 solid 1px;border-right:#C08181 solid 1px; margin-left:10px; background:#CCCCCC; margin-bottom:5px}
#CenterContent .zlm .on{ background:#990000;border-left:#990000 solid 1px;border-top:#990000 solid 1px;border-right:#990000 solid 1px;}
#CenterContent .zlm a:visited, #CenterContent .zlm a:Link{
    font-size:12px;
    color:#FFFFFF;
    text-decoration:none;
}
#CenterContent .zlm a:hover{
    color:#005681;
    text-decoration:underline;
}
#CenterContent .zlm a:active{
    color:#666666;
    text-decoration:underline;
}
/*-----------------------------------------分页-----------------------------------------------*/
.p_bar {CLEAR: both; MARGIN: 1px 0px;}
.p_bar A {PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; TEXT-DECORATION: none; height:16px;}
.p_input {WIDTH: 40px; height:19px; text-align:center;}
.p_total {BORDER-RIGHT: #8EC1DB 0px solid; BORDER-TOP: #8EC1DB 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #8EC1DB 1px solid; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #EDF4FC}
.p_pages {FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BACKGROUND-COLOR: #EDF4FC}
.p_num {BORDER-RIGHT: #8EC1DB 1px solid; BORDER-TOP: #8EC1DB 1px solid; VERTICAL-ALIGN: middle; BORDER-LEFT: #8EC1DB 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #ffffff}
A.p_num:hover {BORDER-RIGHT: #8EC1DB 1px solid; BORDER-TOP: #8EC1DB 1px solid; BORDER-LEFT: #8EC1DB 1px solid; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none}
.p_redirect {BORDER-RIGHT: #8EC1DB 1px solid; BORDER-TOP: #8EC1DB 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #8EC1DB 1px solid; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #ffffff}
A.p_redirect:hover {BORDER-RIGHT: #8EC1DB 1px solid; BORDER-TOP: #8EC1DB 1px solid; BORDER-LEFT: #8EC1DB 1px solid; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #f2f3f7; TEXT-DECORATION: none}
.p_curpage {BORDER-RIGHT: #8EC1DB 1px solid; BORDER-TOP: #8EC1DB 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; BORDER-LEFT: #8EC1DB 1px solid; COLOR: #000000; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #8EC1DB 1px solid; BACKGROUND-COLOR: #DDF4FC}

/*--------------------个人档案----------------------------*/
.new_per{border: 1px solid #8EC1DB;background:#EDF4FC; margin-top:30px; text-align:center}
.new_per ul{ width:95%; border:#CCCCCC solid 1px; padding:10px; background:#FFFFFF}
.new_per ul li{ text-align:left; height:30px; line-height:30px; list-style:none}
.new_per .new_t{ list-style:30px; text-align:center;color: #005681;background: #D0E6F1;font-weight:bold; padding:4px 4px 3px 4px;border-bottom:1px solid #8EC1DB}
.per_main{ background:#EEF7FF;border:1px solid #8EC1DB; margin-top:10px}
.per_main .main_bt{ height:20px; line-height:20px; font-size:14px; text-align:center ;border-bottom:1px solid #8EC1DB; background:#D0E6F1;color: #005681; font-weight:bolder}
.new_per .new_main li{ text-align:center}
.new_per .new_main i{ width:33%; text-align:right; float:left;font-style:normal;}

/*---------慢性病--------*/
.per_main .mxb_t{ width:99%; margin:10px auto}
.per_main .mxb_t li{ width:150px ;line-height:20px; list-style:none; float:left; background:#EFE0E0; border-top:#990000 solid 1px; border-bottom: solid #990000 1px; border-left:#990000 solid 1px; text-align:center}
.per_main .mxb_t .a1{ width:350px}
.per_main .mxb_t .a2{width:100px}
.per_main .mxb_t .a3{width:88px}
.per_main .mxb_t .a4{width:88px;border-right:#990000 solid 1px;}
.per_main .mxb_l li{ width:99% ;height:25px; line-height:25px; border-bottom:#CCCCCC solid 1px; margin:0px auto}
.per_main .mxb_l li a{width:350px;float:left;display:inline;}
.per_main .mxb_l li address{ width:100px; float:left;font-style:normal; text-align:center;}
.per_main .mxb_l li i{ width:88px;float:left;display:inline; font-style:normal;text-align:center;}
.per_main .mxb_l li u{width:88px;float:left;display:inline;font-style:normal; text-align:center; text-decoration:none}

/*-------儿童键康----------*/
.per_main .rtjk_t li{ width:150px ;line-height:20px; list-style:none; float:left; background:#EFE0E0; border-top:#990000 solid 1px; border-bottom: solid #990000 1px; border-left:#990000 solid 1px; text-align:center}
.per_main .rtjk_t .a1{ width:350px}
.per_main .rtjk_t .a2{width:100px}
.per_main .rtjk_t .a3{width:88px}
.per_main .rtjk_t .a4{width:88px;border-right:#990000 solid 1px;}
/*-----------------------------------------社区档案管理-----------------------------------------------*/
/*-------------------------管理员------------------------*/
.per_main .gl_ul{ width:98%; margin:5px auto; border:#79BCFF solid 1px}
.glyxx{ background:#9BCDFF; color:#FFFFFF; line-height:25px}
.gly_mc li{width:50px;height:25px;padding-left:5px;padding-right:5px; line-height:25px;text-align:center;float:left;    list-style:none;color:#999999;display:inline;white-space:nowrap; margin-left:10px; margin-bottom:5px}
/*--------------------右边列表----------------------------*/
.listmain{ margin:10px auto}
.listmain li{ width:95% ;border-bottom:#E3E3E3 solid 1px; line-height:25px; list-style:url(../image/sub3_r3_c2.gif); margin-left:20px; clear:both; >clear:inherit}
.listmain .c{ float:left; text-align:center; color:#990000; font-weight:bolder; font-size:14px;background:#ECEFF1; border-bottom:#5C6A6F solid 1px;border-left:#5C6A6F solid 1px;border-top:#5C6A6F solid 1px; list-style:none; clear:inherit; margin-left:0px }
.listmain .li_1{ width:30%;}
.listmain .li_2{width:10%;}
.listmain .li_3{width:10%;}
.listmain .li_4{width:25%;}
.listmain .li_5{width:10%;}
.listmain .li_6{width:14%; border-right:#5C6A6F solid 1px}

.listmain li a{width:30%;float:left;display:inline; }
.listmain li img{float:left; margin:5px 4%;}
.listmain li address{ width:11%; float:left;font-style:normal; text-align:center;}
.listmain li i{ width:26%;float:left;display:inline; font-style:normal;text-align:center;}
.listmain li u{width:11%;float:left;display:inline;font-style:normal; text-align:center;}
.listmain li s{width:11%;float:left;display:inline;text-decoration:none;text-align:center;}

.new_ul ul{ width:95%; margin:10px auto;}
.new_ul ul li{height:30px; text-align:center}
.adddiv_li li{ width:95%; margin:0px auto; height:25px; line-height:25px; border-bottom:dashed #CCCCCC 1px; padding-left:10px}
.adddiv_li .on{ background:#FFFFFF}
.adddiv_li li u{width:80%;float:left;display:inline;font-style:normal; text-decoration:none }
.adddiv_li li i{width:20%;float:left;display:inline; font-style:normal;}
/*-----------------    table页面效果参考系统管理-------------------*/
.tab_tip { color:#FFFFFF;background-color:#999999;font-weight:bold; padding:4px 4px 3px 4px; margin:1px}
.tip_table{border: 1px solid #CCCCCC; width:98%; margin:0px auto}
.doing_table{ background-color:#005681; color:#FFFFFF;}
.tab_head { color: #005681;background: #D0E6F1;font-weight:bold; padding:4px 4px 3px 4px; margin:1px}
.tab_new { background-color:#FF9F71; color:#FFFFFF;}
.new_table{border: 1px solid #FF6633;background:#EDF4FC;}
.tab_content { background: #FFFFFF;}
.i_table{border: 1px solid #8EC1DB;background:#EDF4FC; width:98%; margin:0px auto}
.i_table .tab_head{border-bottom:1px solid #8EC1DB}
.hr  {border-top: 1px solid #739ACE; border-bottom: 0; border-left: 0; border-right: 0; }
.r_table{border: 1px solid #FF8080;background:#FFE8D0;}
.r_head { color:#005681;background:#FFCA95;}
.r_table .r_head{border-bottom:1px solid #FF8080;}
.tab_onmouseover{ background-color:#D0E6F1; cursor:pointer;}
.tab_onmouseout{}
.tab_onclick{ background-color:#77BBFF; color:#993300;}
.tab_onclick td{ color:#FFFFFF;}
.Default_BG{background-color:#EEEEEE;}
.td_right{ border-right:#8EC1DB solid 1px;}

 

前端必知必会-CSS颜色Color
qq_24018193的博客
08-11 1777
本文介绍了的CSS颜色Color使用，如有问题欢迎私信和评论。
常用HTML颜色表-HTML颜色代码色彩表 - DIVCSS5
01-14
常用HTML颜色表-HTML颜色代码色彩表 ，所有颜色都有对应的颜色值
CSS 颜色代码大全 CSS颜色对照表
热门推荐
hnyanzijun1的博客
07-20 5万+
HTML及CSS常用颜色英文词汇 黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0
CSS常用属性
qq_44741577的博客
02-23 1382
由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。例如： font-size 设为 40px ，最终呈现的文字，可能比 40px 大，也可能比 40px小。每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。
CSS常用样式总结
最新发布
2501_90900388的博客
04-28 720
下面围绕文本、图像、表格、背景常用的CSS样式展开。
07.CSS常用样式
weixin_43891622的博客
12-14 1145
使用 红、黄、蓝 这三种光的三原色进行组合r：红色g：绿色b：蓝色a：透明度HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来表达HSL：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)色相：取值范围是 0~360 度饱和度：取值范围是 0%~100%（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）亮度：取值范围是 0%~100%（ 0% 亮度没了，所以就是黑色。
CSS常用颜色配色的参数设置
祥哥的说
10-17 3698
相关的链接： （1）纯CSS3动画，图案制作中遇到的颜色 （2）codepen很赞的在线编辑工具 （3）颜色名称对照表+16机制表示 1.background-color: peru;秘鲁色 颜色展示： Peru 明度稍高的褐色，除了褐色低调，稳定等特性，由于明度关系，还给人温暖的感觉，这个色彩和巧克力色较为接近，同样具有巧克力色的一些特性，也经常被使用到食物当中。 2.back...
CSS常用属性总结
m0_61619549的博客
09-24 4252
布局，定位性，背景，边框，文本，列表，表格，动画(过渡，动画，变形)，.......总结了CSS大部分常用属性及使用方法。
CSS常用样式
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
深入了解 CSS 常用属性
网络狼
10-28 1103
CSS（层叠样式表）是网页设计的核心组成部分，负责控制网页的外观和布局。本文将详细介绍 CSS 的常用属性，包括它们的用途、示例代码和最佳实践，帮助你提升网页设计能力。
CSS层叠样式表
surx123456的博客
01-25 2103
目标：CSS，CSS基础选择器，设置字体样式，文本样式，CSS三种引入方式，使用Chorme调试工具调试样式CSS是层叠样式表（Cascading Style Sheets）简称,有时会称为CSS样式表或级联样式表，CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS规则由两个主要的部分构成：选择器以及一条或多条声明。格式例如p{
css常用代码大全(html+css代码).pdf
07-13
在“CSS常用代码大全(html+css代码).pdf”中，我们可以看到一系列常用的CSS代码及其用法。 首先，关于文本设置，`font-size`用于定义文本的字号，`font-style`可以设置文本的斜体，如`italic`或`normal`，`font-...
常用css属性查询表
01-19
设置元素的背景颜色 background-image 设置元素的背景图像 background-position 设置背景图像的开始位置 background-repeat 设置是否及如何重复背景图像 2.CSS边框属性(border与outline) 属性 描述 ...
CSS常用属性一览表
04-24
### CSS常用属性详解 #### 一、CSS简介 层叠样式表(Cascading Style Sheets, 简称CSS)是一种用于定义HTML或XML等文件样式的计算机语言。它能够为网页设计提供强大的样式控制能力，使得网页内容与表现形式分离，...
css弹出层+屏蔽背景页面(兼容fiefox)----V2.01
07-24 8594
由于之前发表过" css----弹出层+屏蔽背景页面(兼容fiefox) "，看到点击率很高，因此我也对应的花了更多时间去研究这个功能，当我完成这次新版本之后，发现之前那个真的很粗糙，还有很多不足的地方(然而当时却以为做得很好)!这次的版本是结合我学习了《JavaScript高级程序设》第3章 对象基础 之后进行的改版，还是很新手，所以大家不要见笑。    因为我的宗旨是简单易用,而且不含其它
css弹出层+屏蔽背景页面(兼容fiefox)
07-11 3752
07-7-24日发布了最新版本“css弹出层+屏蔽背景页面(兼容fiefox)----V2.01”希望大家继续支持，多提意见，让这个功能逐步完善起来。我想大家都遇到过类似的问题： 只想弹出一个能居中的层 能有屏蔽背景页面并且是半透明效果 能解决下拉框优先度太高的问题 今天用了一个下午的时间整理，把这3个问题都解决了，而且用的是最简洁的代码实现，
css表单
07-04 3172
具有亲和力的表单样色，兼容IE和firefox下正常显示。先看看效果：form.jsp@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>script type="text/javascript" src="../common/js_cs
js+java实现高效简单的批量删除功能
05-23 3028
批量删除功能包括以下文件：jsp页面：list.jsp...@ page contentType="text/html; charset=utf-8" language="java" %>...@ page import="java.util.Vector" %>...@ page import="myclass.common.property.RetProperty" %>...@ 
css按钮
07-04 2133
对于一些常用的按钮的样色设计和用户交互设计先看看效果：这里涉及好几个页面，因为太琐碎了，所以只提供核心的脚本// JavaScript Document//==============================================================================/*                通用控制页脚本    建档时间：
掌握CSS+HTML：全面的CSS颜色对照表
标题“css+html+css颜色对照表”涉及了网页设计和开发的核心技术，即CSS（层叠样式表）和HTML（超文本标记语言），以及CSS颜色属性的应用。在描述中提到的“css2.0电子书”暗示了这些知识与CSS的第二版标准相关，CSS...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值