文章分类 -  (X)HTML/CSS组件

摘要：1.主CSS设置注释方法： ·添加注释目录。 ·添加@import url(reset.css); ·IE6下使用@import会导致闪屏，FOUC问题。如果文档为xhtml，页面出现一个<link>或<script>就不会发生问题。View Code /* CLIMB THE MOUNTAINS by ERSKINE DESIGN VERSION 1.0 CONTENTS ---------- 1.BODY 2.DEFAULT STYLING 3.HEADINGS 4.LINKS 5.IMAGES 6.LAYOUT 7.BRANDING/ 阅读全文

摘要：◇组件名称: 清除浮动◇功能描述： 清楚盒子内部浮动，使父元素覆盖子元素。◇代码演示(3种方式)1.设置父元素overflow属性为hidden：.box { overflow:hidden;}2.设置空的div，属性clear:both;<div class="clearfloat"></div>.clearfloat { clear:both;}3.为父元素添加一个类，样式如下：.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; 阅读全文

摘要：◇组件名称: 页面布局◇功能描述： 各类浮动、固定布局的实例。1.两列的浮动布局 ·一列向左浮动，一列向右浮动，则可以对中间创建视觉隔离带。 ·为提高易用性和可访问性，源代码中主要内容应位于次要内容前面。 DEMO：点此打开2.三列的浮动布局 ·利用二列浮动布局的原理。 DEMO：点此打开3.流式布局（百分比设定宽度） ·利用百分比布局而不是固定像素。View Code .wrapper { width: 76.8%; margin: 0 auto; text-align: left;}.content .primary { width: 72.82%; 阅读全文

摘要：◇组件名称: 日历◇功能描述： 主要是通过CSS对表格进行格式化。◇技术要点： ·对表格格式化，单元格之间的间距要设为0，一方面需要在CSS里设置border-spacing: 0;另一方面要在html里为table标签设置cellspacing="0"。 ·对表格边框模式选用border-collapse: seperate;通过设置边框产生斜面效果。 ·使用CSS3新属性进行文字投影。◇DEMO演示 点此打开DEMO（1） 点此打开DEMO（2） 阅读全文

摘要：◇组件名称: 远程翻转◇功能描述： 在图片上鼠标移动到图片对应人物区域，会有框提示。◇上下文情景： 图片圈人，类似人人网效果。◇工作方式&技术要点 ·使元素框透明，当鼠标出发hover时提供样式，使其显示，达到人人圈人效果。 ·通过下拉菜单的position:absolute;效果，远程调用显示效果。◇DEMO展示1.圈人效果DEMO：点此打开2.圈人特效DEMO：点此打开3.远程翻转DEMO：点此打开 阅读全文

摘要：◇组件名称: CSS翻转器◇功能描述： 鼠标hover图像翻转或效果转换。◇方法介绍（IE6加hovercss.hover） 1.利用伪类:hover属性，为元素翻转时替换另一个样式。 2.CSS精灵，图片都制作在一起，翻转式为图片重新定位。 阅读全文

摘要：◇组件名称: 突出显示不同类型的链接◇功能描述： 不同类型的链接，将会显示不同的图片。◇代码展示1.为外部样式添加链接a[href^="http:"] { background: url(img/externalLink.gif) no-repeat right top; padding-right: 10px;}a[href^="http://www.xxx.com"], a[href^="http://xxx2.com"] { background-image: none; padding-right: 0;}第一条为所有链接添加 阅读全文

摘要：◇组件名称: 不透明度◇功能描述： 创作半透明效果。◇代码展示1.CSS创建半透明效果.box { background-color: #000; opacity: 0.8; filter: alpha(opacity=50); /*proprietary IE code*/}2.CSS3中color新属性RGBa.box { background-color: rgba(0,0,0,0.8);}3.使用PNG透明度其中IE6不支持需使用下面代码：.img-wrapper div { filter:progid:DXImageTransform.Microsoft.AlphaImageLoad 阅读全文

摘要：◇组件名称: 投影效果◇功能描述： 创作图片投影效果。◇上下文情景： 图片展示时产生投影效果，则可以调用此控件。◇工作方式&技术要点 ·CSS位移投影父容器为一张投影头，图片通过左上位移显示阴影，可以用负边距，也可以用相对偏移。 ·CSS3有投影属性box-show创建投影。◇代码展示1.CSS位移投影View Code .img-wrapper { background: url(img/shadow.gif) no-repeat bottom right; float:left; line-height:0;} .img-wrapper img { backgr 阅读全文

摘要：◇组件名称: CSS3圆角◇功能描述： 通过父容器设置多个背景实现圆角效果。◇工作方式&技术要点 ·CSS3支持多背景图。◇代码展示1.多图片圆角View Code .box { background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-posit 阅读全文

摘要：◇组件名称: reset.css◇功能描述： 重置部分元素样式。◇上下文情景： 不同浏览器对元素解释不同，用以重置这些元素。◇版本更新地址：　http://meyerweb.com/eric/tools/css/reset/　http://www.cssreset.com/　http://yuilibrary.com/yui/docs/cssreset/◇代码演示（v2.0 | 20110126）：/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/ht... 阅读全文

摘要：◇组件名称: 下拉菜单◇功能描述： 下拉菜单，1、2用display:none,block实现，3用远程定位position:absolute;实现(推荐使用)。◇上下文情景： 应用于栏目较多的网站，用于首页导航。◇工作方式&技术要点 ·第二级菜单进行隐藏，使用display:none;方法，当父容器:hover时，display:block;使其显示出来。 ·第三级或以上菜单的显示和隐藏不再使用display方法，而是使用visibility:hidden;和visibility:visible;来实现显隐。同样是通过设置父容器的:hover。 ·IE6 阅读全文

摘要：◇组件名称: 表单控件◇功能描述： 展示各种表单。◇技术要点 ·表单每个控件都需要包含于块级元素之内，否则不能通过验证。 ·fieldset会自动为区域加上一个细线边框，将border属性设置为none可以关闭它。 ·若添加了fieldset元素，则需要添加legend元素，否则不能通过验证。由于legend元素在各个浏览器显示效果不同，可以直接display:none;掉。 ·label的cursor属性建议设置为pointer,有利于与用户进行交互。◇DEMO演示 点此打开DEMO（1） 点此打开DEMO（2） 阅读全文

摘要：◇组件名称: 表格布局◇功能描述： 各类表格的HTML结构。◇上下文情景： 表格不应该用于网站的一面布局，而应该用于呈现相关的数据，各类表格的布局体现出语义化和提高可访问性。◇工作方式&技术要点 ·border-collapse属性指定表格应该使用哪种边框模型。取值可以为collapse（折叠边框模型）：相邻的单元格彼此共享边框。separate（独立边框模型）：相邻单元格保留各自的边框。 ·通过<thead>、<tfoot>、<tbody>划分表格结构。其中<thead>要放在<caption>之后（如果 阅读全文