分类: DIV+CSS预览模式: 普通 | 列表

高效使用CSS编码的方法

作者:xiayuesong  日期:2009-03-04

CSS 之所以被看好的原因之一就在于它能减小页面大小，而由此缩短网页下载时间，不仅仅是首页的载入，还包括样式表被缓存以后，后续页面的载入也被加快了的那部分时间。这没错，但首页载入时间的缩短几乎看不出来，这是因为 CSS 代码往往过于冗长了。

　　好吧，现在一切都不同了。学点高效地进行 CSS 编码的技巧吧，让你把样式表马上裁减到最小为止。自然，你可能看不到什么惊人的改变，但对于大站来说，微小的字节减少也很重要。

　　有很多地方可以减少代码的长度，包括 简记属性 (shorthand properties)， 多重声明 (multiple declarations)，默认值 (default values)， 继承 (inheritance)，和空白 (white space)。

　　简记属性

　　Zeroing page margins 提到了一组这样的简记属性，但对于此还有更多的。

查看更多...

Tags: CSS编码

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 380

巧用CSS控制li标记样式

作者:xiayuesong  日期:2009-03-04

说明：

　　设置或检索对象的列表项所使用的预设标记。

　　若list-style-image属***为none或指定图像不可用时，list-style-type属***将发生作用。

　　仅作用于具有display值等于list-item的对象(如li对象)。

　　注意：ol对象和ul对象的type特***为其后的所有列表项目(如li对象)指明列表属***。请参阅我的其他著作。

　　IE5.5尚不支持所有CSS2的值。

　　对应的脚本特***为listStyleType

查看更多...

Tags: CSS li标记

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 351

CSS布局最常用属性float（浮动）和position（定位）的详细解说

作者:xiayuesong  日期:2009-03-01

在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。

首先了解float（浮动）和position（定位）属性的基础知识：

float（浮动）属性：

　　float:none|left|right 
　　取值：
　　　　none: 默认值。对象不飘浮
　　　　left: 文本流向对象的右边
　　　　right: 文本流向对象的左边 

float（浮动）属性的一个实例（一行两列）： 

查看更多...

Tags: CSS布局 float position

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 333

DIV+CSS三行两列经典布局

作者:xiayuesong  日期:2009-01-13

这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师 》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：   
      
<html>  
<head>  
<metahttp-equiv='Content-Type' content="text/html; charset=gb2312">  
<title>SEO参考:XHTML之经典三行两列布局- seobbs.net</title>  
<style type="text/css">  
 
body {  
    background: #999;  
    text-align: center;  
    color:#333;  
    font-family:Verdana,Arial, Helvetica, sans-serif;  
}   
 
 

查看更多...

Tags: CSS实例 div+css 经典布局

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 519

定义超级链接样式

作者:xiayuesong  日期:2008-11-16

    一个超级链接有几种不同的状态：
  • Link：未被访问链接的状态
  • Visited：已访问链接的状态
  • Hover：鼠标正移动过的状态
  • active ：单击链接时的状态

 

　　定义超级链接样式（2-26.htm ）
　　　　<HTML>
　　　　　 <HEAD>
　　　　　　 <STYLE TYPE="TEXT/CSS">
　　　　　　　A:LINK{COLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONE}
　　　　　　　A:VISITED{COLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONE}
　　　　　　　A:HOVER{COLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE}
　　　　　　 </STYLE>
　　　　　 </HEAD>
　　　　　 <BODY>
　　　　　　 <A HREF="#">这是超级链接</A>
　　　　　 </BODY>
　　　 </HTML>

　　  解析：
　　（1）当鼠标一点到超级链接上时，它将自动变大并加一个下划线。
　　（2）可以用 ” TEXT-DECORATION:NONE " 将超级链接的下划线去掉。

Tags: CSS 超链接

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 511

DIV+CSS命名规则之SEO优化

作者:xiayuesong  日期:2008-10-25

　　搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：

　　页头:header

　　登录条:loginBar

　　标志:logo

查看更多...

Tags: div+css 命名规则 SEO优化

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 678

div+css导航菜单收集 + 打包下载

作者:xiayuesong  日期:2008-10-22

CSS经典技巧十则

作者:xiayuesong  日期:2008-08-19

本文由经典论坛 r2no1 翻译整理

原文发表网站：www.webcredible.co.uk

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权，可以自由使用本翻译。

1.CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

<p class="text side">...</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写<p id="text side">...</p>也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

查看更多...

Tags: CSS技巧 CSS

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 493

稀为人知的几个有用的Css技巧

作者:xiayuesong  日期:2008-08-19

关于background的写法

DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}

1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。

2）url括号中的引号是没有必要的，我们可以不写引号 

2.       关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和样式都一样，您可以这样写：

DIV.special{border:1px solid; border-color:color1 color2 color3 color4}

四种颜色一次是上，右，下，左的颜色

 

3.       为了兼容所有的浏览器都可以显示半透明效果的写法

.tranparent{

        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

        -moz-opacity:0.5;

        -kHTML-opacity:0.5;

        opacity: 50%;

        position:absolute;/*注意必须是absolute的*/

        top:100px;

        left:100px;

}

 

4.       _height,_width的作用

使用_height解决float的div不闭合的问题，您可以将_height属性去掉就可以开到效果了。

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}

.column_left{ float:left; width:20%; padding:10px;}

.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

 

<div id="wrap">

 <div class="column_left">

  <h1>Float left</h1>

 </div>

 <div class="column_right">

  <h1>Float right</h1>

 </div>

</div>

 

5.       使用min-height min-width解决div，或者span的固定高度问题

有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height

查看更多...

Tags: CSS技巧 CSS

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 464

div css网站布局的八个小技巧

作者:xiayuesong  日期:2008-08-19

1.若有疑问立即检测

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于 XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素 造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令 

浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。请参阅52CSS.com网站上的教学。

3.边界重合时利用padding或border来避免

您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到margin，那么很容易产生边界的重合。

查看更多...

Tags: DIV CSS 网站布局 布局技巧

分类:DIV+CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 476