css实例 | CSSwang-CSS网站

超炫、时尚的CSS3进度条

Added on:01 06th,2012| 0 comments css3, 进度条

时尚的CSS3进度条先看效果图，非常漂亮吧： HTML代码： <div class="progress-bar blue stripes"> <span style="width: 40%"></span> </div> .progress-bar – 定义进度栏的常规样式。 .blue – 定义进度条的风格，这里是蓝色的 .stripes – 当前进度的动画类型...

Read more...
用Minify来优化加速你的网站

Added on:12 08th,2011| 0 comments 前端优化，Minify

Web 性能越来越被重视，其中很重要的一条是减少 HTTP 请求，减少 HTTP 请求包括很多方面，今天来介绍一下用 Minify 减少网站的 HTTP 请求。 Minify 是 PHP5 应用程序，它能合并、压缩 js 和 css 文件，并且能通过 HTTP gzip/deflate 及一些相关头，优化客户端缓存。下图是一网站加载文件 js 文件...

Read more...
使用定位position替代部分float进行定位

Added on:11 25th,2011| 0 comments css, HTML, 定位, 浮动

CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 position 属性值的含义： static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间...

Read more...
细节决定成败-合理表现响应区域

Added on:09 30th,2011| 1 comment 响应区域

先举个简单的示例：机票排序模块，当点击其中一个筛选条件“起飞时间”时通过虚线框的位置可以看到文字所占的区域，而事实上整个按钮都能响应该事件，那给用户造成的错觉就是似乎只有文字部分是可点击区域，这就需要对文字的样式进行合理设置，扩大响应区域，见下图：继续优化：a:focus { outline...

Read more...
细节决定成败–无css时网页的可读性

Added on:09 30th,2011| 1 comment 可读性，css细节

先看看效果图，一个选择酒店模块如下图：代码结构如下： <dl> <dt>酒店</dt> <dd>北京</dd> <dd>上海</dd> </dl> <ul> <li>北京酒店列表</li> <li>北京酒店列表</li> <li>上海酒店列表</li> <li&g...

Read more...
图片元素img下多余空白BUG处理方案

Added on:08 03rd,2011| 0 comments 空白BUG

在页面进行采用Xhtml+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。 1、将图片转换为块级对象即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 2、设置图...

Read more...
CSS3圆角详解

Added on:06 24th,2011| 1 comment css3, 圆角

一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。提高网页性能。由于不必再发出多余的HTTP请求，网页的...

Read more...
更简洁的 CSS 清除浮动办法

Added on:06 21st,2011| 0 comments 浮动

清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; cl...

Read more...
IE6下 div最小高度不能为0的解决方法

Added on:05 31st,2011| 0 comments

在网页布局时常会用到 DIV 来显示一些边角背景，需要设置较小的高度，默认情况下，IE6 中设置 DIV 较小高度会不起作用，在 IE7、FF 等浏览器不存在这个问题。 IE6 下默认的字体尺寸大致在 12 – 14px 之间，当你试图定义一个高度小于这个默认值的 DIV 的时候， IE6 会固执的认为这个层的高度不...

Read more...
display:table-cell简单使用

Added on:05 30th,2011| 0 comments table-cell, zoom

如果要做这种效果的布局，就必须要用到display:table-cell了，单用zoom也可以做到在IE6有效果，但在IE7 FF下就不行。要兼容，必须加上display:table-cell. 效果如图：前端代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...

Read more...