h5中h1标签里面能加什么?

在HTML5中,h1标签用于定义网页上的主要标题。h1标签可以包含文本内容,这些文本内容通常是对网页主题的描述或说明。具体来说,h1标签的主要功能是对文本进行强调,告诉搜索引擎这是一段重要的文字标题,

在HTML5中,h1标签用于定义网页上的主要标题。h1标签可以包含文本内容,这些文本内容通常是对网页主题的描述或说明。

具体来说,h1标签的主要功能是对文本进行强调,告诉搜索引擎这是一段重要的文字标题,从而加深网站对关键词的关联性。此外,一个网页只有一个h1标签,它是所有h标签中优先级最高的。

因此,h1标签里面可以加任何文本内容,但应确保这些内容与网页的主题相关,并且能够清晰地传达出该页面的主要信息。

HTML5中h1标签的具体属性和用法是什么?

在HTML5中,

标签用于定义页面中最重要的标题。根据HTML的规范,一个页面可以有多个一级标题,但通常建议只使用一个,以明确表达页面的主要内容。以下是关于

标签的具体属性和用法的详细说明:

1. 定义及用法:

-

标签用于定义页面中最重要的标题。它的字体大小最大,通常用于站点中的logo或文章的中心思想。

- 每个页面可以有多个一级标题,但为了SEO(搜索引擎优化)和用户体验,建议只使用一个一级标题。

2. 标准属性:

- id:用于指定元素的唯一ID。

- align:在HTML 4.01中,这个属性已被废弃,并且在HTML5中也不再支持。因此,应使用CSS来控制标题的水平对齐方式。

3. 优化用法:

- 在使用

标签时,可以将其嵌入关键词,有助于提高网页的相关性和搜索引擎排名。

如何在HTML5中正确使用h1标签以提高搜索引擎优化(SEO)效果?

在HTML5中正确使用h1标签以提高搜索引擎优化(SEO)效果,可以遵循以下几个步骤:

1. 确保每个页面只有一个H1标签:根据以往的经验,一个页面上应该只有一个H1标签,这个标签代表页面的主要标题。这有助于搜索引擎理解页面的结构和重点内容。

2. 将关键词嵌入到H1标签中:将主要关键词添加到H1标签中是非常重要的,因为这个标签通常充当页面或帖子的标题。这样做可以帮助搜索引擎更好地理解页面的主题,从而提高页面的相关性和排名。

3. 保持标题的简洁和清晰:虽然关键词很重要,但也不应该过度堆砌关键词。保持标题简洁、清晰,并且易于阅读是非常重要的。这不仅有助于用户体验,也能避免被搜索引擎视为堆砌关键词。

4. 使用H2至H6标签来组织子标题:在H1标签之后,可以使用H2至H6标签来组织页面的子标题和小节。这些标签帮助创建一个逻辑清晰的内容结构,使得用户和搜索引擎都能更容易地导航和理解页面内容。

5. 确保标题与内容的一致性:H1标签应准确反映页面的主要内容,并且与页面上的其他元素保持一致。这有助于提升用户体验和搜索引擎的信任度。

通过以上步骤,可以有效地利用HTML5中的h1标签来提高SEO效果。

在HTML5中,除了h1标签外,还有哪些其他元素可以用于定义网页的主要标题?

在HTML5中,除了h1标签外,还有多种元素可以用于定义网页的主要标题。以下是一些常见的元素:

1. h2, h3, h4, h5, h6:这些元素用于定义文档内容中的不同层级的标题。其中,h1是最高级别的标题,通常用来表示网页的主要标题。

2. </span>:这个元素位于<span style="color:#1865ea;"><head></span>部分,用来定义文档的标题,显示在浏览器的标题栏或标签页上。</p><p></p><p>3. <span style="color:#1865ea;"><header></span>:这个元素用于定义网页的头部区域,可以包含标题、导航、徽标等内容。</p><p></p><p>4. <span style="color:#1865ea;"><hgroup></span>:这个元素用于组合多个标题元素,当标题有多个层级(如副标题)时,可以使用<span style="color:#1865ea;"><hgroup></span>来进行组合。</p><p></p><p>5. <span style="color:#1865ea;"><section></span>:这个元素用于对网页或区段的标题进行定义,当标题有多个层级时,可以使用<span style="color:#1865ea;"><section></span>来进行组合。</p><p></p><p></p><p></p><p><h3> <span style="color:#1865ea;">h1</span>标签与其他HTML标签(如<span style="color:#1865ea;">h2</span>, <span style="color:#1865ea;">h3</span>, <span style="color:#1865ea;">h4</span>)在SEO和用户体验方面有何不同影响?</h3></p><p>在SEO和用户体验方面,<span style="color:#1865ea;">h1</span>标签与其他HTML标签(如<span style="color:#1865ea;">h2</span>, <span style="color:#1865ea;">h3</span>, <span style="color:#1865ea;">h4</span>)有显著的不同影响。</p><p></p><p>### SEO影响</p><p></p><p>1. 理解页面结构:</p><p> - <span style="color:#1865ea;">h1</span>标签是最重要的标题标签,它帮助搜索引擎理解网页的主要内容。虽然<span style="color:#1865ea;">h1</span>标签不是确定的排名因素,但它仍然对SEO非常重要,因为它能够帮助搜索引擎更好地理解页面内容。</p><p> - 使用<span style="color:#1865ea;">h1</span>标签可以使页面的逻辑结构更加清晰,从而提高搜索引擎的抓取效率和内容展现的准确性。</p><p></p><p>2. 关键词优化:</p><p> - <span style="color:#1865ea;">h1</span>标签通常包含页面的主要关键词,这有助于提升这些关键词的权重,从而提高页面在相关搜索结果中的排名。</p><p> - 相比之下,<span style="color:#1865ea;">h2</span>, <span style="color:#1865ea;">h3</span>, <span style="color:#1865ea;">h4</span>等标签则用于进一步细化内容,提供更多子主题或详细信息,这些标签也会包含关键词,但其权重相对较低。</p><p></p><p>3. 内容层次化:</p><p> - <span style="color:#1865ea;">h2</span>, <span style="color:#1865ea;">h3</span>, <span style="color:#1865ea;">h4</span>标签通过进一步细化内容,帮助搜索引擎理解网页的层次结构。例如,在外贸网站中,<span style="color:#1865ea;">h3</span>标签可以用来标记产品特性、服务流程或FAQ的具体问题,这不仅为用户提供了更丰富的信息,也为搜索引擎提供了更多的关键词信息。</p><p></p><p>### 用户体验影响</p><p></p><p>1. 内容可读性:</p><p> - <span style="color:#1865ea;">h1</span>标签作为页面的主要标题,直接影响用户对页面内容的第一印象。一个清晰、简洁的<span style="color:#1865ea;">h1</span>标题能够吸引用户的注意力,并快速传达页面的核心内容。</p><p> - <span style="color:#1865ea;">h2</span>, <span style="color:#1865ea;">h3</span>, <span style="color:#1865ea;">h4</span>标签则用于进一步分解和突出页面中的子主题或细节,使用户能够更清晰地看到内容的层次结构,从而提高阅读体验。</p><p></p><p>2. 导航和定位:</p><p> - 适当使用<span style="color:#1865ea;">h</span>标签可以帮助用户快速定位到他们感兴趣的部分。例如,用户可以通过浏览不同的<span style="color:#1865ea;">h</span>标签来了解文章的整体结构和重点内容。</p><p></p><p>3. 视觉效果:</p><p> - 结合CSS样式,<span style="color:#1865ea;">h</span>标签可以实现美观的页面布局,使文章结构更加清晰,进一步提升用户体验。</p><p></p><p></p><p></p><p><h3> 如何通过CSS样式来增强HTML5页面中<span style="color:#1865ea;">h1</span>标签的效果和可读性?</h3></p><p>要通过CSS样式来增强HTML5页面中<span style="color:#1865ea;">h1</span>标签的效果和可读性,可以采取以下几个步骤:</p><p></p><p> 首先,为了确保<span style="color:#1865ea;">h1</span>标签的样式能够被正确应用并避免继承HTML的默认样式,我们需要使用一个reset.css 文件来重置所有元素的默认样式。例如:</p><p><pre>css</p><p> body, p, h1, h2, h3, h4, h5, h6, dl, dd {</p><p> margin: 0;</p><p> padding: 0;</p><p> font-size: 12px;</p><p> }</p><p> ol, ul {</p><p> list-style-type: none;</p><p> }</p><p></pre></p><p> 这样可以确保<span style="color:#1865ea;">h1</span>标签不会继承其他元素的默认样式,从而更好地控制其样式。</p><p></p><p> 接下来,可以设置<span style="color:#1865ea;">h1</span>标签的字体、大小和颜色等属性,以增强其视觉效果和可读性。例如:</p><p><pre>css</p><p> h1 {</p><p> font-family: Arial, sans-serif;</p><p> font-size: 24px;</p><p> color: #333;</p><p> }</p><p></pre></p><p> 这样可以使<span style="color:#1865ea;">h1</span>标签的字体更加清晰和易读。</p><p></p><p> 使用CSS的<span style="color:#1865ea;">text-emphasis</span>属性可以对文本进行强调处理,增加视觉效果。例如:</p><p><pre>css</p><p> h1 {</p><p> text-emphasis: ⏰;</p><p> }</p><p></pre></p><p> 这样可以在<span style="color:#1865ea;">h1</span>标签的文本上添加特定的装饰效果,如表情符号或其他图形。</p><p></p><p> 通过调整字母和单词之间的间距以及添加阴影或轮廓,可以进一步增强<span style="color:#1865ea;">h1</span>标签的视觉效果和可读性。例如:</p><p><pre>css</p><p> h1 {</p><p> letter-spacing: 1px;</p><p> text-shadow: 0 0 5px #999;</p><p> }</p><p></pre></p><p> 这样可以使<span style="color:#1865ea;">h1</span>标签的文本更加突出和易于阅读。</p><p></p><p> 将这些CSS规则写入一个外部CSS文件,并引用该文件到HTML页面中,可以提高代码的维护性和可读性。例如:</p><p><pre>html</p><p> <head></p><p> <link rel=stylesheet type=text/css href=style.css ></p><p> </head></p><p></pre></p><p> 在<span style="color:#1865ea;">style.css </span>文件中定义上述CSS规则,然后在HTML页面中引用该文件。</p><p></p></p></div> <div class="article--copyright"><p><b>文章说明:</b> </p> <p> </p> <p>本文原创发布于探乎站长论坛,未经许可,禁止转载。</p> <p>题图来自Unsplash,基于<a href="https://www.8hi.com.cn/read-41036-1.html">CC0协议</a>。</p> <p>该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。</p> </div> <div class="v8-read-footer"> <div class="v8-read-footer-left"> <a href="javascript:;" title="已被阅读次数"> <i class="fa fa-fw fa-eye"></i> <span>105</span> </a> <a class="v8-diangezan" href="javascript:;" title="点个赞" data-id="69905" data-type="read"> <i class="fa fa-thumbs-o-up"></i> <span>16</span> </a> <a href="javascript:;" title="收藏" onclick="Interactive('addcollect',$_URI['ID'],this)"> <i class="fa fa-star"></i> <span>收藏文章</span> </a> <span></span> </div> <div class="v8-hide-md"></div> <span>2024-05-31 18:01</span> </div> </div> </div> <div class="comment"> <div class="v8-read-reply-list"> <div class="v8-read-reply-title"> <span> <span>评论列表</span> <a data-desc="0" title="正序" onclick="window.location.href='read-69905-1.html?desc=0'" rel="noreferrer"> <i class="fa fa-fw fa-sort-numeric-asc"></i> </a> </span> <a href="javascript:;" id="showReplyboxBtn"> <i class="fa fa-edit"></i> <span>评论</span> </a> </div> <div class="v8-read-reply-content"> <div id="v8-replylistbox" class="v8-reply-list"> </div> <div class="v8-read-reply-footer"> <div class="v8-list-null"></div> </div> </div> </div> </div> </div> <!--RIGTH--> <div class="v8-container-right v8-read-right-auto"> <div class="zz_box"> <div class="pk-row"> <div class="pk-w-sm-2"><img style="width:38px;height:38px;" src="" alt="站长交流" onerror="this.src='/template/v8/img/forum.png';this.onerror=''"></div> <div class="pk-w-sm-10"><div style="font-size:19px;line-height: 38px;font-weight: 500;"><a href="/list-2-1.html">站长交流</a></div></div> </div> <div class="zz_box1"> 把你想说的,想问的,想吐槽的来这里畅快一泄</div> <div class="zz_box1"> <div class="pk-row"> <div class="pk-w-sm-3 dd1"> <a href="/index.php?c=edit&type=read&sortid=2" rel="noreferrer"> <img style="background-color: #f7e2dd;" src="/template/v8/img/read/topic.png"> <p>发帖</p> </a> </div> <div class="pk-w-sm-3 dd1"> <a href=""> <img style="background-color:#d7f1f1;" src="/template/v8/img/read/me.png"> <p>与我相关</p> </a> </div> <div class="pk-w-sm-3 dd1"> <a href="/app-puyuetian_taskcenter-index.html"> <img style="background-color:#fdf2ce;" src="/template/v8/img/read/task.png"> <p>我的任务</p> </a> </div> <div class="pk-w-sm-3 dd1"> <a> <img style="background-color:rgba(226,235,255,.6);" src="/template/v8/img/read/share.png"> <p>分享</p> </a> </div> </div> </div> <div class="gly"> <div>社区管理员:</div> <div style="text-align: center;"> <img width="68px" src="/template/v8/img/read/kr.png"> <p style="font-size: 12px;">暂无管理员</p> </div> </div> </div> <div class="zz_box"> <button class="pk-btn pk-btn-primary pk-btn-block" id="showReplyboxBtn1"><i class="fa fa-edit"></i>评论一个</button> </div> <div class="zz_box zz_sj"> <span style="font-weight: 700;">节点最新文章:</span> <ul> <li><a href="/read-70021-1.html">网站首页收录突然消失了怎么回事?</a></li> <li><a href="/read-70016-1.html">百度蜘蛛会自动抓取sitemap.html吗?</a></li> <li><a href="/read-70014-1.html">低权重网站怎么样比较容易交换友链?</a></li> <li><a href="/read-70012-1.html">JIT如何消除供应链网络中的库存?</a></li> <li><a href="/read-70007-1.html">百度云防护让网站更有安全感</a></li> <li><a href="/read-69998-1.html">百度蜘蛛抓爬sitemap文件时是什么规律?</a></li> <li><a href="/read-69976-1.html">百度为什么被学术平台霸屏了</a></li> <li><a href="/read-69968-1.html">指数蛙提升百度指数,150一万是不是真实的</a></li> <li><a href="/read-69967-1.html">收录的网站文章链接用site和站长工具查,怎么查不到?</a></li> <li><a href="/read-69964-1.html">百度抓取频次突然上来了,是不是说明有效果了?</a></li> <li><a href="/read-69962-1.html">域名会影响网站排行吗?</a></li> <li><a href="/read-69946-1.html">百度的搜索结果是即时更新的还是定时更新的?</a></li> <li><a href="/read-69938-1.html">小标题在文章中是不是必要的?</a></li> <li><a href="/read-69934-1.html">参加质量源于设计QbD培训能学到什么?</a></li> <li><a href="/read-69929-1.html">用site我的网站,看有收录,但直接用我的域名搜索显示“没有找到该URL”,而下面有收录的网页?</a></li> </ul> </div> </div> <!--RIGTH--> </div> <template id="replyTemplate"> <div class="v8-reply"> <div class="v8-reply-author"> <a class="v8-reply-author-username" href="javascript:;"> <img src="userhead/0.png" alt="" /> <span>我</span> </a> </div> <div class="v8-reply-content replycontent">${content}</div> <div class="v8-reply-footer"> <span class="pk-text-danger">刚刚</span> </div> </div> </template> <div class="v8-read-postbox-bg"></div> <div class="pk-hadsky v8-read-postbox"> <div class="v8-center-right-head-navbar pk-text-truncate pk-hide-md"> <img class="back" src="template/v8/img/center/back.png" alt="" onclick="$('.v8-read-postbox-bg').trigger('click')" /> <span class="title">发布评论</span> </div> <i class="fa fa-times-circle-o v8-hide-sm" onclick="$('.v8-read-postbox-bg').trigger('click')"></i> <form name="form_post" method="post" action="index.php?c=post&type=reply&return=json"> <input type="hidden" name="rid" value="69905" /> <div class="pk-row pk-margin-bottom-15 pk-hide-sm"> <div class="pk-w-sm-12 pk-padding-0"> <p class="pk-text-truncate"> <span>评论:</span> <span>h5中h1标签里面能加什么?</span> </p> </div> </div> <div class="pk-row pk-margin-bottom-15"> <div class="pk-w-sm-12 pk-padding-0"> <a name="postreplyposition"></a> <textarea id="container" class="pk-textarea pk-radius-4" name="content" style="height:200px"></textarea> </div> </div> <div style="max-width:240px"> </div> <div class="pk-row pk-margin-bottom-15"> <div class="pk-w-sm-12 pk-padding-0"> <button id="postreplysubmitbtn" type="button" class="pk-btn"> <span>发布评论</span> </button> </div> </div> </form> </div> <div class="v8-read-page-loading"></div></div><!--页脚--> <div class="v8-footer"> <div class="pk-row"> <div class="pk-w-sm-5"> <div class="zz_box3"> <span>探乎站长论坛: 8hi.com.cn</span> <p>学习交流创造 ∞ 知识连接未来</p> <p>每一位新手站长都是行业未来的希望,一个行业只有不断注入新材才能有长久发展,才能有让人眼前一亮的创作,本平台聚合了大量建站经验贴子,前后端开发教程,学习后就可以把自己的想法,用代码勾勒出来,每个行业从来都不缺人才,只是缺一个人才成长的地方,你感觉自己可以,那就在这里努力学上3个月,再去浏览过去的网页,会有不一样的想法,加油,后浪们~</p> <p>内存占用21.6MB</p> </div> </div> <div class="pk-w-sm-5"> <div class="zz_box3 zz_wjz"> <div class="pk-row"> <div class="pk-w-sm-4"> <h2>关于我们</h2> <ul> <li><a href="https://www.8hi.com.cn/read-499-1.html">发帖规范</a></li> <li><a href="https://www.8hi.com.cn/read-2094-1.html">关于道亮</a></li> <li><a href="https://www.8hi.com.cn/app/puyuetian_sitemap/sitemaps/sitemap_1.xml">网址地图</a></li> </ul> </div> <div class="pk-w-sm-4"> <h2>优秀功能</h2> <ul> <li><a href="https://www.8hi.com.cn/forum-1461.html">自由节点</a></li> <li><a href="https://www.8hi.com.cn/app_yiliang_daohang.html">探乎导航</a></li> <li><a href="https://www.8hi.com.cn/html-cwc.html">查长尾词</a></li> <li><a href="https://www.8hi.com.cn/app_yiliang_zhanzhanggongju.html">综合工具</a></li> <li><a href="https://www.8hi.com.cn/html-chalishi.html">域名历史</a></li> <li><a href="https://www.8hi.com.cn/xingyu.html">星旅穿梭</a></li> <li><a href="/topic-music.html" rel="noreferrer">探乎听歌房</a></li> </ul> </div> <div class="pk-w-sm-4"> <h2>节点推荐</h2> <ul> <li><a href="https://www.8hi.com.cn/list-5-1.html">站长百科</a></li> <li><a href="https://www.8hi.com.cn/list-11-1.html">前端学习</a></li> <li><a href="https://www.8hi.com.cn/list-3-1.html">seo学习</a></li> <li><a href="https://www.8hi.com.cn/list-1668-1.html">种草程序</a></li> <li><a href="https://www.8hi.com.cn/list-492-1.html">宝塔面板</a></li> </ul> </div> </div> </div> </div> <div class="pk-w-sm-2"> <div class="zz_box0"> <strong>60000+</strong> <h3>精彩好文等你来</h3> </div> </div> </div> <div class="zz_fgx"></div> <div class="zz_zfooter"> <p>探乎站长论坛创建于2023年10月8日,本站内容均为会员发表,并不代表探乎站长论坛立场!</p> <p>© 2023 - 2024 <a href="https://www.8hi.com.cn/">探乎站长论坛</a> <a target="_blank" href="http://beian.miit.gov.cn" rel="noreferrer" class="pk-hide-sm">粤ICP备18120620号</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ac6a42db38cff3f84da185655329bd79"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> $(window).scroll(function() { var distanceToBottom = $(document).height() - ($(window).height() + $(window).scrollTop()); if (distanceToBottom < 200) { $(".v8-list-forum-list").fadeOut("slow"); }else{ $(".v8-list-forum-list").fadeIn("slow"); } }); </script> <link rel="stylesheet" href="/app/puyuetianeditor/template/css/PytEditor.css" /> <script id="PytEditorScript" data-pc="var PytConfig = 'Html,Bold,Italic,Underline,Emotion,Image,Code,Removemarks';" data-phone="var PytConfig = 'Emotion,Image,Code,Unlink';" data-config=""> var PytEditorPhoneEasypostread = Cnum("0"); var PytEditorPhoneEasypostreply = Cnum("1"); var PytEditorPCEasypostread = Cnum("0"); var PytEditorPCEasypostreply = Cnum("0"); if ($(window).width() > 1000) { eval($('#PytEditorScript').data('pc')); var PytEditorHeight = Cnum("600px"); } else { eval($('#PytEditorScript').data('phone')); var PytEditorHeight = Cnum("200px"); } </script> <script src="/app/puyuetianeditor/template/js/PytEditor.js"></script> <script src="/app/puyuetianeditor/template/js/PytEditorInit.js"></script> <script id="hadskyCloudServerScriptObject"> // hs7以后统一默认云服务站点为cn国内节点 $(function(){ $.getScript("https://v7.cn.cloudserver.hadsky.com/www.8hi.com.cn.js", function(response, status) { if(status != "success") { console.log('云服务加载失败:status = ' + status); } }); }); </script><link href="app/puyuetian_codebox/template/css/css.css" rel="stylesheet" /> <script src="app/puyuetian_codebox/template/js/js.js"></script> <script> $(function () { _puyuetian_codebox({ selector: '.readcontent pre,.readcontent code', theme: "green", copy: parseInt("1"), edit: parseInt("0") }); }); </script><script>$(function(){$(".app_puyuetian_gjwzzdcjbk_wz").html("未知")});</script><script> function app_puyuetian_contentpartpay_look(me) { var id = me.attr('href').replace(/\#/g, ''); $.getJSON('index.php', { c: 'app', a: 'puyuetian_contentpartpay', s: 'get', id }, function(rd) { if (rd['state'] != 'ok') { ppp({ icon: 2, content: rd['msg'] }); return false; } if (!rd['datas']['needpay']) { var _look = function() { me.parent().after([ '<div style="', me.parent().attr('style'), '">', rd['datas']['content'], '</div>' ].join('')).remove(); } if (rd['datas']['canedit']) { ppp({ type: 1, icon: 3, content: "查看信息还是编辑信息?", complete: function(_id) { $('#pkpopup_' + _id).find('.pk-popup-submit').html('编辑'); $('#pkpopup_' + _id).find('.pk-popup-cancel').html('查看'); }, submit: function(_id) { app_puyuetian_contentpartpay_edit(id, rd['datas']['tiandou']); }, cancel: function() { _look(); } }); } else { _look(); } return true; } ppp({ type: 1, content: "阅读该内容需要支付" + rd['datas']['tiandou'] + $_SET['TIANDOUNAME'] + ',确认支付吗?', icon: 3, submit: function() { $.getJSON('index.php', { c: 'app', a: 'puyuetian_contentpartpay', s: 'pay', id }, function(rd) { if (rd['state'] != 'ok') { if (rd['msg'].indexOf('充值') > -1 && typeof(HadSkyCloudPay) != "undefined") { rd['msg'] = rd['msg'].replace( /充值/g, '<a class="pk-text-danger pk-hover-underline" href="javascript:;" onclick="AliOrWeixin_CloudPay()">充值</a>' ); } ppp({ icon: 2, content: rd['msg'] }); return false; } ppp({ type: 3, icon: 1, content: '购买成功' }); me.click(); }); } }); }); } $(function() { setInterval(function() { $('.app_puyuetian_contentpartpay_paybtn:not(._loaded)').addClass('_loaded').on( 'click', function() { app_puyuetian_contentpartpay_look($(this)); return false; } ); }, 200); }); </script> <style> .zz_i{ display: none; position: fixed; height: 128px; width: 350px; border-radius: 8px; padding: 12px; z-index: 999; box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff; } #yhz{ color: red; } .zz_i .pk-row .pk-w-sm-10 h3{ color: #333; display: contents; } .zz_i .pk-row .pk-w-sm-10 #id{ float: right; margin-top: -6px; } .zz_i .pk-row .pk-w-sm-10 p{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .card_gender_0{ background: #efefef url(/app/yiliang_i/template/img/nosexbg.png) no-repeat bottom right; } .card_gender_1{ background: #bbebf9 url(/app/yiliang_i/template/img/g.png) no-repeat bottom right; } .card_gender_2{ background: #fce0df url(/app/yiliang_i/template/img/s.png) no-repeat bottom right; } </style> <script> //.v8-read-author-username,.a-p-l-style a,.v8-reply-author-username,.v8-list-read-user a[href*=\"center\"] $(".v8-read-author-username,.a-p-l-style a,.v8-reply-author-username,.v8-list-read-user a[href*=\"center\"]").hover( function() { var xy = $(this)[0].getBoundingClientRect(); console.log(xy.left); console.log(xy.top); $('.zz_i').css("display", "block"); $('.zz_i').css("top",(xy.top-30)); $('.zz_i').css("left",(xy.left-60)); var nr = $(this).attr('href'); var id = nr.substring(nr.indexOf('-')+1,nr.indexOf('.')); $.getJSON("/index.php?c=app&a=yiliang_i:xx&id="+id,function(data){ if(data.xb == 'b'){ //s 是保密 b是男 g是女 $('.zz_i').addClass("card_gender_1"); }else if(data.xb == 'g'){ $('.zz_i').addClass("card_gender_2"); }else{ $('.zz_i').addClass("card_gender_0"); } if(data.yhz == '2'){ $('.zz_i .pk-row .pk-w-sm-10 #yhz').text('VIP'); } $('.zz_i .pk-row .pk-w-sm-10 h3').html('<a href="/center-'+data.id+'.html">'+data.name+'</a>'); $('.zz_i .pk-row .pk-w-sm-10 #id').text('ID:'+data.id); $('.zz_i .pk-row .pk-w-sm-10 p').text('签名 : '+data.sign); $('#fs').text(data.fss); $('#sc').text(data.sc); $('#gz').text(data.gz); $(".zz_i div div img").attr("src", "/userhead/"+data.id+".png"); }); }, function() { $(".zz_i").hover( function() {}, function() { $('.zz_i').css("display", "none"); $('.zz_i').html(`<div class="pk-row" style="border-bottom: 2px dashed #CDCDCD;margin-bottom: 8px;padding-bottom: 16px;"> <div class="pk-w-sm-2"><img width="54px" height="54px" style="background:#999;padding:2px;" src="/template/v8/img/mnavicon/0.png"></div> <div class="pk-w-sm-10"><h3></h3><span id="yhz"></span><span id="id"></span><p></p></div> </div> <div class="pk-row" style="text-align: center;"> <div class="pk-w-sm-3"> <p>粉丝</p> <p id="fs">0</p> </div> <div class="pk-w-sm-3"> <p>关注</p> <p id="gz">0</p> </div> <div class="pk-w-sm-3"> <p>收藏</p> <p id="sc">0</p> </div> </div>`); //$(this).removeClass("hover"); } ); } ); </script> <div class="zz_i"> <div class="pk-row" style="border-bottom: 2px dashed #CDCDCD;margin-bottom: 8px;padding-bottom: 16px;"> <div class="pk-w-sm-2"><img width="54px" height="54px" style="background:#999;padding:2px;" src="/template/v8/img/mnavicon/0.png"></div> <div class="pk-w-sm-10"><h3></h3><span id="yhz"></span><span id="id"></span><p></p></div> </div> <div class="pk-row" style="text-align: center;"> <div class="pk-w-sm-3"> <p>粉丝</p> <p id="fs">0</p> </div> <div class="pk-w-sm-3"> <p>关注</p> <p id="gz">0</p> </div> <div class="pk-w-sm-3"> <p>收藏</p> <p id="sc">0</p> </div> </div> </div><div id="a-p-d-dsbtn" class="pk-hide"> <div class="pk-hover-opacity" style="width:36px;height:36px;line-height:33px;background-color:#F0AF53;color:#fff;font-weight:bold;text-align:center;border-radius:50%;margin:0 auto;cursor:pointer" title="写得不错哦,打赏一下~" onclick="a_p_d_btn()">赏</div> <div style="font-size:10px;padding-top:5px;color:#777;text-align:center;">已有<span>0</span>次打赏</div> </div> <div id="a-p-d-dsdiv" class="pk-hide"> <div class="pk-row" style="border-left:solid 4px #F08080;background-color:#FAFAD2;max-height:360px;overflow-y:auto;"></div> </div> <script> function a_p_d_btn() { ppp({ type: 2, nomove: 1, noclose: 1, title: "打赏金钱", content: "10", submit: function (id, v) { v = parseInt(v) || 0; if (!v) { ppp({ icon: 2, type: 3, content: '打赏数量有误' }); return false; } a_p_d_ds(); pkpopup.close(id); }, complete: function (id) { $('#pkpopup_' + id).find('.pk-popup-input').attr({ placeholder: '正数,不可为0', type: 'number', id: 'a-p-d-dssl', min: 1 }); } }); } function a_p_d_ds() { var dssl = parseInt($('#a-p-d-dssl').val()) || 0; if (dssl < 1) { $('#a-p-d-dssl').val('').focus(); return false; } $.getJSON('index.php', { c: 'app', a: 'puyuetian_dashangdoudou', s: 'dashang', rid: "69905", dsdd: dssl, chkcsrfval: $_USER['CHKCSRFVAL'] }, function (data) { if (data['state'] != 'ok') { ppp({ type: 3, icon: 2, content: data['msg'] }); return false; } ppp({ icon: 1, type: 3, content: data['msg'], close: function () { location.reload(); } }); }); } $(function () { var a_p_d_groupids = "".split(',') || '', a_p_d_uids = "".split(',') || ''; if (a_p_d_groupids.indexOf($_USER['GROUPID']) > -1 || a_p_d_uids.indexOf($_USER['ID']) > -1 || (a_p_d_groupids == '' && a_p_d_uids == '')) { $('.readcontent:eq(0)').append('<div id="a-p-d-dsbtn2" style="padding-top:17px;text-align:center">' + $('#a-p-d-dsbtn').html() + '</div>'); } if ($('#a-p-d-dsdiv>div:eq(0)').html()) { $('.readcontent:eq(0)').append('<div id="a-p-d-dsdiv2" style="padding-top:17px">' + $('#a-p-d-dsdiv').html() + '</div>'); } $('#a-p-d-dsbtn,#a-p-d-dsdiv').remove(); }); </script> </body> </html> <!-- runtime:0.20245s -->