百宝箱

最新推荐文章于 2023-11-05 19:43:49 发布

weixin_34391445

最新推荐文章于 2023-11-05 19:43:49 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/zhengguangITelite/archive/2010/07/21/Div_Css.html

版权

本人工作中的总结方便以后的回眸

1、为页面添加DOCTYPE

由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

!DOCTYPE 声明指定文档遵从的 DTD，如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2、将IE8指定为IE7模式进行显示

IE6浮动元素会加倍要用display:inline;处理。

3、META的语法

使用<META>标记元素便可实现上述功能。先看其语法

<META

content = "META数据的属性值"

name = "META数据的属性名"

http-equiv = "HTTP用的属性名"

scheme = "属性值的形式"

lang = "语言代码"

>
设置语言字符集

字符集的设置方法是http-equiv设置为"Content-Type"，Content设置为"text/html;charset=文字集"，文字集根据不同国家而不同，中文简体：gb2312，中文繁体：big5，日文：Shift_JIS等。一个有质量的网页离不开式样单(StyleSheet)描述(Script)语言，式样单的设置方法是http-equiv设置为"Content-Style-Type"，Content设置改为"text/css"。脚本的设置方法是将http-equiv设置改为"Content-Script-Type"，Content设置改为"text/脚本语言"，脚本语言一般常见的有VbScript和JavaScript两种。

设置换页特效

<META http-equiv = "Page-Enter" content = "blendTrans(Duration=3.0)"> ◆Page-Enter:进入本页

<META http-equiv = "Page-Exit" content = "revealTrans(Transition=20)"> ◆Page-Exit :离开本页

<META http-equiv = "Site-Enter" content = "blendTrans(Duration=3.0)"> ◆Site-Enter:进入本站

<META http-equiv = "Site-Exit" content = "revealTrans(Transition=23)"> ◆Site-Exit :离开本站

s02_03.htm

◆content="blendTrans(Duration=3.0)"

设定换页效果为混合，就是淡入淡出。Duration=3.0 是设定特效的持续时间(秒)。

对于持续时间，太短看不出效果，太长浪费时间，建议为3-5秒之间。

◆content="revealTrans(Transition=20)"

设定换页特效的方式。Transition=value 中的value可以是0-23:

00. 方块出现 01. 方块消失 02. 圆形向内 03. 圆形向外

04. 向上擦拭 05. 向下擦拭 06. 向左擦拭 07. 向右擦拭

08. 垂直窗帘 09. 水平窗帘 10. 棋盘交错 11. 棋盘向下

12. 随机分裂 13. 垂直分割进入 14. 垂直分割离开 15. 水平分割进入

16. 水平分割离开 17. 向左下方剥落 18. 向左上方剥落 19. 向右下方剥落

20. 向右上方剥落 21. 水平随机列 22. 垂直随机列 23. 随机

设置关键字

作者名、内容介绍、关键字的设置对专业人员来说是起码的素质，同时也可以是访问者通过搜索引擎方便地找到你的内容。

<META name = "Author" content = "小雅"> ◆作者

<META name = "Discription" content = "Visual C++"> ◆内容

<META name = "Keywords" content = "C,C++,SDK,API"> ◆关键字

辅助的还有：

<META name = "expires" content = "31 December 2002"> ◆這篇網頁何時需要從登錄資料庫中刪除

<META name = "distribution" content = "global"> ◆這篇網頁是全世界性的

<META name = "revisit-after" content = "30 days"> ◆30天后再访问该网页，也許要重新登錄

<META name = "robots" content = "all"> ◆让搜索引擎来登录这篇网页

<META name = "pragma" content = "no-cache"> ◆这篇网页不需要登录

设置定时刷新

定时刷新的方法是http-equiv设置为"Refresh"，Content设置为"秒数"，定时转到其他地址的方法是http-equiv设置为"Refresh"，Content设置为"秒数；URL=转移的地址 "。

4、css中强制ul中的li换行问题

换行#dh li { word-wrap:break-word; white-space: pre; }

不换行#dh li { white-space: nowrap; overflow:hidden; }

</style>

<ul id="dh">
<li>无序列表条目1</li>
<li>无序列表条目2</li>

<li>无序列表条目3</li>

</ul>

5、utf-8 中空格显示在ie6、ie7、ie8、火狐中不一致

具体表现为代码中一个空格在火狐的间距比ie的间距要大
解决办法：
<style type="text/css">
body{ font-family:SimSun, Arial; }

</style>

6、区分IE6、IE7、IE8、火狐

padding:5px 8px 0px 8px;/*火狐*/

padding:3px 8px 0px 8px\9;仅IE识别：
padding:3px 8px 0px 8px\0;/*IE8*/
*padding:3px 8px 0px 8px;/*IE7*/
_padding:2px 8px 0px 8px;/*IE6*/

7、IE7、FF、opera、谷歌下DIV自适应宽度

在DIV的CSS中加入这句：min-height:200px;height:auto;
IE6以下版本不识别。

width:expression(document.body.clientWidth > 600? "600px": "auto" );

8、CSS控制隔行换色效果

.myul1 li{

background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li2">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
</ul>

9、收藏夹小图标

10、css hack的使用跨浏览器开发经验总结

1、CSS类级别的hack

仅IE7及IE8识别 *+html {…}

IE6及IE6以下识别 * html {…}

opera、safari、chrome识别：

@media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则

仅opera识别：

@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}

2 、CSS属性级别的hack

仅IE识别： margin:10px\9; padding:10px\9;

仅IE8识别： margin:10px\0; padding:10px\0;

仅IE识别： *margin:10px; *padding:10px;

仅IE6识别 : _margin:10px; _padding:10px;

CSS Hack综合示例：

/**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/

.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}

@media all and (min-width: 0px){

.news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}

}

3、HTML代码片断级别的hack（仅IE识别）

①

②

③

④

⑤

11、用脚本设置CSS属性

1、设置元素的style样式

Var spanElement = document.getElementById(“mySpan”);

//下面写法保证出IE外，所有浏览器可用

spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);

//下面的写法保证IE可用

spanElement.style.cssText=”font-weight:bold;color:red;”;

document.getElementById("11").offsetHeight;

document.getElementById("11").style.cssText="height:820px;";

2、设置元素的class属性

Var element = document.getElementById(“myElement”);

//下面的写法保证除IE外，所有浏览器可用

Element.setAttribute(“class”,”styleClass”);

//下面写法保证IE可用

Element.setAttribute(“className”,”styleClass”);

12、具体CSS效果的实现

1、按钮悬停时鼠标呈现手的形状

cursor:hand和cursor:pointer效果是一样的，当鼠标移动至该元素时呈现手的形状。但是应该尽量使用cursor:pointer而非cursor:hand，因为cursor:hand只有IE识别，而cursor:pointer才是CSS2.0的标准属性，IE之外的浏览器也支持。

2、窗口滚动条显示问题

在使用弹出窗口或者框窗口架的时候，有时会有多余的滚动条出现，这时需要从多个方面进行确认：

弹出窗口时window.open方法参数中设置的窗样式是否定义了scroll=yes
框架标签的属性中是否设置了scrolling=“yes”
窗口或框架内页面的CSS中，是否对html或body的overflow进行了样式定义，如果没有请参考如下代码。

html {

margin: 0;

padding: 0;

overflow-x:hidden;

overflow-y:hidden;

}

3、line-height 属性

line-height行高指的是文本行的基线间的距离，即字体最底端与字体内部顶端之间的距离。如下图所示：

文本之间的空白距离（行距）不仅仅是行高决定的，同时也受字号的影响。有时侯同一行内的不同元素底边没有对齐，有可能就是行高不统一造成的，这时只调整高度和对齐方式是不够的，还需要调整line-height属性。

4、display:inline-block

display 属性有三个值：block，inline，inline-block。其中display:block就是将元素显示为块级元素；display:inline就是将元素显示为行内元素；display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

l block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子， display属性默认值为block。

l inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子， display属性默认值为inline。

l inline-block的元素特点：呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性，目前IE8、Firefox3、Opera、Safari都可以支持该属性了。

13、自动换行问题

1、div中的文字目前控制换行是使用以下CSS：

div．content {

word-wrap:break-word;

overflow:hidden;

}

在 IE 、Firefox、Safari、Chrome下没有任何问题，但是在 Opera下，长串英文会被遮住超出的内容。如果想要让长串英文字符也自动换行，还需要设置word-break:break-all; （但是，此方式会导致普通的英文语句中的单词会被断开，ie下也是）。英文单词在排版规则上不应该被断开，长串英文字符其实就是一个比较长的单词，自然也不需要断开换行显示了，所以一般不需要额外设置word-break:break-all; 。

2、textarea中的文字自动换行问题

在textarea中设置输入内容的自动换行，也是在CSS中设置word-wrap:break-word;属性。需要额外注意的是textarea元素本身有一个warp属性，其取值含义如下：

l off：不自动换行；

l hard：自动硬回车换行，换行标记一同被传送到服务器端（Opera、Chrome下不传）；

l soft：自动软回车换行，换行标记不会传送到服务器端。

14、标准HTML标签的正确使用

1、尽量使用div+css布局,不用table做布局。

使用table做布局容易造成代码冗余，相对<div></div>编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。

应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

2、注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。

有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如：

</form>

</div>

3、定义table时使用tbody元素，以保证包括IE在内的所有浏览器可正确使用

即使table没有显示定义tbody元素,浏览器也会认为tr节点的父节点是一个自动添加的默认tbody节点.为了避免使用javascript操纵tr节点时可能产生的误会, 还是手动添加一个比较好，如：

<tr>

<td>

</td>

</tr>

</tbody>

</table>

4、注意标签及属性的大小写

有的时候，有些绑定在元素上的事件在IE浏览器下响应，在safari或其他浏览器下却不响应。这时候需要检查事件绑定方式的正确性，高级事件的绑定需要区别IE和其他浏览器写两套javascript，而简单事件模型需要注意一下绑定事件名的大小写。如：

这里应该用小写的onfocus，并且显示的添加标签闭合符号才是规范的写法。

15、注意标签的属性值设置

1、<script>标签的language和type属性

2、<a>标签的alt和title属性

虽然alt和title这两个属性的值在IE下都会以tool tip的方式在鼠标悬停时显示，但是二者还是有区别的。alt是图片没有显示出来的时候的替代显示，而title才是鼠标放到上面时的提示。

3、<input>标签的checked、readonly属性

在早期版本的HTML中，并没有强制规定所有的属性都应该赋值，在表示一个选中的复选框时，<input checked > 这样的写法是被认可的。但是根据XHTML的标准，这样的文法并不是一个严格的XML格式，应该注意对属性的赋值和标签的闭合，以顺应HTML标准发展的趋势，写成这样：

4、<option>标签的select ed属性

与上一条相同的理由，<select>选项中<option>标签的selected属性也应该赋值：

< option selected="selected" />

5、<img>标签的 align="absmiddle" 属性

根据XHTML的标准，HTML标签应该专注于内容的表示，而不是样式的控制，样式应该交给CSS调整。所以废弃了一些旧的标签和属性，比如<em>标签和<i>标签都会让标签内容中文字以斜体显示，但是<i>标签这种单纯以样式命名的标签已经属于废弃的标准了，取而代之的是表示emphasis（强调）含义的<em>标签。同理，<img>标签的align="absmiddle" 属性表示该图片和相邻文字垂直居中对齐，这也是表示样式的属性，应该使用CSS而不是这个属性来控制图片的对齐样式，避免两处样式控制的相互影响。

6、<iframe>标签的frameborder属性

在使用iframe时，IE中或许只要设置border=“0”就可以不显示iframe的边框了，但是标准的控制frame窗口边框的属性是frameborder，应该设置frameborder=“0”才能在IE之外的其他浏览器中同样隐藏frame的边框：

7、<table>标签的cellpadding属性

这个属性同<img>标签的 align属性一样，也是一个僭越了HTML自身表示内容的职责而控制样式的一个属性，它规定的是单元之间的空间。从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来控制单元格的内边距。

8、<td>标签的nowrap属性

nowrap是表示内容不自动换行的属性，但是同上面的属性一样，这是一个控制样式的属性。在 HTML 4.01 中，<td>标签的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。在 XHTML 1.0 Strict DTD 中，<td>标签的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。

16、网站优化

我们知道用户都喜欢浏览速度快的网站，不喜欢花费太多的时间等待网页的打开，等待的时间过长，会让用户失去耐心，甚至烦躁时会直接关闭网页，这样就会失去一些潜在的客户了。其次，关键字的排名与网页的打开速度也有关系，谷歌Google的Web搜索团队在官方博客上宣布，将把网站的速度作为PR（PageRank）算法的一个因子，在所有因素都相等的情况下，速度快的网站将排在速度慢的网站前面。

因此我觉得我们有必要去提高网页的打开速度，下面我来教大家一些小技巧提高网页的打开速度。

1.优化css。我们知道css的出现，使内容和元素的表现方法分离，用户打开用css设计的网页，css一般被下载用户本地计算机，不像html元素表现标签，每次网站的网页都要调用一次，使用css，只需要一次就好了！另外，css在某些地方可以替代图片，这就是为什么现在提倡div+css的原因！不过，使用dw写css，也会有些多余的css代码。Css太臃肿的话，也会影响网页的速度，这里介绍一款工具cleancss给大家试试，它是一款在线工具。另外就是手工精简代码，这个确实有这个对于新手确实有难度，不过，多看一些精简css技巧的文章会对你有帮助的，看得多了，也就知道那些代码可以精简了。

2.优化图片。这个没有什么技巧，通过软件就搞定了。我喜欢用ps，在ps中选择存储web所用格式，然后选择图片的质量等选项，图片看起来很清楚，大小又合适保存就可以了。

3.图片格式问题。选择正确的图片格式是非常重要的。Jpg一般用于照片或真彩色图片，gif运用平面色彩的图片，一般用于按钮或logo图片，png和gif非常相似，不过就是多支持一些色彩！

4.图片长宽的标记问题。这个问题一般在html中可以看到，一些人经常忘记写图片的长和宽了。这些标记是告诉浏览器打开图片之前的尺寸，浏览器加载网页时就会保留一块区域，加快整个网页显示速度。

5.在url中要学会用”/”。当一个用户打开类似一个url后面没有”/”，服务器就要确定什么类型的文件或是网页，这时你在网址后面加一个”/”，这时服务器就知道是一个目录的页面，减少载入时间。

6.减少网页的响应次数。对于网页的打开，其实是很复杂的过程。从网页的申请打开，到web服务器的响应，编译等动作，然后发回给浏览器，才显示我们面前的文字和图片，多媒体文件等。所以我要尽量减少响应次数，现在ajax在这方面就运用的不错。当然，一个静态页面就例外了，静态页面多注意图片大小和网页设计上就行了。

转载于:https://www.cnblogs.com/zhengguangITelite/archive/2010/07/21/Div_Css.html

weixin_34391445

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百宝箱

本人工作中的总结方便以后的回眸1、为页面添加DOCTYPE由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。!DOCTYPE 声明指定文档遵从的 DTD，如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio...
复制链接

扫一扫

百宝箱

“相关推荐”对你有帮助么？