标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 从标记语法谈起
Chapter2 标题
总览:
不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性增色不少.
从外观来说,网页的标题通常是使用较大的字号,或许会用和主体文字不同的颜色或者字体.标题的作用是"简要的描述往后章节所讨论的主题",W3C这样描述 — 显示网页内各个段落的概要.
怎样来创建一个页面标题来使得我们要展现的信息得到最有效的利用?在这个章节中,我们将研究几种常用的处理标题的方法,试着从中找出其中一种对我们最有帮助的方式,然后,我们将使用一些css的技巧和窍门来为最棒的方法装饰一番.
创建文档标题的最好方法是什么?
在回答这个问题之前,让我们假设现在正要把标题放置在文档的页首,我们来看看能够达成类似效果的三种方式.
方法A:有意义吗?
Super Cool Page Title
虽然标签在某些场合会是个方便的标签,但是对于页面标题来说,它的意义并不大,使用这个方法的唯一好处是我们可以为 heading 类指定一个css样式,以便让文字看起来像是个标题.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
现在,所有标记了heading类的标题都会变大,变粗,变蓝,很棒对吧?但是,如果有人使用一个不支持css的浏览器访问这个页面会怎么样呢?
举例来说,如果我们把css样式放在旧浏览器不支持的外部样式表文件里 — 或者屏幕阅读器为有障碍的用户朗读页面时会怎么样呢?通过这些途径访问这个页面的使用者将看不到(听不到)标题和正文文字的差异.
class="heading"这样的标注方法稍~~微的描述了标签内容的意义,但是只是个一般用途的容器,只是让大部分浏览器改变默认显示样式而已.
搜索引擎在抓取到这个页面时,会跳过标签就像它不曾在那边一样,不会为里面可能包含的关键字提升权重,稍后在本章节内会提到更多搜索引擎和页面标题的关系.
最后,由于标签是一个行内元素,我们大多需要把方法A的内容在放置到另一个块级容器中,比方说或者
,以便让它独占一行.这样会生成许多不必要的代码,就算你加上需要的容器,不支持css的浏览器仍然会以他本来的方式显示文字,让用户看不出标题和正文的任何区别.
#p#
方法B: P和B的组合
Super Cool Page Title
方法B使用了段落标签,这会让我们得到我们想要的块级元素的显示效果,而标签会让文字呈现粗体的样式(在大多数浏览器上) — 但是我们以这样的方式标记重要的标题时,仍然要面对同样缺少语义性的结果.
不像方法A,标签的存在就算缺少css样式的定义,在大多数浏览器中还是会将文字以粗体的样式呈现.但是和标签一样,搜索引擎不会为段落内的粗体文字提升关键字权重.
难以加上样式
使用单纯的p和b的标签组合,让我们无法为这个标题加上和其它段落有所区别的样式,或许我们想以独特的方式强调标题,为页面内容加上定义和结构 — 但是使用了这个方法让它呈现粗体后,我们就没有办法去做这些事情了.
方法C:样式与实质
Super Cool Page Title
哈哈,我们的好朋友标题标签来了,标题标签从一开始就是存在的,但是许多网页设计师还是无法以一致的方式使用它们.如果使用得当,标题标签能够提供页面内容的锚点,提供灵活的,可索引的,可更改样式的结构.
从标签本身的观点来看,你一定会爱上它的简洁,它们不需要额外的容器标签,你甚至能说这个方法能比前两个方法节省了一些字节,可能可以忽略,但是每小一个字节就是改变.
到分别代表了6层标题,从最重要的到最不重要的,他们本身就是块级元素不需要一个额外的容器就能自成一行,简单而又有效率 — 是完成这项工作的最佳工具.
容易定义样式
因为标签拥有独特的意义,不像或者
标签那样会在文内用到多次,因此我们能用css为它加上各式各样的样式(我们会在本章的"更多技巧"中深入讨论).
更重要的是,就算不加上任何的样式定义,标题标签看起来就很明显是个标题!浏览器会用大字体,粗体字呈现
的内容,就算去掉页面所有的样式定义,仍然可以看到文档的结构,因为正确的标题标签描述的是内容意义,而不是表现方式. (图 2-1)
图 2 - 1: 脱离样式后使用标题标签的页面内容
屏幕阅读器,PDA,移动电话和其他一些视觉的非视觉的浏览器也能识别并正确处理标题标签的内容,把它的重要性突出于页面其他内容之上.使用标签,不支持(或无法支持)css的浏览器就不会认为它有什么特别之处.
讨厌的默认样式
在网页设计史上,设计师们都会避免使用标题标签,完全是因为不加上样式的时候,标题标签看起来就和怪物没什么两样,二者择其一,其中一部分人会因为默认字体大小太大而避免使用或而去使用字体大小较小的标号较高的标题标签.
然而,有个重点值得强调,我们可以根据自己的喜好通过定义css轻易的改变这些标题标签的样式 — 举例来说,未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对的恐惧.
对搜索引擎的友好
这是最大的优点.搜索引擎十分喜欢标题标签,标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的~标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.
搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完和<meta>标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.<br>所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?<br><strong>附带一提的标签顺序</strong><br>在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签<h1>,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>那么下一个标题(如果不是另一个<h1>的话),就应该是<h2>,在接下去则使用<h3>等等,你也许不会跳过某级标题,比如说在<h1>之后直接使用<h3>.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.<br>如同先前所述,设计者可能会使用<h4>代表页面里最重要的标题,只因为它的预设字体大小不如<h1>那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.<br>
#p#<br><strong>概要</strong><br>让我们大致上回顾一下,为什么使用标题标签(<h1>到<h6>)来标记页面内的标题会比较好.<br><strong>方法A:</strong><br>可视化浏览器会在禁用或不支持css功能时,以一般文字相同的样式显示标题,非视觉浏览器则完全不知道标题和内文文字之间的差别. <br>搜索引擎不会特别重视以<span>标记的标题 <br>我们能制定独特的样式,但是我们在新增标题时,却会被heading类困死.
<br><strong>方法B:</strong><br>可视化浏览器只会用粗体显示内容,继续使用预设的字体大小. <br>我们无法为标题加上和内文不同的独特样式 <br>搜索引擎同样不会特别重视以<p><b>创建的标题的内容.
<br><strong>方法C:</strong><br>传达了标题标签中的文字确切的含义. <br>不管是可视化还是非可视化浏览器不管读到什么样式都会正确的处理标题内容 <br>搜索引擎会重视标题标签中的关键字.<br><strong>技巧延伸</strong><br>这里我们将采用方法C,并用它来实验一些简单的css样式.我们将完全发挥标题标签独特性的优势.我们可以非常安心的使用标题标签,因为不管在什么浏览器和设备上,都能正确的处理标题内容.接下来我们来给他装扮装扮,然后带它上街(如果你能够带着一个html标签上街的话....)<br><strong>简单的样式</strong><br>使用css,最简单最容易实现的效果就是为标题设置不同的字型.我们可以编写一个css规则,然后套用到页面中所有的<h1>标签上(如果你用到了外部样式表,那就可以把样式套用到整个网站上).如果在稍后的时间里想要改变整个网站里每个<h1>的颜色,大小或者字体,那么只需要修改几条css规则就行了,而且修改之后的效果能够马上看到!这听起来很诱人,对吧?<br>让我们超级酷的标题来告诉我们自己吧:<br><span class="code"><h1>Super Cool Page Title</h1></span><br>让我们用css来改变它的颜色,字体和大小吧:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> }</span><br>就像我们刚才所说的,非常简单,整个页面的所有<h1>都被设置成24像素大小,蓝色的Arial(或者默认的sans-serif)字体,如图 2-2:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif"><br>图 2-2: 标题样式示例<br>接下来我们继续在标题文字下面加上1像素宽的灰色边框(如图 2-3):<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px solid #999;<br> }</span><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"><br>图 2-3:加上灰色底边的标题样式示例<br>我们在文字底部多留了些内补丁,使得下面的边线不至于呼吸困难.因为标题标签是块级元素,因此边框会不止填满文字底部,还会继续向右边延伸,直到填满整个页面宽度.<br>另外值得一提的是,我们使用了边框的简写法 — 就是在一条声明中同时定义了宽度,样式,颜色.你可以试试看其他的设定值,看看有什么别的效果.<br>
#p#<br><strong>加上背景</strong><br>背景能给标题加上精巧的效果.只要加上背景色与一些留白,不需要用到图片我们就可以创造出清新的标题风格.举例来说:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #fff;<br> padding: 4px;<br> background-color: #696;<br> }</span><br>我们把标题中的文字变成白色,周围留出4像素的内补丁空间,同时把背景改成绿色.如图2-4那样,会有一条宽大的,颜色如同撞球桌的绿带贯穿整个页面,分割两个段落.<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif"><br>图2-4:设定了内补丁和背景色的标题示例<br><strong>背景和边框</strong><br>只要在标题下面加上一条细边框,再配上浅色背景,你就能不用一张图片的情况下做出三维的效果.<br>这份css与上面的十分类似,只改了几个颜色,在底部加上了2像素的边框<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #666;<br> padding: 4px;<br> background-color: #ddd;<br> border-bottom: 2px solid #ccc;<br> }</span><br>借着使用不同亮度的相同颜色,就能做出如图2-5般逼真的三维效果:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif"><br>图2-5:设定背景和底边的标题<br><strong>平铺背景</strong><br>用上图片的话,就能发挥更多的创意了.就让我们用photoshop创建一个10X10的小图片,最上面是黑色的边框,然后下面是从上到下的灰色梯度(如图2-6):<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>图2-6 用Photoshop创建的小图片<br>我们可以用css把这个小图片放到我们的<h1>底部去:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-bottom: 14px;<br> background: url(10x10.gif) repeat-x bottom;<br> }</span><br>设定 repeat-x 使浏览器在平铺背景图的时候只在水平方向上排列(相对的repeat-y就是在垂直方向上排列),同时我们设定了将图片放置在标题的底部,并加上一些下部内补丁,以便调整图片和标图文字之间的距离(如图2-7)<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>图2-7:设定平铺背景的标题示例<br><strong>方便替换的图标</strong><br>我们也可以使用cssdebackground属性来设定放在文字左边的小图标以此来代替写死图片标签的方法,为标题加上装饰用的小图标.这个方法能使在未来的日子里改变网站显示效果的工作变得十分轻松—只需要替换那么一个css规则,就能同时改变整个网站的显示效果.<br>代码和上面的平铺背景大致相同:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>我们在文字的左边多留出一块空间以便防止我们想要的图标,然后设定no-repeat指定背景图片不进行平铺(如图2-8),同时我们希望图标的位置在据左边0像素,并且对起垂直中线.<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>图2-8:设定了图标的标题示例<br>
#p#<br><strong>容易更新</strong><br>让我们设想这样一个场景:在一个包含了100个页面的网站里,我们没有使用上面的方法,而使用<img>标签写死每个标题旁边的图标,图标和网站风格是相融合的,几个星期后,网站的主人打算换掉网站风格,而新的图标大小和旧的并不一样,哎呦!这下我们就得回去修改整整100份页面里面的<img>标签以更新新图标的路径,真讨厌!想想这些事件会对项目预算造成怎样的影响,对完工期限带来多大的压力?时间就是金钱啊!<br>如果把这些并不十分重要的,装饰性的图标整合到一个css文件中,只要花上几分钟就能够一次性换掉整站的所有图标,带来崭新的外观!由此你应该可以渐渐明白到结构标记和显示效果分离的好处了吧.<br><strong>变色龙效果</strong><br>下来的技巧和我刚才所说的有一些矛盾,但是我认为这个技巧在某些情况下是十分有用的.这是我在2003年4月为Fast Company杂志的网站(www.fastcompany.com)做标准重构时大量使用的技巧.<br>那时我们在网站里的<h3>标签旁边用了许多13X13的小图标,就像这样:<br><span class="code"><h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3></span><br>有两个让我们决定要这样把图标写死在网页里面.首先,根据标题种类的不同,我们会使用到不同的图标(图书俱乐部是一本书,每日引言则是引号等等),第二个理由则是我们每个月会更换一次整个网站的配色,以配合当期杂志的封面主题.当然,这种替换工作因为使用了css而变得十分简单.<br>为了让图标跟着其他页面元素一起变色(这样才不必一直为了新色彩而重新制作图标),我们只用两种颜色做了一组图标:白色和透明(会显示除每次更改的背景颜色).图2-9就是放在首页引言之前的图标:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"><br>图2-9: 13X13的透明图标(放大后)<br>为了在透明部分填进颜色,我们使用了简单的css的background属性设定颜色,我们希望只希望这个颜色出现在图表的后面而不出现在标题文字后面,我们用到了css选择器只对<h3>标签内的图片使用这条规则,以便达到我们想要的效果:<br><span class="code">h3 img {<br> background: #696;<br> }</span><br>这段css代码表示<h3>标签内的所有<img>标签都把背景设为绿色,背景色会透过透明像素显示出来,但是白色部分仍然还是白色,如此一来,每个月只需要修改这条css规则,换上不同的颜色,就能瞬间改变网站上每个图标的色彩了,就像变魔术一样.<br><strong>对齐<img>标签</strong><br>为了使图标和文字正确的对齐(我们希望垂直居中),因此我们加上了这条css规则:<br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle;<br> }</span><br>这条规则会使图标和<h3>文字内容垂直居中,图2-20就是设定玩的标题:<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>图2-10:以css为图标加上背景色的示例<br>这个例子还能说明另一个重要的概念—以css指定背景色彩会出现在任何页面内指定的图标或是css图标后面.<br>举例来说,我们回头看看"方便更新的图标"这个示例,为它加上背景色看看:<br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #fff;<br> padding-left: 30px;<br> background: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span><br>如此以来 transparent_icon.gif 会显示在相同规则中稍早定义的背景色之上(如图2-11) —在这个例子中,背景色是#696,也就是撞球桌的绿色.<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg"><br>图2-11 设定了背景图,背景色的标题示例<br>当你为了考虑色彩为主的页面上加小圆角,装饰图标时,这个小技巧就十分好用了.这些不重的图片可以完全放进css文件里面,未来打算更新的时候也就可以轻松替换.现在多用点心思.就能节省未来许多的工作.<br><strong>总结</strong><br>我希望通过比较集中常用的方法后,你能发觉正确使用标题标签的好处.不管是视觉,非视觉浏览器或者其他设备,都能正确的历届标题的含义,并且以适当的方法展现它们,搜索引擎也会为他们建立索引,你也可以轻松的以css应用和修改需要显示的效果.
</p> </div>
</div>
<div style="height: 25px;">
<div class="wzconBq" style="display: inline-flex;">
<span>相关标签：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=css" target="_blank">css</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=使用" target="_blank">使用</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=图标" target="_blank">图标</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=我们" target="_blank">我们</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=标签" target="_blank">标签</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=标记" target="_blank">标记</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=标题" target="_blank">标题</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=样式" target="_blank">样式</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=语言" target="_blank">语言</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh/search?word=页面" target="_blank">页面</a> </div>
</div>
<div style="display: inline-flex;float: right; color:#333333;">来源：php.cn</div>
</div>
<div class="wzconOtherwz">
<a href="http://www.php.cn/zh/faq/12704.html" title="HTML5 虚拟键盘出现挡住输入框的解决办法_html5教程技巧">
<span>上一篇：HTML5 虚拟键盘出现挡住输入框的解决办法_html5教程技巧</span>
</a>
<a href="http://www.php.cn/zh/faq/12708.html" title="XHTML入门学习教程:框架标签使用_HTML/Xhtml_网页制作">
<span>下一篇：XHTML入门学习教程:框架标签使用_HTML/Xhtml_网页制作</span>
</a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">本站声明</div>
<div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div>
</div>
<div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">作者最新文章</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796639684.html">如何阅读 Java 字节码既有趣又有利可图</a>
</div>
<div>2024-10-22 13:03:13</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796639563.html">使用 PHP 连接到 MySQL</a>
</div>
<div>2024-10-22 11:44:46</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796634850.html">DORA 指标：工程领导者的最佳实践</a>
</div>
<div>2024-10-18 17:59:07</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796634844.html">法学硕士：使用 TensorFlow、Keras、Hugging Face 进行迁移学习</a>
</div>
<div>2024-10-18 17:52:44</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796634339.html">您（和您的技术团队）在工作中需要培养的 IT 技能</a>
</div>
<div>2024-10-18 14:43:47</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796630963.html">使用 PHP 配置文件实现最佳实践的完整指南</a>
</div>
<div>2024-10-15 12:00:09</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796630962.html">如何在 PHP 脚本中导入 config.php 文件？</a>
</div>
<div>2024-10-15 11:53:15</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796626101.html">如何开始使用 NodeJS – 初学者手册</a>
</div>
<div>2024-10-17 14:29:56</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796626027.html">Nuxt.js：实用指南</a>
</div>
<div>2024-10-09 10:13:21</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="http://www.php.cn/zh/faq/1796619293.html">如何设置重要的 Git 配置全局属性</a>
</div>
<div>2024-09-30 11:49:55</div>
</li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">最新问题</div>
<div class="wdsyContent">
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/zh/wenda/176399.html" target="_blank" title="通过添加 Width 属性将内容向左移动" class="wdcdcTitle">通过添加 Width 属性将内容向左移动</a>
<a href="http://www.php.cn/zh/wenda/176399.html" class="wdcdcCons">我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> 来自于 2024-04-06 22:01:35</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>816</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/zh/wenda/176382.html" target="_blank" title="使用opentbs生成odt文件时遇到的问题：相同key的值显示在同一行而不是单独的列中。" class="wdcdcTitle">使用opentbs生成odt文件时遇到的问题：相同key的值显示在同一行而不是单独的列中。</a>
<a href="http://www.php.cn/zh/wenda/176382.html" class="wdcdcCons">我正在使用一个名为OpenTbs的库来使用PHP创建odt，我使用它是因为动态生成列和行。我知道如何创建行和列，但我不知道如何组织它们。让我添加一个例子：所以首先我会将其添加到我的...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> 来自于 2024-04-06 20:18:18</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>483</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/zh/wenda/176380.html" target="_blank" title="SQL Count() 也需要 0" class="wdcdcTitle">SQL Count() 也需要 0</a>
<a href="http://www.php.cn/zh/wenda/176380.html" class="wdcdcCons">我只有一张表，我想计算起始为0的标签的每个条目现在我尝试这样：SELECT标签，COUNT(start)ASAnzahl，user_idFROMdatensammlung其中(st...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> 来自于 2024-04-06 19:48:53</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>449</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/zh/wenda/176378.html" target="_blank" title="在移动视图中，当用户点击链接时，如何关闭此导航栏？" class="wdcdcTitle">在移动视图中，当用户点击链接时，如何关闭此导航栏？</a>
<a href="http://www.php.cn/zh/wenda/176378.html" class="wdcdcCons">当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> 来自于 2024-04-06 19:23:03</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>411</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="http://www.php.cn/zh/wenda/176376.html" target="_blank" title="仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript" class="wdcdcTitle">仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript</a>
<a href="http://www.php.cn/zh/wenda/176376.html" class="wdcdcCons">我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> 来自于 2024-04-06 19:25:49</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>505</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
</div>
</div>
<div class="wzconZt" >
<div class="wzczt-title">
<div>相关专题</div>
<a href="http://www.php.cn/zh/faq/zt" target="_blank">更多>
</a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431291616.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssys" class="title-a-spanl" title="CSS"><span>CSS</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214284035010.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css居中" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssjz" class="title-a-spanl" title="css居中"><span>css居中</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssrhcrtp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282555686.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css如何插入图片" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssrhcrtp" class="title-a-spanl" title="css如何插入图片"><span>css如何插入图片</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssccxsslh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275251415.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css超出显示..." /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssccxsslh" class="title-a-spanl" title="css超出显示..."><span>css超出显示...</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssztys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214211647525.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css字体颜色" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssztys" class="title-a-spanl" title="css字体颜色"><span>css字体颜色</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/smscss"><img src="https://img.php.cn/upload/subject/202407/22/2024072214211465937.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="什么是css" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/smscss" class="title-a-spanl" title="什么是css"><span>什么是css</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/csssjxzmx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214174427622.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css三角形怎么写" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/csssjxzmx" class="title-a-spanl" title="css三角形怎么写"><span>css三角形怎么写</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="http://www.php.cn/zh/faq/cssszwzys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214164655043.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css设置文字颜色" /> </a>
<a target="_blank" href="http://www.php.cn/zh/faq/cssszwzys" class="title-a-spanl" title="css设置文字颜色"><span>css设置文字颜色</span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<div class="wzrOne">
<div class="wzroTitle">热门推荐</div>
<div class="wzroList">
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="url是什么意思？" href="http://www.php.cn/zh/faq/418772.html">url是什么意思？</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="DOM是什么意思" href="http://www.php.cn/zh/faq/414303.html">DOM是什么意思</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="如何改变图片大小" href="http://www.php.cn/zh/faq/414252.html">如何改变图片大小</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="HTML中如何将字体加粗" href="http://www.php.cn/zh/faq/414520.html">HTML中如何将字体加粗</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="html图片大小如何设置" href="http://www.php.cn/zh/faq/475145.html">html图片大小如何设置</a>
</div>
</li>
</ul>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="wzrThree">
<div class="wzrthree-title">
<div>热门教程</div>
<a target="_blank" href="http://www.php.cn/zh/course.html">更多>
</a>
</div>
<div class="wzrthreelist swiper2">
<div class="wzrthreeTab swiper-wrapper">
<div class="check tabdiv swiper-slide" data-id="one">相关教程 <div></div></div>
<div class="tabdiv swiper-slide" data-id="two">热门推荐<div></div></div>
<div class="tabdiv swiper-slide" data-id="three">最新课程<div></div></div>
</div>
<ul class="one">
<li>
<a target="_blank" href="http://www.php.cn/zh/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="http://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
<div class="wzrthreerb">
<div>1416821 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/74.html" title="php入门教程之一周学会PHP" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="php入门教程之一周学会PHP"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="php入门教程之一周学会PHP" href="http://www.php.cn/zh/course/74.html">php入门教程之一周学会PHP</a>
<div class="wzrthreerb">
<div>4257445 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="74">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA 初级入门视频教程" href="http://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a>
<div class="wzrthreerb">
<div>2475816 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="http://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a>
<div class="wzrthreerb">
<div>503673 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/2.html" title="PHP 零基础入门教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 零基础入门教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="PHP 零基础入门教程" href="http://www.php.cn/zh/course/2.html">PHP 零基础入门教程</a>
<div class="wzrthreerb">
<div>844119 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="2">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="two" style="display: none;">
<li>
<a target="_blank" href="http://www.php.cn/zh/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="http://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
<div class="wzrthreerb">
<div >1416821次学习</div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="JAVA 初级入门视频教程" href="http://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a>
<div class="wzrthreerb">
<div >2475816次学习</div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="http://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a>
<div class="wzrthreerb">
<div >503673次学习</div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/901.html" title="Web前端开发极速入门" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端开发极速入门"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Web前端开发极速入门" href="http://www.php.cn/zh/course/901.html">Web前端开发极速入门</a>
<div class="wzrthreerb">
<div >215272次学习</div>
<div class="courseICollection" data-id="901">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/234.html" title="零基础精通 PS 视频教程" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基础精通 PS 视频教程"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="零基础精通 PS 视频教程" href="http://www.php.cn/zh/course/234.html">零基础精通 PS 视频教程</a>
<div class="wzrthreerb">
<div >876885次学习</div>
<div class="courseICollection" data-id="234">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="three" style="display: none;">
<li>
<a target="_blank" href="http://www.php.cn/zh/course/1648.html" title="【web前端】Node.js快速入门" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入门"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="【web前端】Node.js快速入门" href="http://www.php.cn/zh/course/1648.html">【web前端】Node.js快速入门</a>
<div class="wzrthreerb">
<div >6360次学习</div>
<div class="courseICollection" data-id="1648">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/1647.html" title="国外Web开发全栈课程全集" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="国外Web开发全栈课程全集"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="国外Web开发全栈课程全集" href="http://www.php.cn/zh/course/1647.html">国外Web开发全栈课程全集</a>
<div class="wzrthreerb">
<div >5011次学习</div>
<div class="courseICollection" data-id="1647">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/1646.html" title="Go语言实战之 GraphQL" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go语言实战之 GraphQL"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Go语言实战之 GraphQL" href="http://www.php.cn/zh/course/1646.html">Go语言实战之 GraphQL</a>
<div class="wzrthreerb">
<div >4193次学习</div>
<div class="courseICollection" data-id="1646">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/1645.html" title="550W粉丝大佬手把手从零学JavaScript" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉丝大佬手把手从零学JavaScript"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="550W粉丝大佬手把手从零学JavaScript" href="http://www.php.cn/zh/course/1645.html">550W粉丝大佬手把手从零学JavaScript</a>
<div class="wzrthreerb">
<div >633次学习</div>
<div class="courseICollection" data-id="1645">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="http://www.php.cn/zh/course/1644.html" title="python大神Mosh，零基础小白6小时完全入门" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh，零基础小白6小时完全入门"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="python大神Mosh，零基础小白6小时完全入门" href="http://www.php.cn/zh/course/1644.html">python大神Mosh，零基础小白6小时完全入门</a>
<div class="wzrthreerb">
<div >21311次学习</div>
<div class="courseICollection" data-id="1644">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper2', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrthreeTab>div').click(function(e){
$('.wzrthreeTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrthreelist>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
<div class="wzrFour">
<div class="wzrfour-title">
<div>最新下载</div>
<a href="http://www.php.cn/zh/xiazai">更多>
</a>
</div>
<script>
$(document).ready(function(){
var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
speed:1000,
autoplay:{
delay:3500,
disableOnInteraction: false,
},
pagination:{
el:'.sjyx_banSwiperwz .swiper-pagination',
clickable :false,
},
loop:true
})
})
</script>
<div class="wzrfourList swiper3">
<div class="wzrfourlTab swiper-wrapper">
<div class="check swiper-slide" data-id="onef">网站特效 <div></div></div>
<div class="swiper-slide" data-id="twof">网站源码<div></div></div>
<div class="swiper-slide" data-id="threef">网站素材<div></div></div>
<div class="swiper-slide" data-id="fourf">前端模板<div></div></div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery企业留言表单联系代码" href="http://www.php.cn/zh/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5 MP3音乐盒播放特效" href="http://www.php.cn/zh/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="http://www.php.cn/zh/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="http://www.php.cn/zh/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="http://www.php.cn/zh/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="经典html5推箱子小游戏" href="http://www.php.cn/zh/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery滚动添加或减少图片特效" href="http://www.php.cn/zh/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="CSS3个人相册封面悬停放大特效" href="http://www.php.cn/zh/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a>
</div>
</li>
</ul>
<ul class="twof" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8328" title="家居装潢清洁维修服务公司网站模板" target="_blank">[前端模板] 家居装潢清洁维修服务公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8327" title="清新配色个人求职简历引导页模板" target="_blank">[前端模板] 清新配色个人求职简历引导页模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8326" title="设计师创意求职简历网页模板" target="_blank">[前端模板] 设计师创意求职简历网页模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8325" title="现代工程建筑公司网站模板" target="_blank">[前端模板] 现代工程建筑公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8324" title="教育服务机构响应式HTML5模板" target="_blank">[前端模板] 教育服务机构响应式HTML5模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8323" title="网上电子书店商城网站模板" target="_blank">[前端模板] 网上电子书店商城网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8322" title="IT技术解决互联网公司网站模板" target="_blank">[前端模板] IT技术解决互联网公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8321" title="紫色风格外汇交易服务网站模板" target="_blank">[前端模板] 紫色风格外汇交易服务网站模板</a>
</div>
</li>
</ul>
<ul class="threef" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG素材] 金色的毕业帽矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[banner图] 扁平风格的植树节banner矢量素材(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/sucai/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)</a>
</div>
</li>
</ul>
<ul class="fourf" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8328" target="_blank" title="家居装潢清洁维修服务公司网站模板">[前端模板] 家居装潢清洁维修服务公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8327" target="_blank" title="清新配色个人求职简历引导页模板">[前端模板] 清新配色个人求职简历引导页模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8326" target="_blank" title="设计师创意求职简历网页模板">[前端模板] 设计师创意求职简历网页模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8325" target="_blank" title="现代工程建筑公司网站模板">[前端模板] 现代工程建筑公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8324" target="_blank" title="教育服务机构响应式HTML5模板">[前端模板] 教育服务机构响应式HTML5模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8323" target="_blank" title="网上电子书店商城网站模板">[前端模板] 网上电子书店商城网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8322" target="_blank" title="IT技术解决互联网公司网站模板">[前端模板] IT技术解决互联网公司网站模板</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="http://www.php.cn/zh/xiazai/code/8321" target="_blank" title="紫色风格外汇交易服务网站模板">[前端模板] 紫色风格外汇交易服务网站模板</a>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper3', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrfourlTab>div').click(function(e){
$('.wzrfourlTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrfourList>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
</div>
</div>
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a href="http://www.php.cn/zh/about/xieyi.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a>
<a href="http://www.php.cn/zh/about/yinsi.html" rel="nofollow" target="_blank" title="免责声明" class="cBlack">免责声明</a>
<a href="http://www.php.cn/zh/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
<div class="clear"></div>
</dt>
<dd class="cont1">PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！</dd>
</dl>
</div>
</div>
</div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1731049787"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
</body>
</html>
