`
lovnet
  • 浏览: 6703758 次
  • 性别: 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;
}

分享到：
| Div+CSS 制作三栏式页面布局（左右高度随中 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div+css 实例教程

    本书在详细讲解各个实例的过程中，不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用，更重要的是，结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法、技巧，即使是初学者也可以轻松掌握DIV+CSS...

    CSS设计网页边框的几个实例

    掌握CSS网页布局技术，网页边框效果的定义是基础内容，其中也...相关文章阅读：CSS设计网页时的一些常用规范实例一：CSS：p {padding: 15px; border: 1px solid black; } h5{padding: 0px; border: 1px solid red;}XHT

    HTML/CSS/JavaScript标准教程实例版 第4版

    　这是一本讲解HTML、CSS、JavaScript最基本语法的书，可作为网页制作初学者的入门教程。同时也可为网站建设的专业人士提供一些参考。本书以“讲清语法、学以致用”为指导思想，不仅仅将笔墨局限于语法讲解上，并...

    一些CSS实例及特效

    一些常用的css特效,对web开发，网页制作很有帮助，值得推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    学习jQuery简单伸缩菜单代码实例 50.一款jquery仿flash滑动左侧菜单插件代码下载 51.一款jQuery实现伸缩型菜单源码下载 52.一款jQuery制作仿FLASH动感导航菜单效果(附PSD) 53.又一款jquery蓝色经典的三级...

    别具光芒CSS+Div

    本书在详细讲解各个实例的过程中，不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用，更重要的是，结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法、技巧，即使是初学者也可以轻松掌握DIV+CSS...

    [Dreamweaver、Photoshop、Flash网页制作与网站建设精粹（视频精讲版）].王雪荣等.扫描版

    主要包括网页制作与网站建设入门基础，Dreamweaver CS5.5创建基本文本网页，使用图像和多媒体制作丰富动感的网页，创建网页链接，使用表格和框架排版布局网页，用CSS+Div灵活布局页面，使用模板和库提高网页制作效率...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图旋转及缩放插件下载 56. jquery门户网站首页全屏弹性...

    2天掌握DIV CSS网页制作技术

    【基础六】CSS选择器命名及常用命名 【基础七】盒子模型 【基础八】块状元素和内联元素 ================================= 课程 【第一课】盒模型、块状元素与内联元素、CSS选择器 【第二课】浮动 【第三课】清除...

    JSP Dreamweaver CS4 CSS Ajax动态网站开发典型案例.rar

    Dreamweaver CS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。  学习目标:  ...

    即用即查HTML+CSS标签参考手册

    还有CSS文字属性，CSS元素的背景，CSS边框的设置，CSS边距与补白属性，CSS区块属性，CSS滤镜，其他重要CSS属性。本书有210个HTML标签，99个CSS标签，327段实例源代码。本书适合的读者：从事Web应用开发的人员；网页...

    CSS常用属性缩写实例

    CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS...相关CSS缩写文章：CSS代码缩写实例以及CSS缩写原因总结

    CSS精粹随书实例,一些基础的布局、表单等教程.rar

    CSS精粹随书实例，包括常用的CSS基础操作实例，还有一些高级的用法，像滤镜，调用JS等，内容有文字的CSS定义、列表的制作，实用页面的布局，链接的效果设置，图片列表，图片 文字的显示，文字的显示等，涵盖超多平时...

    自已制作与应用模块简化_集成常用JS网页对话框[代码实现：实例版]

    １、集成提示对话框、用户选择对话框、用户单信息输入对话框和用户多...２、完全用JS+CSS样式实现； ３、实例版：文件中实现了各个对话框的功能转换操作，并且也给出了参数调用方法； ４、在使用中请尊重作者劳动成果。

    JavaScript_JQuery_CSS_DIV漂亮的实例

    52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图旋转及缩放插件下载 56. jquery门户网站首页全屏弹性伸缩...

    零基础学HTML CSS源代码

    多媒体实例手把手—在网页中放视频.html 演示在网页中放视频。 smak slow.mp3 名为smak slow 的mp3多媒体文件。 刻舟求剑.swf 名为刻舟求剑的flash多媒体文件。 第12章（源代码\第12章） 示例描述：本...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例061 网页框架的制作 92 实例062 图片验证码 93 实例063 健康生活提醒 95 2.5 循环控制 96 实例064 员工生日列表 96 实例065 员工详细信息浏览 97 实例066 员工信息的批量删除 98 实例067 表格的动态创建 99 实例...

    CSS精粹随书实例，学习CSS不要错过

    内容索引:电子书籍,CSS 教程,CSS精粹　CSS精粹随书实例，包括常用的CSS基础操作实例，还有一些高级的用法，像滤镜，调用JS等，内容有文字的CSS定义、列表的制作，实用页面的布局，链接的效果设置，图片列表，图片+...

    CSS常用属性的代码简化实例

    CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小...下面用一些比较常用的属性来做示例。margin　margin-top:1px;　margin-right:1px;　marg

Magicbox
Global site tag (gtag.js) - Google Analytics