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

转载：On having layout_CSS/HTML_

2023-05-25 244人已围观

简介转载：On having layout_CSS/HTML_

译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。英文原文在此。

　　文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。

　　引用一段来自Dean Edwards的评价：

　　I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies.

(Dean Edwards)

介绍

　　Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

hasLayout — 定义

　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

　　微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。

　　hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。

　　实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

术语

　　当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。

　　而“无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个 “无layout祖先”。

　　给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ，除非把一开始那些触发 hasLayout = true 的 CSS 属性去除。

问题种种

　　hasLayout 的问题不管新手还是老手，不管设计师或者程序员可能都遇到过。具有 layout 的元素通常有着不同寻常而且难以预料的的显示效果，而且有时甚至会牵连到他们的孩子元素。

　　一个元素是否具有“layout”可能会引发如下的一些问题：

IE 很多常见的浮动 bug 。
元素本身对一些基本属性的异常处理问题。
容器和其子孙之间的边距重叠(margin collapsing)问题。
使用列表时遇到的诸多问题。
背景图像的定位偏差问题。
使用脚本时遇到的浏览器之间处理不一致的问题。

　　上面的列表只是列出一个大概，也不完善。下面的文章将尽可能详细彻底的描述有无“layout”所带来的各种问题。

Layout 从何而来

　　不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有“layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

默认layout元素

　　下列元素应该是默认具有 layout 的：

, , , 
, , <button></code></li><li><code><iframe>, <embed>, <object>, <applet></code></li><li><code><marquee></code></li></ul><h5 id="prop">属性</h5><p>　　下列 CSS 属性和取值将会让一个元素获得 layout：</p><dl><dt><code>position: absolute</code></dt><dd>绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。 </dd><dt><code>float: left|right</code></dt><dd>由于 layout 元素的特性，浮动模型会有很多怪异的表现。 </dd><dt><code>display: inline-block</code></dt><dd>当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果——让某个元素拥有 layout。“inline-block行为”在IE中是可以实现的，但是非常与众不同： <a title="查看Bruno Fassino的相关文章" href="http://www.brunildo.org/test/InlineBlockLayout.html">IE/Win: inline-block and hasLayout</a> 。 </dd><dt><code>width: 任意值</code></dt><dd>很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。 </dd><dt><code>height: 任意值</code></dt><dd>height: 1% 就在 Holly Hack 中用到。 </dd><dt><code>zoom: 任意值</code> (<a title="查看MSDN中的属性描述" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zoom.asp">MSDN</a>) </dt><dd>MS专有属性，无法通过校验。 不过 <code>zoom: 1</code> 可以临时用做调试。 </dd><dt><code>writing-mode: tb-rl</code> (<a title="查看MSDN中的属性描述" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/writingmode.asp">MSDN</a>) </dt><dd>MS专有属性，无法通过校验。 </dd></dl><p>　　在 IE7 中，overflow 也变成了一个 layout 触发器：</p><dl><dt><code>overflow: hidden|scroll|auto</code></dt><dd>这个属性在之前版本 IE 中没有触发 layout 的功能。 </dd><dt><code>overflow-x|-y: hidden|scroll|auto</code></dt><dd>overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。 </dd></dl><p>　　另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。</p><dl><dt><code>position: fixed</code></dt><dd>./. </dd><dt><code>min-width: 任意值</code></dt><dd>就算设为0也可以让该元素获得 layout。 </dd><dt><code>max-width: 除 none 之外的任意值</code></dt><dd>./. </dd><dt><code>min-height: 任意值</code></dt><dd>即使设为0也可以让该元素的 haslayout=true </dd><dt><code>max-height: 除 none 之外的任意值</code></dt><dd>./. </dd></dl><p>　　以上结论借助 IE Developer Toobar 以及预先测试得出。</p><h5 id="inline">有关内联级别元素</h5><p>　　对于内联元素(可以是默认即为内联的比如 <code>span</code> 元素，也可以是 <code>display: inline</code> 的元素)</p><ul><li><code>width</code> 和 <code>height</code> 只在 IE5.x 下和 IE6 的 quirks 模式下触发 <code>hasLayout</code> 。因为在 IE6 中，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。 </li><li><code>zoom</code> 总是可以触发 <code>hasLayout</code>，但是在 IE5.0 中不支持。 </li></ul><p>　　具有“layout” 的元素如果同时也 <code>display: inline</code> ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 <code>display: inline</code> 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。</p><h5 id="haslayoutprop">脚本属性 hasLayout</h5><p>　　我们这里称 hasLayout 为“脚本属性”是为了和我们熟知的 CSS 属性相区别。</p><p>　　注意一旦一个元素拥有了 layout，就没有办法再将其设成 <code>hasLayout = False</code> 了。</p><p>　　<a title="查看MSDN中的属性描述" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp">hasLayout-property</a> 可以用来检测一个元素是否拥有 layout：举个例子，如果它的 <code>id</code> 是“eid”，那么只要在 IE5.5+ 的地址栏里输入 <code class="c1">javascript: alert(eid.currentStyle.hasLayout)</code> 即可检测它的状态。</p><p>　　IE的 <a title="MS提供的下载" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en">Developer Toolbar</a> 可以实时检查一个元素的当前样式；如果 <code>hasLayout</code> 是 true ，那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 <code>hasLayout</code> 以便调试。</p><p>　　另外一个需要注意的是“layout”会影响脚本编程。如果一个元素没有“layout”，那么<code>clientWidth</code>/<code>clientHeight</code> 总是返回0。这会让一些脚本新手感到困惑，而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”：如果 <code>clientWidth</code> 是零那么这个元素就没有 layout。</p></div><h4 id="hack">CSS hacks</h4><p>　　下面用于触发 <code>haslayout</code> 的 hack 已经经过 IE6 及以下版本测试。今后版本的IE有可能会对此做不同处理。如果新版本浏览器发布我们会重新整理这部分内容。</p><p>　　John Gallant 和 Holly Bergevin 在2003年发布的 <a title="发表于communitymx" href="http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0">Holly hack</a> ：</p><pre class="code">/* \*/ * html .gainlayout { height: 1%; } /* */ </pre><ul><li>可以让 IE5+ 的任意元素获得 layout，除了标准兼容模式 IE6 中的内联元素。 </li><li>一般都很有效，除了在某些极少情况下，需要用 height:0 或者 1px 更好一些。 </li><li>和 <code>overflow: hidden</code> 不相容，除非在 IE6 的标注兼容模式下(因为这时如果父元素没有定高，那么<code>height: 1%</code> 会被变回 <code>height: auto</code>)。 </li></ul><p>　　或者我们可以用 <a title="查看WellStyled Workshop中的文章" href="http://wellstyled.com/singlelang.php?lang=en&page=css-underscore-hack.html">underscore hack</a>:</p><pre class="code">.gainlayout { _height: 0; }</pre><p>　　另外，更具有向后兼容性的方法是使用 <a title="查看MSDN" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">条件注释(conditional comments)</a>:</p><pre class="code"><!--[if lte IE 6]><style> .gainlayout { height: 1px; } </style><![endif]--></pre><p>　　在条件注释中链接一个专门对 IE/Win 做修正的外部样式表文件，也不失为一个安全有效的好方法：</p><pre class="code"><link rel="stylesheet" href="allbrowsers.css" type="text/css" /><!--[if lte IE 6]><link rel="stylesheet" href="iefix.css" type="text/css" /><![endif]--></pre><p>　　我们更倾向于使用 <code>height: 0</code> 和 <code>1px</code> —— 并主张始终使用 <code>height</code> 除非它和别的什么东西冲突 (<code>overflow: hidden</code>)。对于取值，我们则倾向于避免 <code>1%</code> ，因为它可能会(虽然很少)引起<a title="看看Fassino的测试样例" href="http://www.brunildo.org/test/relayout.html">一些问题</a>。</p><p>　　一个需要注意的情况是如果我们希望一个元素保持内联，那么就不能使用 <code>height</code> 了，这时可以用 <code>display: inline-block</code> 。我们只在早期调试阶段用 <code>zoom: 1</code> 来避免一些渲染错误。</p><p>　　我们曾看过一些把 Holly hack 真的当作 holy(神圣的) hack 盲目使用的情况，比如对浮动元素使用或者对已经具有特定宽度的元素也使用这个 hack。要记住这个 hack 的目的不是要给某个元素加一个高度，而只是要触发 <code>hasLayout = True</code> 而已。</p><p>　　不要给所有元素设置 layout：<code>* {_height: 1px;}</code>。所谓过犹不及，获得 layout 不等于获得灵丹妙药，它只是用来改变渲染模式。</p><div class="alpha"><h5 id="hackmanagement">Hack整理</h5><p>　　但是浏览器总是会变的，我们需要面对很多问题，比如一些依赖 IE6 的 bug 所做的 hack 会在 IE7 或更高版本的新浏览器中因 bug 修复而失效(甚至有害)的问题；比如新版本浏览器中类似的布局 bug 依然存在但用于 hack 的过滤器比如 <code>* html</code> 却不能正常工作的问题。这种情况下，MS专有属性 <code>zoom</code> 就可以考虑使用了。</p><pre class="code"><!--[if lt IE 7]><style> /* IE 6 + IE5.5 + IE5.0 所用样式*/ .gainlayout { height: 0; } </style><![endif]--><!--[if IE 7]><style> .gainlayout { zoom: 1;} /* 或者其他任何以后可能需要的东西 */ </style><![endif]--></pre><ul><li><code>zoom: 1;</code> 可以让 IE5.5+ 的任何元素(包括内联元素)获得 layout，但是在 IE5.0 中无效。 </li><li>没有其他附带效果(内联元素会变成 inline-block，这个当然)。 </li><li>如果需要通过验证，应该用条件注释将 <code>zoom</code> 隐藏起来。 </li></ul><p>　　其实当我们考虑到“向后兼容”时是很自相矛盾的，我们强烈建议页面设计者回过头看一下自己页面中用的到的明显的或是不明显的“hacks”，并用条件注释针对不同浏览器重新处理以保万无一失。</p></div><h4 id="iemac">关于IE Mac 的小问题</h4><p>　　IE Mac 和 windows 下的 IE 是完全不同的两个东西，它们各自拥有自己的渲染引擎，IE Mac 就全然不知“hasLayout”(或contenteditable)所谓何物。相比之下 IE Mac 的渲染引擎要更标准兼容一点，比如 <code>height</code> 就是被当作 <code>height</code> 处理，没有别的效果。因此针对“hasLayout”的 hacks 和别的解决方法(特别是通过使用 <code>height</code> 或 <code>width</code> 属性的)往往对 IE Mac 来说是有害的，所以需要对其隐藏。更多的关于 IE Mac 相关的问题可以在 <a title="CSS problems in IE Mac" href="http://www.l-c-n.com/IE5tests/">IE Mac, bugs and oddities pages</a> 找到。</p><h4 id="docu">MSDN 文档</h4><p>　　MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几，而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。</p><p>　　在IE4的时候，除了未经绝对定位也未指定宽高的内
                <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=86076">IE7 beta2的CSS兼容性_CSS/HTML_</a></p>
                                                                <p>下一篇：<a href="/programinfo/?id=86078">标准化你的网页_CSS/HTML_</a></p>
                                    </div>
            </div>
        </div>
        <div class="whitebg">
            <h2 class="htitle">相关内容</h2>
            <ul class="otherlink">
                                    <li><a href="/programinfo/?id=86076">IE7 beta2的CSS兼容性_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86075">CSS之自动换行_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86074">CSS也能控制表格的交替颜色_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86073">利用CSS控制SELECT中的OPTION是否不允许选_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86072">表格斜线_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86071">布局遇到的问题 非常不错的见解_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86070">display&position_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86069">一段巧妙的css debug代码_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86068">expression将JS、Css结合起来_CSS/HTML_</a></li>
                                    <li><a href="/programinfo/?id=86067">用CSS控制的闪烁效果_CSS/HTML_</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=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=1208911">士绅名流代表是指什么生肖数字，成语释义解释落实</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>
                本站会员：602
            </p>
            <p>© 技术支持：<a href="http://7zz.net" title="神代码" target="_blank">神代码（http://7zz.net）</a>

                                    <a href="http://blog.sixgod.net/programinfo/?id=86077" title="blog.sixgod.net" target="_blank">blog.sixgod.net</a>
                                    <a href="http://blog.haifeisi.net/programinfo/?id=86077" title="blog.haifeisi.net" target="_blank">blog.haifeisi.net</a>
                                    <a href="http://blog.flerken.cn/programinfo/?id=86077" title="blog.flerken.cn" target="_blank">blog.flerken.cn</a>
                                    <a href="http://blog.bieha.cn/programinfo/?id=86077" title="blog.bieha.cn" target="_blank">blog.bieha.cn</a>
                                    <a href="http://blog.miuti.cn/programinfo/?id=86077" title="blog.miuti.cn" target="_blank">blog.miuti.cn</a>
                                    <a href="http://blog.dk028.com/programinfo/?id=86077" title="blog.dk028.com" target="_blank">blog.dk028.com</a>
                                    <a href="http://blog.scflcp.cn/programinfo/?id=86077" title="blog.scflcp.cn" target="_blank">blog.scflcp.cn</a>
                                    <a href="http://blog.bzbl.cn/programinfo/?id=86077" title="blog.bzbl.cn" target="_blank">blog.bzbl.cn</a>
                                    <a href="http://blog.mlft.cn/programinfo/?id=86077" title="blog.mlft.cn" target="_blank">blog.mlft.cn</a>
                                    <a href="http://blog.7zz.net/programinfo/?id=86077" title="blog.7zz.net" target="_blank">blog.7zz.net</a>
                                    <a href="http://blog.liuyifei.net/programinfo/?id=86077" title="blog.liuyifei.net" target="_blank">blog.liuyifei.net</a>
                                    <a href="http://blog.58t.net/programinfo/?id=86077" title="blog.58t.net" target="_blank">blog.58t.net</a>
                                    <a href="http://blog.yamiao.net/programinfo/?id=86077" title="blog.yamiao.net" target="_blank">blog.yamiao.net</a>
                                    <a href="http://blog.caclrc.cn/programinfo/?id=86077" title="blog.caclrc.cn" target="_blank">blog.caclrc.cn</a>
                                    <a href="http://blog.rgbbs.cn/programinfo/?id=86077" title="blog.rgbbs.cn" target="_blank">blog.rgbbs.cn</a>
                                    <a href="http://blog.heiapp.net/programinfo/?id=86077" title="blog.heiapp.net" target="_blank">blog.heiapp.net</a>
                                    <a href="http://blog.zhfjx.cn/programinfo/?id=86077" title="blog.zhfjx.cn" target="_blank">blog.zhfjx.cn</a>
                                    <a href="http://blog.sshfy.cn/programinfo/?id=86077" title="blog.sshfy.cn" target="_blank">blog.sshfy.cn</a>
                                    <a href="http://blog.sxdgc.cn/programinfo/?id=86077" title="blog.sxdgc.cn" target="_blank">blog.sxdgc.cn</a>
                                    <a href="http://blog.28city.cn/programinfo/?id=86077" title="blog.28city.cn" target="_blank">blog.28city.cn</a>
                                    <a href="http://blog.etcb.cn/programinfo/?id=86077" title="blog.etcb.cn" target="_blank">blog.etcb.cn</a>
                                    <a href="http://blog.abdayah.cn/programinfo/?id=86077" title="blog.abdayah.cn" target="_blank">blog.abdayah.cn</a>
                                    <a href="http://blog.ddbdzs.cn/programinfo/?id=86077" title="blog.ddbdzs.cn" target="_blank">blog.ddbdzs.cn</a>
                                    <a href="http://blog.hyflex.cn/programinfo/?id=86077" title="blog.hyflex.cn" target="_blank">blog.hyflex.cn</a>
                                    <a href="http://blog.11855.cn/programinfo/?id=86077" title="blog.11855.cn" target="_blank">blog.11855.cn</a>
                                    <a href="http://blog.11566.cn/programinfo/?id=86077" title="blog.11566.cn" target="_blank">blog.11566.cn</a>
                                    <a href="http://blog.11355.cn/programinfo/?id=86077" title="blog.11355.cn" target="_blank">blog.11355.cn</a>
                                    <a href="http://blog.62622.cn/programinfo/?id=86077" title="blog.62622.cn" target="_blank">blog.62622.cn</a>
                                    <a href="http://blog.cbwq.cn/programinfo/?id=86077" title="blog.cbwq.cn" target="_blank">blog.cbwq.cn</a>
                                    <a href="http://blog.zrqm.cn/programinfo/?id=86077" title="blog.zrqm.cn" target="_blank">blog.zrqm.cn</a>
                                    <a href="http://blog.rlfm.cn/programinfo/?id=86077" title="blog.rlfm.cn" target="_blank">blog.rlfm.cn</a>
                                    <a href="http://blog.pbtb.cn/programinfo/?id=86077" title="blog.pbtb.cn" target="_blank">blog.pbtb.cn</a>
                                    <a href="http://blog.knlz.cn/programinfo/?id=86077" title="blog.knlz.cn" target="_blank">blog.knlz.cn</a>
                                    <a href="http://blog.rhwf.cn/programinfo/?id=86077" title="blog.rhwf.cn" target="_blank">blog.rhwf.cn</a>
                                    <a href="http://blog.dxfp.cn/programinfo/?id=86077" title="blog.dxfp.cn" target="_blank">blog.dxfp.cn</a>
                                    <a href="http://blog.rptb.cn/programinfo/?id=86077" title="blog.rptb.cn" target="_blank">blog.rptb.cn</a>
                                    <a href="http://blog.nzjg.cn/programinfo/?id=86077" title="blog.nzjg.cn" target="_blank">blog.nzjg.cn</a>
                                    <a href="http://blog.ygnl.cn/programinfo/?id=86077" title="blog.ygnl.cn" target="_blank">blog.ygnl.cn</a>
                                    <a href="http://blog.rxbg.cn/programinfo/?id=86077" title="blog.rxbg.cn" target="_blank">blog.rxbg.cn</a>
                                    <a href="http://blog.rfbc.cn/programinfo/?id=86077" title="blog.rfbc.cn" target="_blank">blog.rfbc.cn</a>
                                    <a href="http://blog.rwbs.cn/programinfo/?id=86077" title="blog.rwbs.cn" target="_blank">blog.rwbs.cn</a>
                                    <a href="http://blog.music.liuyifei.net/programinfo/?id=86077" title="blog.music.liuyifei.net" target="_blank">blog.music.liuyifei.net</a>
                                    <a href="http://blog.img.liuyifei.net/programinfo/?id=86077" title="blog.img.liuyifei.net" target="_blank">blog.img.liuyifei.net</a>
                                    <a href="http://blog.drnu.cn/programinfo/?id=86077" title="blog.drnu.cn" target="_blank">blog.drnu.cn</a>
                                    <a href="http://blog.wyim.cn/programinfo/?id=86077" title="blog.wyim.cn" target="_blank">blog.wyim.cn</a>
                                    <a href="http://blog.dvtg.cn/programinfo/?id=86077" title="blog.dvtg.cn" target="_blank">blog.dvtg.cn</a>
                                    <a href="http://blog.fvhc.cn/programinfo/?id=86077" title="blog.fvhc.cn" target="_blank">blog.fvhc.cn</a>
                                    <a href="http://blog.lble.cn/programinfo/?id=86077" title="blog.lble.cn" target="_blank">blog.lble.cn</a>
                                    <a href="http://blog.mvhu.cn/programinfo/?id=86077" title="blog.mvhu.cn" target="_blank">blog.mvhu.cn</a>
                                    <a href="http://blog.uesese.cn/programinfo/?id=86077" title="blog.uesese.cn" target="_blank">blog.uesese.cn</a>
                                    <a href="http://blog.ikuns.cc/programinfo/?id=86077" title="blog.ikuns.cc" target="_blank">blog.ikuns.cc</a>
                                    <a href="http://blog.02613.cn/programinfo/?id=86077" title="blog.02613.cn" target="_blank">blog.02613.cn</a>
                                    <a href="http://blog.lymzi.cn/programinfo/?id=86077" title="blog.lymzi.cn" target="_blank">blog.lymzi.cn</a>
                                    <a href="http://blog.ktoa.cn/programinfo/?id=86077" title="blog.ktoa.cn" target="_blank">blog.ktoa.cn</a>
                                    <a href="http://blog.73216.cn/programinfo/?id=86077" title="blog.73216.cn" target="_blank">blog.73216.cn</a>
                                    <a href="http://blog.crtwd.cn/programinfo/?id=86077" title="blog.crtwd.cn" target="_blank">blog.crtwd.cn</a>
                                    <a href="http://blog.szmdx.cn/programinfo/?id=86077" title="blog.szmdx.cn" target="_blank">blog.szmdx.cn</a>
                                    <a href="http://blog.kylkc.cn/programinfo/?id=86077" title="blog.kylkc.cn" target="_blank">blog.kylkc.cn</a>
                                    <a href="http://blog.dztmd.cn/programinfo/?id=86077" title="blog.dztmd.cn" target="_blank">blog.dztmd.cn</a>
                                    <a href="http://blog.pmhlw.cn/programinfo/?id=86077" title="blog.pmhlw.cn" target="_blank">blog.pmhlw.cn</a>
                                    <a href="http://blog.gfxtk.cn/programinfo/?id=86077" title="blog.gfxtk.cn" target="_blank">blog.gfxtk.cn</a>
                                    <a href="http://blog.tzpc.cn/programinfo/?id=86077" title="blog.tzpc.cn" target="_blank">blog.tzpc.cn</a>
                                    <a href="http://blog.jbqm.cn/programinfo/?id=86077" title="blog.jbqm.cn" target="_blank">blog.jbqm.cn</a>
                                    <a href="http://blog.sh3.cn/programinfo/?id=86077" title="blog.sh3.cn" target="_blank">blog.sh3.cn</a>
                                    <a href="http://blog.7sh.cn/programinfo/?id=86077" title="blog.7sh.cn" target="_blank">blog.7sh.cn</a>
                                    <a href="http://blog.95596.net/programinfo/?id=86077" title="blog.95596.net" target="_blank">blog.95596.net</a>
                                    <a href="http://blog.95540.net/programinfo/?id=86077" title="blog.95540.net" target="_blank">blog.95540.net</a>
                                    <a href="http://blog.12383.net/programinfo/?id=86077" title="blog.12383.net" target="_blank">blog.12383.net</a>
                                    <a href="http://blog.12363.net/programinfo/?id=86077" title="blog.12363.net" target="_blank">blog.12363.net</a>
                                    <a href="http://blog.boboji.net/programinfo/?id=86077" title="blog.boboji.net" target="_blank">blog.boboji.net</a>
                                    <a href="http://blog.r515.cn/programinfo/?id=86077" title="blog.r515.cn" target="_blank">blog.r515.cn</a>
                                    <a href="http://blog.g2050.cn/programinfo/?id=86077" title="blog.g2050.cn" target="_blank">blog.g2050.cn</a>
                                    <a href="http://blog.bbc888.com/programinfo/?id=86077" title="blog.bbc888.com" target="_blank">blog.bbc888.com</a>
                                    <a href="http://blog.ha123.net.cn/programinfo/?id=86077" title="blog.ha123.net.cn" target="_blank">blog.ha123.net.cn</a>
                                    <a href="http://blog.dindongji.com/programinfo/?id=86077" title="blog.dindongji.com" target="_blank">blog.dindongji.com</a>
                                    <a href="http://blog.dindongji.cn/programinfo/?id=86077" title="blog.dindongji.cn" target="_blank">blog.dindongji.cn</a>
                                    <a href="http://blog.dindongji.net/programinfo/?id=86077" title="blog.dindongji.net" target="_blank">blog.dindongji.net</a>
                                    <a href="http://blog.touyin.net/programinfo/?id=86077" title="blog.touyin.net" target="_blank">blog.touyin.net</a>
                                    <a href="http://blog.ludan.net/programinfo/?id=86077" title="blog.ludan.net" target="_blank">blog.ludan.net</a>
                                    <a href="http://blog.xshell.net/programinfo/?id=86077" title="blog.xshell.net" target="_blank">blog.xshell.net</a>
                                    <a href="http://blog.zdbcwf.com/programinfo/?id=86077" 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>
<!--[if lt IE 9]>
<script src="/static/js/modernizr.js"></script>
<![endif]-->
    <script src="/static/js/tongji.js"></script>
</body>
</html>