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

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

2023-11-09 214人已围观

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

项目文档目录
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> 。大小写夹杂也是不被认可的。 <br><br>2.3 所有的XHTML标记都必须合理嵌套 <br>　　同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： <br>　　<p><b></p>/b>必须修改为：<p><b></b>/p><br>　　就是说，一层一层的嵌套必须是严格对称。 <br><br>2.4 所有的属性必须用引号""括起来 <br>在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如： <br>　　<height=80>必须修改为：<height="80"><br>　　特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： <br>　　<alt="say'hello'"><br><br>2.5 把所有<和&特殊符号用编码表示 <br>任何小于号（<），不是标签的一部分，都必须被编码为< ; <br>　　任何大于号（>），不是标签的一部分，都必须被编码为><br>　　任何与号（&），不是实体的一部分的，都必须被编码为& <br><br>2.6 给所有属性赋一个值 <br>XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <br><td nowrap><input type="checkbox" name="shirt" value="medium" checked><br>必须修改为： <br><td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked"><br><br>2.7 不要在注释内容中使“–” <br>“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的： <br><!–这里是注释———–这里是注释–><br>用等号或者空格替换内部的虚线。 <br><!–这里是注释============这里是注释–><br>以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。 <br><br>2.8 引用样式和脚本语言时type属性不能省略 <br><script language="javascript" type="text/javascript"><br>注意：type="text/javascript"不能省略。 <br><br>2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错 <br>事例： <br><script>和<style>标记的内容必须被包围在CDATA段中。 <br>例如： <br><script type="text/javascript"><br><![CDATA[ <br>function func(a, b) <br>{ <br>if (a < b) <br>return true; <br>} <br>]]></script><br>注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会 <br>被误认为是另一个XHTML标记的开始，引起一些不必要的错误。 <br>需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用 <br>JavaScript注释来避免： <br><script type="text/javascript"><br>/* <![CDATA[ */ <br>function func(a, b) <br>{ <br>if (a < b) <br>return true; <br>} <br>/* ]]> */ <br></script><br>或者 <br><script type="text/javascript"><br>// <![CDATA[ <br>function func(a, b) <br>{ <br>if (a < b) <br>return true; <br>} <br>// ]]><br></script><br>当然，最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。 <br><br><br>2.10 将所有的样式放在style中 <br>例：<td width="4"></td> 这样写不符合标准。 <br>我们要这样写：<td style=”width:4px;”></td><br><br>2.11 样式属性最后一个后面一定要加上分号 <br><br>2.12 使用id属性，而不是name属性。 <br>在HTML中，name属性可以用来标识identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。ID不能重复。 <br><br>2.13 属性值中空格的处理。 <br>属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如 <br>如下两个属性的值相同： <br><input value="HTML is out" /><br><input value=" HTML is <br>out " /><br><br>2.14 使用恰当的文档类型声明和命名空间。 <br><br>2.15 使用meta元素声明你的内容类型。 <br><br>2.16 使用img时要添加alt属性，可设为空 <br><br>2.17 使用img时align=absmiddle属性在W3C验证下通不过 <br>　大家都知道，要想让图片和文字垂直居中对齐的话，可以在IMG标签下添加align=absmiddle属性即可实现，但align=absmiddle属性在W3C验证下通不过[验证地址请查看W3C网页标准验证服务地址]，那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢，答案是肯定的。 <br>可以在CSS中加入vertical-align:middle;就能实现了 <br><br>事例： <br><div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br /><br><div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div><br /><br /><br><div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div><br><br>2.18 不建议使用过时属性和标签 <br>为了更好的处理网站的兼容性问题，我建议不要使用过时标签和属性 <br><br>2.19 将VS2005的验证标准调整为XHTML1.0或更高版本 <br><br>备注： <br>XHTML 1.0 Transitional WEB标准产生的问题 <br>曾经流行一时的HTML标记语言已经被官方认为过时了，将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML规则书写，那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器，跨设备以及跨平台的一致性支持。 <br>XHTML有如下两个主要目标： <br>· 将文档的结构（使用XHTML标记语言）和表现（使用CSS）分开 <br>· 将HTML作为一种XML书写 <br>对于第一个目标，W3C删除了一些HTML的标记以及属性，例如<font>和bgcolor，因为这些标记或属性并不是文档结构中的一部分，而只是用来描述文档应该如何被显示，因此应该定义在CSS文件中而不是HTML中。同样，某些特定的标记内容并不一定要显示成特定的样子。比如，<h1>标记里内容显示的字号完全可能小于<p>里的内容，这些取决于CSS中的定义。当然，<h1>一般用于显示一篇文档的标题信息，它的重要程度一般也应该高于<p>中的内容，所以通常的浏览器都会以一个较大的字号来显示。 <br>对于第二个目标，XHTML将严格遵守XML的严格语法。可以说XHTML是HTML依照XML语法重构的结果。换句话说，当你编写XHTML文档的时候，其实是在编写一份特化了的XML文档。XML文档有着比HTML严格多了的语法，这些将在本文稍后部分讨论。 <br>XHTML有三个版本： <br>· XHTML 1.0 Transitional <br>· XHTML 1.0 Strict <br>· XHTML 1.0 Frameset <br>XHTML 1.0 Transitional包含HTML4.01的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML开发者更容易的接受并使用XHTML。 <br>XHTML 1.0 Strict就是严格版本的XHTML了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS控制页面的显示而不是使用<font>，bgcolor之类的标记或属性。 <br>XHTML 1.0 Frameset用于把文档分割成几个桢以显示不同的内容。（XHTML 1.0 Transitional和Strict 页面不允许包含<frameset> 标记）。 <br>这里不再赘述更多有关XHTML的介绍，如果感兴趣，可以使用Google或者MSN Search找到很多相关资料或是详细介绍。也欢迎在本贴下留下您的评论与问题，让我们共同探讨。接下来是一些书写XHTML的基本规则。 <br>参考网址：http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html <br>http://www.chinaz.com/Design/Pages/10091JN2007.html <br><br>推荐网页制作规范 <br><br><br>推荐网页制作规范 <br>3.1 命名规范 <br><br>文件命名的原则： <br>以最少的字母达到最容易理解的意义。 <br><br>一般文件及目录命名规范： <br>每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm <br>图片的命名规范： <br>名称分为头尾两两部分，用下划线隔开。 <br>头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：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. <br>有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。 <br>其它文件命名规范： <br>js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js <br>所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi <br><br><br>3.2 目录结构规范 <br>目录建立的原则：以最少的层次提供最清晰简便的访问结构。 <br>目录的命名以小写英文字母，下划线组成。(参照命名规范) <br>根目录一般只存放index.htm以及其他必须的系统文件 <br>每个主要栏目开设一个相应的独立目录 <br>根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 <br>所有JS脚本存放在根目录下的scripts目录 <br>所有CSS文件存放在根目录下App_theme目录 <br>所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 <br><br>Css常用优化技巧 <br>CSS常用优化技巧 <br>4.1.使用css缩写 <br>使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 <br>参考网址：http://homepage.yesky.com/97/7643097.shtml <br><br>4.2.明确定义单位，除非值为0 <br>忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 <br>4.3.区分大小写 <br>当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 <br>class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 <br>4.4.取消class和id前的元素限定 <br>当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的， class可以在页面中多次使用。你限定某个元素毫无意义。例如： <br>div#content { /* declarations */ } <br>fieldset.details { /* declarations */ } <br>可以写成 <br>#content { /* declarations */ } <br>.details { /* declarations */ } <br>这样可以节省一些字节。 <br>4.5.默认值 <br>通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： <br>* { <br>margin:0; <br>padding:0; <br>} <br><br>4.6.不需要重复定义可继承的值 <br>CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。 <br>4.7.最近优先原则 <br>如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 <br>Update: Lorem ipsum dolor set <br>在CSS文件中，你已经定义了元素p，又定义了一个class update <br>p { <br>margin:1em 0; <br>font-size:1em; <br>color:#333; <br>} <br>.update { <br>font-weight:bold; <br>color:#600; <br>} <br>这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。 <br>4.8.多重class定义 <br>一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。 <br>.one{width:200px;background:#666;} <br>.two{border:10px solid #F00;} <br>在页面代码中，我们可以这样调用 <br><div class=”one two”></div><br>这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。 <br>4.9.使用子选择器(descendant selectors) <br>CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码： <br><div id=subnav><br><ul><br><li class=subnavitem><a href=# class=subnavitem>Item 1</a></li>><br><li class=subnavitemselected><a href=# class=subnavitemselected> Item 1</a></li><br><li class=subnavitem><a href=# class=subnavitem> Item 1</a></li><br></ul><br></div><br>这段代码的CSS定义是： <br>div#subnav ul { /* Some styling */ } <br>div#subnav ul li.subnavitem { /* Some styling */ } <br>div#subnav ul li.subnavitem a.s <p class="share"><b>提示：</b> 本文由<b>神</b>整理自网络，如有侵权请联系本站删除！ <br/> 本站声明： <br/> 1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； <br/> 2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！ </p> <p><span class="diggit"></span></p> <div class="nextinfo"> <p>上一篇：<a href="/programinfo/?id=146882">静态页面与动态页面各自的执行机制说明_心得技巧_网页制作_</a></p> <p>下一篇：<a href="/programinfo/?id=146884">firefox浏览器中播放背景音乐的终极解决方案(chrome多浏览器兼容)_心得技巧_网页制作_</a></p> </div> </div> </div> <div class="whitebg"> <h2 class="htitle">相关内容</h2> <ul class="otherlink"> <li><a href="/programinfo/?id=146882">静态页面与动态页面各自的执行机制说明_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146881">网站该在什么时候才应该放置广告_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146880">网页设计中的表单设计技巧小结_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146879">做网站用UTF-8编码还是GB2312编码？ _心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146878">MIME的编码介绍(由网上资料和实践经验整合)_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146877">网站图标Icon添加方法！_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146876">写给入门者的三十条HTML代码编写指南_心得技巧_网页制作_</a></li> <li><a href="/programinfo/?id=146875">迷你西游百眼魔君属性技能缘搭配效果一览_手机游戏_游戏攻略_</a></li> <li><a href="/programinfo/?id=146874">海岛奇兵攻击道具使用技巧推荐_手机游戏_游戏攻略_</a></li> <li><a href="/programinfo/?id=146873">刀塔传奇竞技场常见阵容点评_手机游戏_游戏攻略_</a></li> </ul> </div> </div> <div class="rbox"> <div class="whitebg paihang"> <h2 class="htitle">点击排行</h2> <ul> <li><i></i><a href="/programinfo/?id=1208905">唯唯绸否猜打一最佳正确生肖[最佳成语最佳释义解释答]</a></li> <li><i></i><a href="/programinfo/?id=154665">TYSB手游公测版下载-TYSB官方唯一正版手游下载 _安卓网</a></li> <li><i></i><a href="/programinfo/?id=1208911">士绅名流代表是指什么生肖数字，成语释义解释落实</a></li> <li><i></i><a href="/programinfo/?id=1208910">士绅名流代表什么生肖，成语释义解释落实</a></li> <li><i></i><a href="/programinfo/?id=1208903">洗牌猫下载-洗牌猫(卡牌对战)Shuffle Cats v0.14.8_安卓网</a></li> <li><i></i><a href="/programinfo/?id=1208902">丛林动物宝宝发型沙龙游戏-丛林动物宝宝发型沙龙(休闲装扮)Baby Jungle Animal Hair Salon v1.0.10_安卓网</a></li> <li><i></i><a href="/programinfo/?id=1208909">士绅名流是指代表什么生肖、释义成语解释落实</a></li> <li><i></i><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"> <p>pandas获取对应的行或者列方式_python_</p> </a> </li> <li> <a href="/programinfo/?id=436024"> <i> <img src="//img.jbzj.com/file_images/article/202402/202402240855301.jpg" onerror="javascript:this.src='/static/images/1.jpg';"> </i> <p>pandas如何获取某个数据的行号_python_</p> </a> </li> <li> <a href="/programinfo/?id=436023"> <i> <img src="//img.jbzj.com/file_images/article/202402/202402240916472.png" onerror="javascript:this.src='/static/images/1.jpg';"> </i> <p>python进程池Pool中apply方法与apply_async方法的区别_python_</p> </a> </li> <li> <a href="/programinfo/?id=436022"> <p>python array中关于[a，b，c]的使用方式_python_</p> </a> </li> <li> <a href="/programinfo/?id=436021"> <i> <img src="//img.jbzj.com/file_images/article/202402/202402240929274.jpg" onerror="javascript:this.src='/static/images/1.jpg';"> </i> <p>Python进程multiprocessing.Process()的使用解读_python_</p> </a> </li> <li> <a href="/programinfo/?id=436020"> <p>selenium常用API的使用过程记录（包括自动登录）_python_</p> </a> </li> <li> <a href="/programinfo/?id=436019"> <p>Python使用multiprocessing如何实现多进程_python_</p> </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"><span>我的微信</span></li> </ul> </div> <div class="endnav"> <p><b>关于我们</b></p> <p>神代码(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> 本站会员：605 </p> <p>© 技术支持：<a href="http://7zz.net" title="神代码" target="_blank">神代码（http://7zz.net）</a> <a href="http://blog.sixgod.net/programinfo/?id=146883" title="blog.sixgod.net" target="_blank">blog.sixgod.net</a> <a href="http://blog.haifeisi.net/programinfo/?id=146883" title="blog.haifeisi.net" target="_blank">blog.haifeisi.net</a> <a href="http://blog.flerken.cn/programinfo/?id=146883" title="blog.flerken.cn" target="_blank">blog.flerken.cn</a> <a href="http://blog.bieha.cn/programinfo/?id=146883" title="blog.bieha.cn" target="_blank">blog.bieha.cn</a> <a href="http://blog.miuti.cn/programinfo/?id=146883" title="blog.miuti.cn" target="_blank">blog.miuti.cn</a> <a href="http://blog.dk028.com/programinfo/?id=146883" title="blog.dk028.com" target="_blank">blog.dk028.com</a> <a href="http://blog.scflcp.cn/programinfo/?id=146883" title="blog.scflcp.cn" target="_blank">blog.scflcp.cn</a> <a href="http://blog.bzbl.cn/programinfo/?id=146883" title="blog.bzbl.cn" target="_blank">blog.bzbl.cn</a> <a href="http://blog.mlft.cn/programinfo/?id=146883" title="blog.mlft.cn" target="_blank">blog.mlft.cn</a> <a href="http://blog.7zz.net/programinfo/?id=146883" title="blog.7zz.net" target="_blank">blog.7zz.net</a> <a href="http://blog.liuyifei.net/programinfo/?id=146883" title="blog.liuyifei.net" target="_blank">blog.liuyifei.net</a> <a href="http://blog.58t.net/programinfo/?id=146883" title="blog.58t.net" target="_blank">blog.58t.net</a> <a href="http://blog.yamiao.net/programinfo/?id=146883" title="blog.yamiao.net" target="_blank">blog.yamiao.net</a> <a href="http://blog.caclrc.cn/programinfo/?id=146883" title="blog.caclrc.cn" target="_blank">blog.caclrc.cn</a> <a href="http://blog.rgbbs.cn/programinfo/?id=146883" title="blog.rgbbs.cn" target="_blank">blog.rgbbs.cn</a> <a href="http://blog.heiapp.net/programinfo/?id=146883" title="blog.heiapp.net" target="_blank">blog.heiapp.net</a> <a href="http://blog.zhfjx.cn/programinfo/?id=146883" title="blog.zhfjx.cn" target="_blank">blog.zhfjx.cn</a> <a href="http://blog.sshfy.cn/programinfo/?id=146883" title="blog.sshfy.cn" target="_blank">blog.sshfy.cn</a> <a href="http://blog.sxdgc.cn/programinfo/?id=146883" title="blog.sxdgc.cn" target="_blank">blog.sxdgc.cn</a> <a href="http://blog.28city.cn/programinfo/?id=146883" title="blog.28city.cn" target="_blank">blog.28city.cn</a> <a href="http://blog.etcb.cn/programinfo/?id=146883" title="blog.etcb.cn" target="_blank">blog.etcb.cn</a> <a href="http://blog.abdayah.cn/programinfo/?id=146883" title="blog.abdayah.cn" target="_blank">blog.abdayah.cn</a> <a href="http://blog.ddbdzs.cn/programinfo/?id=146883" title="blog.ddbdzs.cn" target="_blank">blog.ddbdzs.cn</a> <a href="http://blog.hyflex.cn/programinfo/?id=146883" title="blog.hyflex.cn" target="_blank">blog.hyflex.cn</a> <a href="http://blog.11855.cn/programinfo/?id=146883" title="blog.11855.cn" target="_blank">blog.11855.cn</a> <a href="http://blog.11566.cn/programinfo/?id=146883" title="blog.11566.cn" target="_blank">blog.11566.cn</a> <a href="http://blog.11355.cn/programinfo/?id=146883" title="blog.11355.cn" target="_blank">blog.11355.cn</a> <a href="http://blog.62622.cn/programinfo/?id=146883" title="blog.62622.cn" target="_blank">blog.62622.cn</a> <a href="http://blog.cbwq.cn/programinfo/?id=146883" title="blog.cbwq.cn" target="_blank">blog.cbwq.cn</a> <a href="http://blog.zrqm.cn/programinfo/?id=146883" title="blog.zrqm.cn" target="_blank">blog.zrqm.cn</a> <a href="http://blog.rlfm.cn/programinfo/?id=146883" title="blog.rlfm.cn" target="_blank">blog.rlfm.cn</a> <a href="http://blog.pbtb.cn/programinfo/?id=146883" title="blog.pbtb.cn" target="_blank">blog.pbtb.cn</a> <a href="http://blog.knlz.cn/programinfo/?id=146883" title="blog.knlz.cn" target="_blank">blog.knlz.cn</a> <a href="http://blog.rhwf.cn/programinfo/?id=146883" title="blog.rhwf.cn" target="_blank">blog.rhwf.cn</a> <a href="http://blog.dxfp.cn/programinfo/?id=146883" title="blog.dxfp.cn" target="_blank">blog.dxfp.cn</a> <a href="http://blog.rptb.cn/programinfo/?id=146883" title="blog.rptb.cn" target="_blank">blog.rptb.cn</a> <a href="http://blog.nzjg.cn/programinfo/?id=146883" title="blog.nzjg.cn" target="_blank">blog.nzjg.cn</a> <a href="http://blog.ygnl.cn/programinfo/?id=146883" title="blog.ygnl.cn" target="_blank">blog.ygnl.cn</a> <a href="http://blog.rxbg.cn/programinfo/?id=146883" title="blog.rxbg.cn" target="_blank">blog.rxbg.cn</a> <a href="http://blog.rfbc.cn/programinfo/?id=146883" title="blog.rfbc.cn" target="_blank">blog.rfbc.cn</a> <a href="http://blog.rwbs.cn/programinfo/?id=146883" title="blog.rwbs.cn" target="_blank">blog.rwbs.cn</a> <a href="http://blog.music.liuyifei.net/programinfo/?id=146883" title="blog.music.liuyifei.net" target="_blank">blog.music.liuyifei.net</a> <a href="http://blog.img.liuyifei.net/programinfo/?id=146883" title="blog.img.liuyifei.net" target="_blank">blog.img.liuyifei.net</a> <a href="http://blog.drnu.cn/programinfo/?id=146883" title="blog.drnu.cn" target="_blank">blog.drnu.cn</a> <a href="http://blog.wyim.cn/programinfo/?id=146883" title="blog.wyim.cn" target="_blank">blog.wyim.cn</a> <a href="http://blog.dvtg.cn/programinfo/?id=146883" title="blog.dvtg.cn" target="_blank">blog.dvtg.cn</a> <a href="http://blog.fvhc.cn/programinfo/?id=146883" title="blog.fvhc.cn" target="_blank">blog.fvhc.cn</a> <a href="http://blog.lble.cn/programinfo/?id=146883" title="blog.lble.cn" target="_blank">blog.lble.cn</a> <a href="http://blog.mvhu.cn/programinfo/?id=146883" title="blog.mvhu.cn" target="_blank">blog.mvhu.cn</a> <a href="http://blog.uesese.cn/programinfo/?id=146883" title="blog.uesese.cn" target="_blank">blog.uesese.cn</a> <a href="http://blog.ikuns.cc/programinfo/?id=146883" title="blog.ikuns.cc" target="_blank">blog.ikuns.cc</a> <a href="http://blog.02613.cn/programinfo/?id=146883" title="blog.02613.cn" target="_blank">blog.02613.cn</a> <a href="http://blog.lymzi.cn/programinfo/?id=146883" title="blog.lymzi.cn" target="_blank">blog.lymzi.cn</a> <a href="http://blog.ktoa.cn/programinfo/?id=146883" title="blog.ktoa.cn" target="_blank">blog.ktoa.cn</a> <a href="http://blog.73216.cn/programinfo/?id=146883" title="blog.73216.cn" target="_blank">blog.73216.cn</a> <a href="http://blog.crtwd.cn/programinfo/?id=146883" title="blog.crtwd.cn" target="_blank">blog.crtwd.cn</a> <a href="http://blog.szmdx.cn/programinfo/?id=146883" title="blog.szmdx.cn" target="_blank">blog.szmdx.cn</a> <a href="http://blog.kylkc.cn/programinfo/?id=146883" title="blog.kylkc.cn" target="_blank">blog.kylkc.cn</a> <a href="http://blog.dztmd.cn/programinfo/?id=146883" title="blog.dztmd.cn" target="_blank">blog.dztmd.cn</a> <a href="http://blog.pmhlw.cn/programinfo/?id=146883" title="blog.pmhlw.cn" target="_blank">blog.pmhlw.cn</a> <a href="http://blog.gfxtk.cn/programinfo/?id=146883" title="blog.gfxtk.cn" target="_blank">blog.gfxtk.cn</a> <a href="http://blog.tzpc.cn/programinfo/?id=146883" title="blog.tzpc.cn" target="_blank">blog.tzpc.cn</a> <a href="http://blog.jbqm.cn/programinfo/?id=146883" title="blog.jbqm.cn" target="_blank">blog.jbqm.cn</a> <a href="http://blog.sh3.cn/programinfo/?id=146883" title="blog.sh3.cn" target="_blank">blog.sh3.cn</a> <a href="http://blog.7sh.cn/programinfo/?id=146883" title="blog.7sh.cn" target="_blank">blog.7sh.cn</a> <a href="http://blog.95596.net/programinfo/?id=146883" title="blog.95596.net" target="_blank">blog.95596.net</a> <a href="http://blog.95540.net/programinfo/?id=146883" title="blog.95540.net" target="_blank">blog.95540.net</a> <a href="http://blog.12383.net/programinfo/?id=146883" title="blog.12383.net" target="_blank">blog.12383.net</a> <a href="http://blog.12363.net/programinfo/?id=146883" title="blog.12363.net" target="_blank">blog.12363.net</a> <a href="http://blog.boboji.net/programinfo/?id=146883" title="blog.boboji.net" target="_blank">blog.boboji.net</a> <a href="http://blog.r515.cn/programinfo/?id=146883" title="blog.r515.cn" target="_blank">blog.r515.cn</a> <a href="http://blog.g2050.cn/programinfo/?id=146883" title="blog.g2050.cn" target="_blank">blog.g2050.cn</a> <a href="http://blog.bbc888.com/programinfo/?id=146883" title="blog.bbc888.com" target="_blank">blog.bbc888.com</a> <a href="http://blog.ha123.net.cn/programinfo/?id=146883" title="blog.ha123.net.cn" target="_blank">blog.ha123.net.cn</a> <a href="http://blog.dindongji.com/programinfo/?id=146883" title="blog.dindongji.com" target="_blank">blog.dindongji.com</a> <a href="http://blog.dindongji.cn/programinfo/?id=146883" title="blog.dindongji.cn" target="_blank">blog.dindongji.cn</a> <a href="http://blog.dindongji.net/programinfo/?id=146883" title="blog.dindongji.net" target="_blank">blog.dindongji.net</a> <a href="http://blog.touyin.net/programinfo/?id=146883" title="blog.touyin.net" target="_blank">blog.touyin.net</a> <a href="http://blog.ludan.net/programinfo/?id=146883" title="blog.ludan.net" target="_blank">blog.ludan.net</a> <a href="http://blog.xshell.net/programinfo/?id=146883" title="blog.xshell.net" target="_blank">blog.xshell.net</a> <a href="http://blog.zdbcwf.com/programinfo/?id=146883" title="blog.zdbcwf.com" target="_blank">blog.zdbcwf.com</a> </p> </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>