您现在的位置是：网站首页> 编程资料编程资料

CSS XTHML书写规范以及常见问题总结(页面最优化)_心得技巧_网页制作_

2021-09-12 1149人已围观

简介这是去年为公司培训的时候写的整理的一个白皮书，希望大家多多提出意见。谢谢！

项目文档目录
div+CSS命名规范 - 4 -
Div+css命名规范 - 4 -
1.1. div+css命名规范 - 4 -
1.2. CSS的Id命名规范 - 4 -
1.3. css样式文件命名 - 5 -
XHTML编码基本规范 - 6 -
XHTML编码基本规范 - 6 -
推荐网页制作规范 - 10 -
推荐网页制作规范 - 10 -
Css常用优化技巧 - 11 -
Css浏览器兼容性问题总结 - 20 -
JavaScript浏览器兼容性总结 - 30 -
XHTML标准的DIV+CSS布局对于网站SEO的影响 - 35 -

div+CSS命名规范
Div+css命名规范
Css的命名是区分大小写的，建议全部使用小写。下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：
1.1. div+css命名规范
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight产品管理

1.2. CSS的Id命名规范

外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的：current

1.3. css样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
通用：basic.css

上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。上面的命名几乎涵盖了所有的经常使用到的样式。

XHTML编码基本规范

XHTML编码基本规范
2.1 所有的标记都必须要有一个相应的结束标记
　XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如：
　网页设计师

2.2 所有标签的元素和属性的名字都必须使用小写
　　与HTML不一样，XHTML对大小写是敏感的，和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的。 2.3 所有的XHTML标记都必须合理嵌套 　　同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： 　　/b>必须修改为：/p> 　　就是说，一层一层的嵌套必须是严格对称。 2.4 所有的属性必须用引号""括起来 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如： 　　<height=80>必须修改为：<height="80"> 　　特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： 　　<alt="say'hello'"> 2.5 把所有<和&特殊符号用编码表示 任何小于号（<），不是标签的一部分，都必须被编码为< ; 　　任何大于号（>），不是标签的一部分，都必须被编码为> 　　任何与号（&），不是实体的一部分的，都必须被编码为& 2.6 给所有属性赋一个值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap><input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked"> 2.7 不要在注释内容中使“–” “–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的： <!–这里是注释———–这里是注释–> 用等号或者空格替换内部的虚线。 <!–这里是注释============这里是注释–> 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 2.8 引用样式和脚本语言时type属性不能省略 <script language="javascript" type="text/javascript"> 注意：type="text/javascript"不能省略。 2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错 事例： <script>和<style>标记的内容必须被包围在CDATA段中。 例如： <script type="text/javascript"> <![CDATA[ function func(a, b) { if (a < b) return true; } ]]></script> 注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会 被误认为是另一个XHTML标记的开始，引起一些不必要的错误。 需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用 JavaScript注释来避免： <script type="text/javascript"> /* <![CDATA[ */ function func(a, b) { if (a < b) return true; } /* ]]> */ </script> 或者 <script type="text/javascript"> // <![CDATA[ function func(a, b) { if (a < b) return true; } // ]]> </script> 当然，最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。 2.10 将所有的样式放在style中 例：<td width="4"></td> 这样写不符合标准。 我们要这样写：<td style=”width:4px;”></td> 2.11 样式属性最后一个后面一定要加上分号 2.12 使用id属性，而不是name属性。 在HTML中，name属性可以用来标识identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。ID不能重复。 2.13 属性值中空格的处理。 属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如 如下两个属性的值相同： <input value="HTML is out" /> <input value=" HTML is out " /> 2.14 使用恰当的文档类型声明和命名空间。 2.15 使用meta元素声明你的内容类型。 2.16 使用img时要添加alt属性，可设为空 2.17 使用img时align=absmiddle属性在W3C验证下通不过 　大家都知道，要想让图片和文字垂直居中对齐的话，可以在IMG标签下添加align=absmiddle属性即可实现，但align=absmiddle属性在W3C验证下通不过[验证地址请查看W3C网页标准验证服务地址]，那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢，答案是肯定的。 可以在CSS中加入vertical-align:middle;就能实现了 事例： <div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div> <div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div> <div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div> 2.18 不建议使用过时属性和标签 为了更好的处理网站的兼容性问题，我建议不要使用过时标签和属性 2.19 将VS2005的验证标准调整为XHTML1.0或更高版本 备注： XHTML 1.0 Transitional WEB标准产生的问题 曾经流行一时的HTML标记语言已经被官方认为过时了，将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML规则书写，那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器，跨设备以及跨平台的一致性支持。 XHTML有如下两个主要目标： · 将文档的结构（使用XHTML标记语言）和表现（使用CSS）分开 · 将HTML作为一种XML书写 对于第一个目标，W3C删除了一些HTML的标记以及属性，例如和bgcolor，因为这些标记或属性并不是文档结构中的一部分，而只是用来描述文档应该如何被显示，因此应该定义在CSS文件中而不是HTML中。同样，某些特定的标记内容并不一定要显示成特定的样子。比如，<h1>标记里内容显示的字号完全可能小于里的内容，这些取决于CSS中的定义。当然，<h1>一般用于显示一篇文档的标题信息，它的重要程度一般也应该高于中的内容，所以通常的浏览器都会以一个较大的字号来显示。 对于第二个目标，XHTML将严格遵守XML的严格语法。可以说XHTML是HTML依照XML语法重构的结果。换句话说，当你编写XHTML文档的时候，其实是在编写一份特化了的XML文档。XML文档有着比HTML严格多了的语法，这些将在本文稍后部分讨论。 XHTML有三个版本： · XHTML 1.0 Transitional · XHTML 1.0 Strict · XHTML 1.0 Frameset XHTML 1.0 Transitional包含HTML4.01的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML开发者更容易的接受并使用XHTML。 XHTML 1.0 Strict就是严格版本的XHTML了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS控制页面的显示而不是使用，bgcolor之类的标记或属性。 XHTML 1.0 Frameset用于把文档分割成几个桢以显示不同的内容。（XHTML 1.0 Transitional和Strict 页面不允许包含<frameset> 标记）。 这里不再赘述更多有关XHTML的介绍，如果感兴趣，可以使用Google或者MSN Search找到很多相关资料或是详细介绍。也欢迎在本贴下留下您的评论与问题，让我们共同探讨。接下来是一些书写XHTML的基本规则。 参考网址：http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html http://www.chinaz.com/Design/Pages/10091JN2007.html 推荐网页制作规范 推荐网页制作规范 3.1 命名规范 文件命名的原则： 以最少的字母达到最容易理解的意义。 一般文件及目录命名规范： 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm 图片的命名规范： 名称分为头尾两两部分，用下划线隔开。 头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. 有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。 其它文件命名规范： js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js 所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi 3.2 目录结构规范 目录建立的原则：以最少的层次提供最清晰简便的访问结构。 目录的命名以小写英文字母，下划线组成。(参照命名规范) 根目录一般只存放index.htm以及其他必须的系统文件 每个主要栏目开设一个相应的独立目录 根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 所有JS脚本存放在根目录下的scripts目录 所有CSS文件存放在根目录下App_theme目录 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 Css常用优化技巧 CSS常用优化技巧 4.1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 参考网址：http://homepage.yesky.com/97/7643097.shtml 4.2.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 4.3.区分大小写 当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 4.4.取消class和id前的元素限定 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的， class可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。 4.5.默认值 通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： * { margin:0; padding:0; } 4.6.不需要重复定义可继承的值 CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。 4.7.最近优先原则 如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中，你已经定义了元素p，又定义了一个class update p { margin:1em 0; font-size:1em; color:#333; } .update { font-weight:bold; color:#600; } 这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。 4.8.多重class定义 一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。 .one{width:200px;background:#666;} .two{border:10px solid #F00;} 在页面代码中，我们可以这样调用 <div class=”one two”></div> 这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。 4.9.使用子选择器(descendant selectors) CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码： <div id=subnav> <ul> <li class=subnavitem><a href=# class=subnavitem>Item 1</a></li>> <li class=subnavitemselected><a href=# class=subnavitemselected> Item 1</a></li> <li class=subnavitem><a href=# class=subnavitem> Item 1</a></li> </ul> </div> 这段代码的CSS定义是： div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 你可以用下面的方法替代上面的代码 <ul id=subnav> <li><a href=#> Item 1</a></li> <li class=sel><a href=#> Item 1</a></li> <li><a href=#> Item 1</a></li> </ul> 样式定义是： #subnav { /* Some styling */ } #subnav li { /* Some styling */ } #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ } 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。 4.10.不需要给背景图片路径加引号 为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如： background:url(images/***.gif) #333; 可以写为 background:url(images/***.gif) #333; 如果你加了引号，反而会引起一些浏览器的错误。 4.11.组选择器(Group selectors) 当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。 例如：定义所有标题的字体、颜色和margin，你可以这样写： h1,h2,h3,h4,h5,h6 { font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; } 如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如： h1 { font-size:2em; } h2 { font-size:1.6em; } 4.12.用正确的顺序指定链接的样式 当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。 如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。 4.13.清除浮动 一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。 通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。 4.14.横向居中(centering) 这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样： 你可以这样定义使它横向居中： #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; } 但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样： body { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; } 第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。 4.15.导入(Import)和隐藏CSS 因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如： @import url(main.css); 然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法： @import main.css; 4.16.针对IE的优化 有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(Hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。 1.注释的方法 (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector): html>body p { /* 定义内容 */ } (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) * html p { /* declarations */ } (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧： /* */ * html p { declarations } /* */ 2.条件注释(conditional comments)的方法 另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：  4.17.调试技巧：层有多大？ 当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。 另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。 4.18.CSS代码书写样式 在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式： selector1, selector2 { property:value; } 当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。 我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。 最后，关闭的大括号}单独写一行。 空格和换行有助与阅读。 推荐阅读： https://www.jb51.net/article/15758.htm http://portal.oss.org.tw/files/95/a/a6.pdf http://en.wikipedia.org/wiki/XHTML http://www.w3.org/TR/2000/REC-xhtml1-20000126/ http://www.dreamdu.com/xhtml/function_xhtml11/ Css浏览器兼容性问题总结 CSS对浏览器的兼容性总结 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. 以下为我们工作中经常用到的或是遇到的问题。 CSS技巧 5.1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 5.2.margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 5.3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 5.4.IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 5.5.页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 5.6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"><div id="left"></div><div id="right"></div></div> 5.7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 5.8.float的div闭合;清除浮动;自适应高度; ① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”><#div class=”NOTfloatC”>之 提示： 本文由神整理自网络，如有侵权请联系本站删除！ 本站声明： 1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！ <div class="nextinfo"> 上一篇：<a href="/programinfo/?id=7937">静态页面与动态页面各自的执行机制说明_心得技巧_网页制作_</a> 下一篇：<a href="/programinfo/?id=7939">firefox浏览器中播放背景音乐的终极解决方案(chrome多浏览器兼容)_心得技巧_网页制作_</a> </div> </div> </div> <div class="whitebg"> <h2 class="htitle">相关内容</h2> <ul class="otherlink"> <li><a href="/programinfo/?id=7937">静态页面与动态页面各自的执行机制说明_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7936">网站该在什么时候才应该放置广告_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7935">网页设计中的表单设计技巧小结_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7934">做网站用UTF-8编码还是GB2312编码？ _心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7933">MIME的编码介绍(由网上资料和实践经验整合)_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7932">网站图标Icon添加方法！_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7931">写给入门者的三十条HTML代码编写指南_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7930">Web 前端开发经验小结_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7929">IE6中PNG Alpha透明(全集)_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=7928">IE6中奇数宽高的BUG_心得技巧_网页制作_</a></li> </ul> </div> </div> <div class="rbox"> <div class="whitebg paihang"> <h2 class="htitle">点击排行</h2> <ul> <li><a href="/programinfo/?id=1208905">唯唯绸否猜打一最佳正确生肖[最佳成语最佳释义解释答]</a></li> <li><a href="/programinfo/?id=154665">TYSB手游公测版下载-TYSB官方唯一正版手游下载 _安卓网</a></li> <li><a href="/programinfo/?id=1208911">士绅名流代表是指什么生肖数字，成语释义解释落实</a></li> <li><a href="/programinfo/?id=1208910">士绅名流代表什么生肖，成语释义解释落实</a></li> <li><a href="/programinfo/?id=1208903">洗牌猫下载-洗牌猫(卡牌对战)Shuffle Cats v0.14.8_安卓网</a></li> <li><a href="/programinfo/?id=1208909">士绅名流是指代表什么生肖、释义成语解释落实</a></li> <li><a href="/programinfo/?id=1208902">丛林动物宝宝发型沙龙游戏-丛林动物宝宝发型沙龙(休闲装扮)Baby Jungle Animal Hair Salon v1.0.10_安卓网</a></li> <li><a href="/programinfo/?id=1208895">超人跑跑游戏下载-超人跑跑(横版动漫酷跑) v1.0.0_安卓网</a></li> </ul> </div> <div class="whitebg tuijian"> <h2 class="htitle">本栏推荐</h2> <ul> <li> <a href="/programinfo/?id=436025"> pandas获取对应的行或者列方式_python_ </a> </li> <li> <a href="/programinfo/?id=436024"> <img src="//img.jbzj.com/file_images/article/202402/202402240855301.jpg" onerror="javascript:this.src='/static/images/1.jpg';"> pandas如何获取某个数据的行号_python_ </a> </li> <li> <a href="/programinfo/?id=436023"> <img src="//img.jbzj.com/file_images/article/202402/202402240916472.png" onerror="javascript:this.src='/static/images/1.jpg';"> python进程池Pool中apply方法与apply_async方法的区别_python_ </a> </li> <li> <a href="/programinfo/?id=436022"> python array中关于[a，b，c]的使用方式_python_ </a> </li> <li> <a href="/programinfo/?id=436021"> <img src="//img.jbzj.com/file_images/article/202402/202402240929274.jpg" onerror="javascript:this.src='/static/images/1.jpg';"> Python进程multiprocessing.Process()的使用解读_python_ </a> </li> <li> <a href="/programinfo/?id=436020"> selenium常用API的使用过程记录（包括自动登录）_python_ </a> </li> <li> <a href="/programinfo/?id=436019"> Python使用multiprocessing如何实现多进程_python_ </a> </li> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <li><a href="/programinfo/?id=436025">pandas获取对应的行或者列方式_python_</a></li> <li><a href="/programinfo/?id=436024">pandas如何获取某个数据的行号_python_</a></li> <li><a href="/programinfo/?id=436023">python进程池Pool中apply方法与apply_async方法的区别_python_</a></li> <li><a href="/programinfo/?id=436022">python array中关于[a，b，c]的使用方式_python_</a></li> <li><a href="/programinfo/?id=436021">Python进程multiprocessing.Process()的使用解读_python_</a></li> <li><a href="/programinfo/?id=436020">selenium常用API的使用过程记录（包括自动登录）_python_</a></li> <li><a href="/programinfo/?id=436019">Python使用multiprocessing如何实现多进程_python_</a></li> </ul> </div> </div> </article> <footer> <div class="box"> <div class="wxbox"> <ul> <li><img src="/static/images/wx.png">我的微信</li> </ul> </div> <div class="endnav"> 关于我们 神代码(http://7zz.net )是IT资源下载与IT技能学习平台。js代码网收集整理了最新IT开发视频教程、网站模板、网站源码、js特效(插件)等，充分满足IT用户对不同类型资源的下载需求。代码网拒绝滥竽充数，我们只提供精品资源！ <a data-ext-mark="custom-02" href="http://wpa.qq.com/msgrd?v=3&uin=512953070&site=qq&menu=yes" rel="nofollow" class="btn-contact custom-w" target="_blank" style="color: #448aff;"> 站长QQ:512953070 </a> 本站会员：615 © 技术支持：<a href="http://7zz.net" title="神代码" target="_blank">神代码（http://7zz.net）</a> <a href="http://blog.sixgod.net/programinfo/?id=7938" title="blog.sixgod.net" target="_blank">blog.sixgod.net</a> <a href="http://blog.haifeisi.net/programinfo/?id=7938" title="blog.haifeisi.net" target="_blank">blog.haifeisi.net</a> <a href="http://blog.flerken.cn/programinfo/?id=7938" title="blog.flerken.cn" target="_blank">blog.flerken.cn</a> <a href="http://blog.bieha.cn/programinfo/?id=7938" title="blog.bieha.cn" target="_blank">blog.bieha.cn</a> <a href="http://blog.miuti.cn/programinfo/?id=7938" title="blog.miuti.cn" target="_blank">blog.miuti.cn</a> <a href="http://blog.dk028.com/programinfo/?id=7938" title="blog.dk028.com" target="_blank">blog.dk028.com</a> <a href="http://blog.scflcp.cn/programinfo/?id=7938" title="blog.scflcp.cn" target="_blank">blog.scflcp.cn</a> <a href="http://blog.bzbl.cn/programinfo/?id=7938" title="blog.bzbl.cn" target="_blank">blog.bzbl.cn</a> <a href="http://blog.mlft.cn/programinfo/?id=7938" title="blog.mlft.cn" target="_blank">blog.mlft.cn</a> <a href="http://blog.7zz.net/programinfo/?id=7938" title="blog.7zz.net" target="_blank">blog.7zz.net</a> <a href="http://blog.liuyifei.net/programinfo/?id=7938" title="blog.liuyifei.net" target="_blank">blog.liuyifei.net</a> <a href="http://blog.58t.net/programinfo/?id=7938" title="blog.58t.net" target="_blank">blog.58t.net</a> <a href="http://blog.yamiao.net/programinfo/?id=7938" title="blog.yamiao.net" target="_blank">blog.yamiao.net</a> <a href="http://blog.caclrc.cn/programinfo/?id=7938" title="blog.caclrc.cn" target="_blank">blog.caclrc.cn</a> <a href="http://blog.rgbbs.cn/programinfo/?id=7938" title="blog.rgbbs.cn" target="_blank">blog.rgbbs.cn</a> <a href="http://blog.heiapp.net/programinfo/?id=7938" title="blog.heiapp.net" target="_blank">blog.heiapp.net</a> <a href="http://blog.zhfjx.cn/programinfo/?id=7938" title="blog.zhfjx.cn" target="_blank">blog.zhfjx.cn</a> <a href="http://blog.sshfy.cn/programinfo/?id=7938" title="blog.sshfy.cn" target="_blank">blog.sshfy.cn</a> <a href="http://blog.sxdgc.cn/programinfo/?id=7938" title="blog.sxdgc.cn" target="_blank">blog.sxdgc.cn</a> <a href="http://blog.28city.cn/programinfo/?id=7938" title="blog.28city.cn" target="_blank">blog.28city.cn</a> <a href="http://blog.etcb.cn/programinfo/?id=7938" title="blog.etcb.cn" target="_blank">blog.etcb.cn</a> <a href="http://blog.abdayah.cn/programinfo/?id=7938" title="blog.abdayah.cn" target="_blank">blog.abdayah.cn</a> <a href="http://blog.ddbdzs.cn/programinfo/?id=7938" title="blog.ddbdzs.cn" target="_blank">blog.ddbdzs.cn</a> <a href="http://blog.hyflex.cn/programinfo/?id=7938" title="blog.hyflex.cn" target="_blank">blog.hyflex.cn</a> <a href="http://blog.11855.cn/programinfo/?id=7938" title="blog.11855.cn" target="_blank">blog.11855.cn</a> <a href="http://blog.11566.cn/programinfo/?id=7938" title="blog.11566.cn" target="_blank">blog.11566.cn</a> <a href="http://blog.11355.cn/programinfo/?id=7938" title="blog.11355.cn" target="_blank">blog.11355.cn</a> <a href="http://blog.62622.cn/programinfo/?id=7938" title="blog.62622.cn" target="_blank">blog.62622.cn</a> <a href="http://blog.cbwq.cn/programinfo/?id=7938" title="blog.cbwq.cn" target="_blank">blog.cbwq.cn</a> <a href="http://blog.zrqm.cn/programinfo/?id=7938" title="blog.zrqm.cn" target="_blank">blog.zrqm.cn</a> <a href="http://blog.rlfm.cn/programinfo/?id=7938" title="blog.rlfm.cn" target="_blank">blog.rlfm.cn</a> <a href="http://blog.pbtb.cn/programinfo/?id=7938" title="blog.pbtb.cn" target="_blank">blog.pbtb.cn</a> <a href="http://blog.knlz.cn/programinfo/?id=7938" title="blog.knlz.cn" target="_blank">blog.knlz.cn</a> <a href="http://blog.rhwf.cn/programinfo/?id=7938" title="blog.rhwf.cn" target="_blank">blog.rhwf.cn</a> <a href="http://blog.dxfp.cn/programinfo/?id=7938" title="blog.dxfp.cn" target="_blank">blog.dxfp.cn</a> <a href="http://blog.rptb.cn/programinfo/?id=7938" title="blog.rptb.cn" target="_blank">blog.rptb.cn</a> <a href="http://blog.nzjg.cn/programinfo/?id=7938" title="blog.nzjg.cn" target="_blank">blog.nzjg.cn</a> <a href="http://blog.ygnl.cn/programinfo/?id=7938" title="blog.ygnl.cn" target="_blank">blog.ygnl.cn</a> <a href="http://blog.rxbg.cn/programinfo/?id=7938" title="blog.rxbg.cn" target="_blank">blog.rxbg.cn</a> <a href="http://blog.rfbc.cn/programinfo/?id=7938" title="blog.rfbc.cn" target="_blank">blog.rfbc.cn</a> <a href="http://blog.rwbs.cn/programinfo/?id=7938" title="blog.rwbs.cn" target="_blank">blog.rwbs.cn</a> <a href="http://blog.music.liuyifei.net/programinfo/?id=7938" title="blog.music.liuyifei.net" target="_blank">blog.music.liuyifei.net</a> <a href="http://blog.img.liuyifei.net/programinfo/?id=7938" title="blog.img.liuyifei.net" target="_blank">blog.img.liuyifei.net</a> <a href="http://blog.drnu.cn/programinfo/?id=7938" title="blog.drnu.cn" target="_blank">blog.drnu.cn</a> <a href="http://blog.wyim.cn/programinfo/?id=7938" title="blog.wyim.cn" target="_blank">blog.wyim.cn</a> <a href="http://blog.dvtg.cn/programinfo/?id=7938" title="blog.dvtg.cn" target="_blank">blog.dvtg.cn</a> <a href="http://blog.fvhc.cn/programinfo/?id=7938" title="blog.fvhc.cn" target="_blank">blog.fvhc.cn</a> <a href="http://blog.lble.cn/programinfo/?id=7938" title="blog.lble.cn" target="_blank">blog.lble.cn</a> <a href="http://blog.mvhu.cn/programinfo/?id=7938" title="blog.mvhu.cn" target="_blank">blog.mvhu.cn</a> <a href="http://blog.uesese.cn/programinfo/?id=7938" title="blog.uesese.cn" target="_blank">blog.uesese.cn</a> <a href="http://blog.ikuns.cc/programinfo/?id=7938" title="blog.ikuns.cc" target="_blank">blog.ikuns.cc</a> <a href="http://blog.02613.cn/programinfo/?id=7938" title="blog.02613.cn" target="_blank">blog.02613.cn</a> <a href="http://blog.lymzi.cn/programinfo/?id=7938" title="blog.lymzi.cn" target="_blank">blog.lymzi.cn</a> <a href="http://blog.ktoa.cn/programinfo/?id=7938" title="blog.ktoa.cn" target="_blank">blog.ktoa.cn</a> <a href="http://blog.73216.cn/programinfo/?id=7938" title="blog.73216.cn" target="_blank">blog.73216.cn</a> <a href="http://blog.crtwd.cn/programinfo/?id=7938" title="blog.crtwd.cn" target="_blank">blog.crtwd.cn</a> <a href="http://blog.szmdx.cn/programinfo/?id=7938" title="blog.szmdx.cn" target="_blank">blog.szmdx.cn</a> <a href="http://blog.kylkc.cn/programinfo/?id=7938" title="blog.kylkc.cn" target="_blank">blog.kylkc.cn</a> <a href="http://blog.dztmd.cn/programinfo/?id=7938" title="blog.dztmd.cn" target="_blank">blog.dztmd.cn</a> <a href="http://blog.pmhlw.cn/programinfo/?id=7938" title="blog.pmhlw.cn" target="_blank">blog.pmhlw.cn</a> <a href="http://blog.gfxtk.cn/programinfo/?id=7938" title="blog.gfxtk.cn" target="_blank">blog.gfxtk.cn</a> <a href="http://blog.tzpc.cn/programinfo/?id=7938" title="blog.tzpc.cn" target="_blank">blog.tzpc.cn</a> <a href="http://blog.jbqm.cn/programinfo/?id=7938" title="blog.jbqm.cn" target="_blank">blog.jbqm.cn</a> <a href="http://blog.sh3.cn/programinfo/?id=7938" title="blog.sh3.cn" target="_blank">blog.sh3.cn</a> <a href="http://blog.7sh.cn/programinfo/?id=7938" title="blog.7sh.cn" target="_blank">blog.7sh.cn</a> <a href="http://blog.95596.net/programinfo/?id=7938" title="blog.95596.net" target="_blank">blog.95596.net</a> <a href="http://blog.95540.net/programinfo/?id=7938" title="blog.95540.net" target="_blank">blog.95540.net</a> <a href="http://blog.12383.net/programinfo/?id=7938" title="blog.12383.net" target="_blank">blog.12383.net</a> <a href="http://blog.12363.net/programinfo/?id=7938" title="blog.12363.net" target="_blank">blog.12363.net</a> <a href="http://blog.boboji.net/programinfo/?id=7938" title="blog.boboji.net" target="_blank">blog.boboji.net</a> <a href="http://blog.r515.cn/programinfo/?id=7938" title="blog.r515.cn" target="_blank">blog.r515.cn</a> <a href="http://blog.g2050.cn/programinfo/?id=7938" title="blog.g2050.cn" target="_blank">blog.g2050.cn</a> <a href="http://blog.bbc888.com/programinfo/?id=7938" title="blog.bbc888.com" target="_blank">blog.bbc888.com</a> <a href="http://blog.ha123.net.cn/programinfo/?id=7938" title="blog.ha123.net.cn" target="_blank">blog.ha123.net.cn</a> <a href="http://blog.dindongji.com/programinfo/?id=7938" title="blog.dindongji.com" target="_blank">blog.dindongji.com</a> <a href="http://blog.dindongji.cn/programinfo/?id=7938" title="blog.dindongji.cn" target="_blank">blog.dindongji.cn</a> <a href="http://blog.dindongji.net/programinfo/?id=7938" title="blog.dindongji.net" target="_blank">blog.dindongji.net</a> <a href="http://blog.touyin.net/programinfo/?id=7938" title="blog.touyin.net" target="_blank">blog.touyin.net</a> <a href="http://blog.ludan.net/programinfo/?id=7938" title="blog.ludan.net" target="_blank">blog.ludan.net</a> <a href="http://blog.xshell.net/programinfo/?id=7938" title="blog.xshell.net" target="_blank">blog.xshell.net</a> <a href="http://blog.zdbcwf.com/programinfo/?id=7938" title="blog.zdbcwf.com" target="_blank">blog.zdbcwf.com</a> </div> </div> <a href="#"> <div class="top"></div> </a></footer> <style type="text/css"> #zfbhb { background-color: aliceblue; width: 200px; position: fixed; left: 5px; bottom: 200px; } #zfbhb img { width: 200px; } #zfbhb1 { background-color: aliceblue; width: 150px; position: fixed; right: 5px; bottom: 40px; } #zfbhb1 img { width: 150px; margin-top: 10px; height: 80px; } @media screen and (min-width: 1px) and (max-width: 1023px) { #zfbhb { width: 100px !important; } #zfbhb img { width: 100px; } #zfbhb1 { background-color: aliceblue; width: 80px; position: fixed; right: 5px; bottom: 30px; } #zfbhb1 img { width: 80px; margin-top: 10px; height: 30px; } } </style> <div id="zfbhb"> <img src="/static/images/zfbhb.png" alt=""> </div> <div id="zfbhb1"> <a href="#" target="_blank"> <img src="/static/images/ad.gif" alt="-六神源码网"/> </a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> <a href="/xiaoshuoliebiao/0/1.html" target="_blank"><img src="http://img.liuyifei.net/uploads/20250405/90f7d443007aeac93ead6cbd5fec9cd6.jpg" onerror="javascript:this.src='/static/images/ad.gif';"></a> </div> <script src="/static/js/jquery-1.8.3.min.js"></script> <script src="/static/js/comm.js"></script>  <script src="/static/js/tongji.js"></script> </body> </html>