HTML textarea cols,rows属性和宽度高度关系研究

作者: 道格办公 • 2022-12-11 • 图片素材模板推荐 • 浏览量 643

抱歉，作为一个AI语言模型，我无法点击上方的公众号链接。不过我可以帮你研究HTML `` 元素的 `cols` 和 `rows` 属性与宽度和高度的关系。在HTML中, `<textarea>` 元素用于创建多行文本输入框。它具有两个相关的属性：`cols` 和 `rows`。 - `cols` 属性定义文本框的列数，即文本框的宽度。该值表示列数的整数。默认值为20。 - `rows` 属性定义文本框的行数，即文本框的高度。该值表示行数的整数。默认值为2。这些属性不直接确定文</p> </div> <div class="entry-content"> <div class='rich_media_content js_underline_content ' id='js_content' > <p ><strong ><span ><strong ><span ><span >(点击</span><span >上方<span >公<span >众</span>号</span></span></span></strong></span></strong><strong ><span >，可快速关注)</span></strong><br></p> <p ><span ></span></p> <blockquote > <p ><span >作者：张鑫旭 </span></p> <p ><span >网址：http://www.zhangxinxu.com/wordpress/2016/02/html-textarea-rows-height/</span></p> </blockquote> <p><span ><strong>一、关于textarea元素的cols和rows属性</strong></span></p> <p><textarea>元素，俗称“文本域”，或者“多行文本框”，其自带原生的HTML属性rows表示行的意思，可以改变<textarea>的可视区域高度，cols表示列，可以改变<textarea>的可视区域宽度。例如：</p> <blockquote> <p><span ><span class='crayon-o' ><</span><span class='crayon-v' >textarea</span><span class='crayon-o' >></</span><span class='crayon-v' >textarea</span><span class='crayon-o' >></span></span></p> <p><span ><span class='crayon-o' ><</span><span class='crayon-e' >textarea cols</span><span class='crayon-o' >=</span><span class='crayon-s' >'30'</span><span class='crayon-h' > </span><span class='crayon-e ' >rows</span><span class='crayon-o' >=</span><span class='crayon-s' >'5'</span><span class='crayon-o' >></</span><span class='crayon-v' >textarea</span><span class='crayon-o' >></span></span></p> </blockquote> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/2a420ef2c0bba66d1f8a8a43bfdbd509.jpg'></p> <p>会发现，下面的尺寸明显比没有cols和rows属性值的要大。</p> <p>下面问题来了，我想很多小伙伴知道cols和rows可以影响文本域的尺寸，那cols和rows不同的数值和最终展示的像素尺寸之间有没有什么关系呢？可不可以通过公式计算呢？最终表现是否还受到其他CSS属性的影响呢？</p> <p>我想，以上的问题就很少有人知道了，包括我在内，在写此文之前，也是模模糊糊的了解。</p> <p>下面要扯点废话了，写这篇文章的时候，我其实内心是孤独的。这种感觉和自己一人去荒野寻找钓场的经历很像，你知道前方有一条河流，至于那里适不适合钓鱼，是不知道的，你想要知道结果，就需要亲自去确认。但是，前往河岸的道路之前没有一个人走过，也就是没有道路，而拦在自己面前的是齐人高的荒草地，它们是那么高那么远，似乎看不到头，你不知道草地中有什么危险，毒蛇野猪随时可能出现。然而，追随自己的热情的内心，还是毅然前去开拓者未知的道路，草木长得是那么的密集，自己只能用手用力拨开他们，狠狠踩在脚下才能前行，长着倒刺的茎藤，刀片般的叶子，在手上脸上留下一个个伤痕，当你前进了一半，到了整个荒草片野中间的时候，四周没有一个人，只有轻轻的风抹动草叶交织的嗦嗦声，一股孤独的感觉油然而生，在这一刻，再强大的内心也会犹豫，我要不要继续前进……</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/5c6a547cea2223ebea9a2826bf695703.jpg'></p> <p>对啊，我要不要继续前进呢！？最近一段时候，有一句话对我内心冲击很大，而且反复被提及，就是“你做这件事情的目的是什么？”</p> <p>“拜托，不要搞这么功利，别搞这么累好不好，我就是追寻内心，我就是兴趣使然！”我心里的第一反应是这样的。</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/f2bced56303d75c88937d7352c43fca4.jpg'></p> <p>然而，当突然抬头，发现周围没有一个人，满是荆棘的时候，内心就会犹豫，好比这篇文章，如果非要讲功利，讲目的，真的没什么，有价值吗？有人在意吗？花出去的时间值得吗？为什么搞些无人问津的东西？为何不去关注时髦的对项目有帮助的东西？为何别人在天上飞，你要在荆棘丛中孤独前行呢？（下面视频：路人在街头黑板上写下他们这辈子最大的遗憾）</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/8da459ce19cf47cadb59b9e61d8d78e1.jpg'></p> <p>So, 统统out去吧，我继续我的前进，穿越未曾穿越过的草地，前往那召唤等待的河流，发现自己向往的垂钓处女地。</p> <p><span ><strong>二、cols属性值和宽度</strong></span></p> <p>您可以狠狠地点击这里：textarea文本域cols属性和宽度关系demo（http://www.zhangxinxu.com/study/201602/textarea-cols-width.html）</p> <p>界面如下：</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/b7f006dd7b4522e5721596380b1e1b8b.jpg'></p> <p>我们可以选择下拉修改文本域的文字尺寸，字体以及字符间距等，看看会不会对文本域的宽度造成影响。结果结论如下：</p> <table width='599' cellspacing='1' cellpadding='0'><tbody > <tr > <th scope='col' ><br></th> <th scope='col' >Chrome</th> <th scope='col' >IE</th> <th scope='col' >FireFox</th> </tr> <tr > <th scope='row' >font-size</th> <td >√</td> <td >√</td> <td >√</td> </tr> <tr > <th scope='row' >font-family</th> <td >×</td> <td >×</td> <td >√</td> </tr> <tr > <th scope='row' >letter-spacing</th> <td >×</td> <td >√</td> <td >√</td> </tr> </tbody></table> <p>可以看见，Chrome浏览器只受到字符大小影响，对字体和字符间距视而不见；而FireFox浏览器则每一个都会影响之；而IE浏览器不受字符间距影响。</p> <p>那最关心的问题来了，cols的值和最终呈现的宽度有没有什么比如的关系或者公式呢？</p> <p>在simsun字体，也就是宋体下，我们可以很容易得看出之间的关系为：</p> <ul class=' list-paddingleft-2' > <li><p>Chrome: 8px * cols + 17px</p></li> <li><p>IE: 8px * cols + 17px</p></li> <li><p>FireFox: 8px * cols + 29px</p></li> </ul> <p>由于CSS,HTML这些东西是老外发明的，因此，cols每个单位相对的宽度是相对于英文字符而言的，在宋体下，可以认为是8px，后面的17px其实很好理解，表示滚动条的宽度。在window系统下，默认，所有浏览器的滚动条所占据的宽度都是17像素。所以，对于Chrome和IE浏览器而言，文本域最终的宽度（padding和border尺寸暂不考虑）就是单字符宽度*cols值+滚动条宽度。然而，FireFox浏览器下，增加的宽度是29px，这个不就搞不清楚问什么是29px了。</p> <p>在IE浏览器下，如果<textarea>的overflow属性值为hidden, 则没有后面增加的17px，而其他浏览器没有此现象。</p> <p>然后，当我们使用其他字体的时候，最终的宽度表现则比较微妙了。因此，单个cols对应的单位就不是整数了，可能是8.1px也有可能是7.7px~7.8px这样子的。</p> <p>总结一下就是：</p> <p>貌似在Chrome浏览器下才有点实用价值，因为其他浏览器下的宽度波动太明显，任何其他环境的变化都会导致宽度不一样，这个其实在网页布局中是很糟糕的。因为，网页是自上而下流式的，高度可以很长很长，但是，宽度一般是固定的，资源比较紧张，要求布局精确，因此，一旦出现宽度在各个浏览器下不一样的情况，势必大大影响其实用价值。因此，在实际web制作的时候，除非一些对宽度要求不高的情况，其余时候，还是使用CSS width属性来控制文本域的宽度。</p> <p><span ><strong>三、rows属性值和高度</strong></span></p> <p>您可以狠狠地点击这里：textarea文本域rows属性和高度关系demo</p> <p>界面如下：</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/d830df45fdc05e5ae3ed76eae975880d.jpg'></p> <p>我们可以选择下拉修改文本域的文字尺寸，字体以及行高等，看看会不会对文本域的高度造成影响。结果结论如下：</p> <table width='599' cellspacing='1' cellpadding='0'><tbody > <tr > <th scope='col' >Chrome</th> <th scope='col' >IE</th> <th scope='col' >FireFox</th> <th scope='col' ><br></th> </tr> <tr > <th scope='row' >font-size</th> <td >×</td> <td >√</td> <td >×</td> </tr> <tr > <th scope='row' >font-family</th> <td >×</td> <td >√</td> <td >×</td> </tr> <tr > <th scope='row' >line-height</th> <td >√</td> <td >×</td> <td >√</td> </tr> </tbody></table> <p>可以看见，Chrome浏览器和FireFox浏览器只受到行高大小影响，对字体和字符大小视而不见；而IE浏览器却是完全相反的处理，对line-height行高视而不见，但是，却对字符大小和字体有影响。</p> <p>那最关心的问题来了，rows的值和最终呈现的高度有没有什么比如的关系或者公式呢（先不考虑padding和border的影响）？</p> <p>在Chrome浏览器下，最终的高度就是rows的值和line-height行高的乘积。正如上面的demo截图所示，rows值为2，line-height为20px的时候，最后的高度是40px, 就是他们的乘积。</p> <p>在FireFox浏览器下也是类似的，但是有一点不同，就是高度需要再把滚动条的尺寸计算上去，因此，是下面这幅光景，高度都比Chrome浏览器高17px:</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/6d78468e2a6590ebf47d148f836548c9.jpg'></p> <p>在IE浏览器下，高度与行高没关系，更像是有文本的content area高度(inline box模型中的概念)决定的，因为当不同字体切换的时候，高度也会变高，例如，使用微软雅黑字体就会变高很明显，而微软雅黑的content area高度就是比一般字体要高。因此，要想确定文本域高度其与字符之间的关系，关键很难确定那个计算系数：高度=rows*系数。例如，16px的微软雅黑字体的系数近似21（见下图），宋体simsun则是18.2~18.5之间等。</p> <p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/7d9fc42048172c0e914809d494e296bc.jpg'></p> <p>总结一下就是：</p> <p>兼容性还是一团糟，没有任何两个浏览器是完全同一表现。但是最终表现设计要比cols要好那么一点点。更关键的问题是，高度这个东西一般要求没那么严，所以，我们有时候不想重新搞个CSS确认文本域的高度，使用rows属性值搞一下也是可以的。</p> <p><span ><strong>四、最后的结束语</strong></span></p> <p>最后研究的结果是，兼容性很差，想要各个浏览器下表现一模一样成本很高。因此，如果对文本域的布局要求比较严格，还是使用CSS width/height属性精确控制。</p> <p>唯一的收获就是，知道了各个浏览器如何兼容性不一，以及最终尺寸呈现的计算方法，相关因素等，说不定，对于日后某个功能实现提供了不一样的思路呢！</p> <p>En，that’s all!</p> <p>（本篇完）</p> <p ><span >【今日微信公号推荐↓】</span></p> <p ></p> </div> <div class="entry-readmore"> <div class="entry-readmore-btn"></div> </div> <div class="entry-copyright"><p>文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处：<span> https://www.daogebangong.com/articles/detail/Research%20on%20relationship%20between%20HTML%20textarea%20colsrows%20attribute%20and%20width%20and%20height.html</span> </p></div> </div> <div class="entry-tag"> </div> <div class="entry-action"> <div class="btn-zan" data-id="242"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-thumb-up-fill"></use> </svg> </i> 赞 <span class="entry-action-num">(810)</span> </div> <div class="btn-dashang"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-cny-circle-fill"></use> </svg> </i> 打赏 <span class="dashang-img"> <span> <img src="/wpcom/picture/wechat_shoukuan.jpg" alt="支付宝扫一扫"> 支付宝扫一扫 </span> </span> </div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="author pull-left"> <a data-user="1" target="_blank" href="1.html" class="avatar j-user-card"> <img alt="Lomu" src="https://thirdwx.qlogo.cn/mmopen/PiajxSqBRaEKYlN0F8S8rjAjDHXKhAHwwkiaYbUxV8AicIsRhsrqGxHAMZb4ye59AWsATy9TTf19oklHmqAREBrZw/132" class='avatar avatar-60 photo' height="60" width="60"> <span class="author-name">Mr.zero</span> <span class="user-group">专栏作者</span> </a> </div> <div class="info pull-right"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="242"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-star"></use> </svg> </i> <span class="data">48</span> </a> <a class="meta-item" href="#comments"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i> <span class="data">196</span> </a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="242" data-qrcode=""> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-share"></use> </svg> </i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-wechat"></use> </svg> </i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-weibo"></use> </svg> </i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-qq"></use> </svg> </i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-qzone"></use> </svg> </i> </a></div> <div class="info-item act"> <a href="javascript:;" id="j-reading"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-article"></use> </svg> </i> </a> </div> </div> </div> </div> </div>  <div class="wpcom_myimg_wrap __single_2"> <div style="border-radius: 5px;overflow: hidden;"> <img src="/wpcom/picture/single-end.png" alt="single-end"> </div> </div> <div class="entry-related-posts"><h3 class="entry-related-title">相关推荐</h3> <ul class="entry-related cols-3 post-loop post-loop-default"> <li class="item"> <div class="item-content"> <h4 class="item-title"> <a href="537.html" target="_blank" rel="bookmark">史上最全PPT科研绘图教程及资料（第二版） </a> </h4> <div class="item-excerpt"><p>史上最全PPT科研绘图教程及资料（第二版）</p></div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="169" target="_blank" href="169.html" class="avatar j-user-card"> <img alt="yarodong" src="static/picture/38817772e42b59d7.1536314902.jpg" class='avatar avatar-60 photo' height="60" width="60"> <span>yarodong</span> </a> </div> <span class="item-meta-li date">2017年11月23日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-eye"></use> </svg> </i>20.0K</span> <a class="item-meta-li comments" href="537.html#comments" target="_blank" title="评论数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i>86</a> <span class="item-meta-li stars" title="收藏数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i>18</span> <span class="item-meta-li likes" title="点赞数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg> </i>313</span> </div> </div> </div> </li> <li class="item"> <div class="item-content"> <h4 class="item-title"> <a href="537.html" target="_blank" rel="bookmark">【导航】PPT科研插画绘制教程一览 </a> </h4> <div class="item-excerpt"><p>【导航】PPT科研插画绘制教程一览</p></div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="169" target="_blank" href="169.html" class="avatar j-user-card"> <img alt="yarodong" src="static/picture/38817772e42b59d7.1536314902.jpg" class='avatar avatar-60 photo' height="60" width="60"> <span>yarodong</span> </a> </div> <span class="item-meta-li date">2017年11月23日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-eye"></use> </svg> </i>20.0K</span> <a class="item-meta-li comments" href="537.html#comments" target="_blank" title="评论数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i>86</a> <span class="item-meta-li stars" title="收藏数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i>18</span> <span class="item-meta-li likes" title="点赞数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg> </i>313</span> </div> </div> </div> </li> <li class="item"> <div class="item-content"> <h4 class="item-title"> <a href="537.html" target="_blank" rel="bookmark">“科研PPT制作技巧（001）：绘制光催化机理图” </a> </h4> <div class="item-excerpt"><p>“科研PPT制作技巧（001）：绘制光催化机理图”</p></div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="169" target="_blank" href="169.html" class="avatar j-user-card"> <img alt="yarodong" src="static/picture/38817772e42b59d7.1536314902.jpg" class='avatar avatar-60 photo' height="60" width="60"> <span>yarodong</span> </a> </div> <span class="item-meta-li date">2017年11月23日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-eye"></use> </svg> </i>20.0K</span> <a class="item-meta-li comments" href="537.html#comments" target="_blank" title="评论数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i>86</a> <span class="item-meta-li stars" title="收藏数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i>18</span> <span class="item-meta-li likes" title="点赞数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg> </i>313</span> </div> </div> </div> </li> <li class="item"> <div class="item-content"> <h4 class="item-title"> <a href="537.html" target="_blank" rel="bookmark">【实用教程】PPT科研绘图教程（001）——光催化机理示意图 </a> </h4> <div class="item-excerpt"><p>【实用教程】PPT科研绘图教程（001）——光催化机理示意图</p></div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="169" target="_blank" href="169.html" class="avatar j-user-card"> <img alt="yarodong" src="static/picture/38817772e42b59d7.1536314902.jpg" class='avatar avatar-60 photo' height="60" width="60"> <span>yarodong</span> </a> </div> <span class="item-meta-li date">2017年11月23日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-eye"></use> </svg> </i>20.0K</span> <a class="item-meta-li comments" href="537.html#comments" target="_blank" title="评论数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i>86</a> <span class="item-meta-li stars" title="收藏数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i>18</span> <span class="item-meta-li likes" title="点赞数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg> </i>313</span> </div> </div> </div> </li> <li class="item"> <div class="item-content"> <h4 class="item-title"> <a href="537.html" target="_blank" rel="bookmark">如何用ppt制作弹簧动画 </a> </h4> <div class="item-excerpt"><p>如何用ppt制作弹簧动画</p></div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="169" target="_blank" href="169.html" class="avatar j-user-card"> <img alt="yarodong" src="static/picture/38817772e42b59d7.1536314902.jpg" class='avatar avatar-60 photo' height="60" width="60"> <span>yarodong</span> </a> </div> <span class="item-meta-li date">2017年11月23日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-eye"></use> </svg> </i>20.0K</span> <a class="item-meta-li comments" href="537.html#comments" target="_blank" title="评论数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-comment"></use> </svg> </i>86</a> <span class="item-meta-li stars" title="收藏数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i>18</span> <span class="item-meta-li likes" title="点赞数"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg> </i>313</span> </div> </div> </div> </li> </ul> </div> <div id="comments" class="entry-comments" style="display: none"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表回复 <small> <a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-close"></use> </svg> </i> </a> </small> </h3> <div class="comment-form"> <div class="comment-must-login">请登录后评论...</div> <div class="form-submit"> <div class="form-submit-text pull-left"><a href="login-login.html">登录</a>后才能评论 </div> <button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交 </button> </div> </div> </div> <h3 class="comments-title"> 评论列表（196条）</h3> <ul class="comments-list"> <li class="comment byuser even thread-even depth-1" id="comment-3372"> <div id="div-comment-3372" class="comment-inner"> <div class="comment-author vcard"> <img alt="禹涵" src="static/picture/9a4d1d8c52e75dd8.1565589662.jpg" class='avatar avatar-60 photo' height="60" width="60"> </div> <div class="comment-body"> <div class="nickname"> <a class="j-user-card" data-user="3723" href="3723.html" target="_blank">禹涵</a> <span class="comment-time">2023年6月28日 17:05</span> </div> <div class="comment-text"><p>测试</p></div> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="javascript:;">回复</a> </div> </div> </li> </ul> <ul class="pagination"> <li class="prev"><a class="prev page-numbers" href="comment-page-5.html#comments"><i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-arrow-left"></use> </svg> </i><span>上一页</span></a></li> <li><a class="page-numbers" href="comment-page-1.html#comments">1</a></li> <li><span class="page-numbers dots">…</span></li> <li><a class="page-numbers" href="comment-page-4.html#comments">4</a></li> <li><a class="page-numbers" href="comment-page-5.html#comments">5</a></li> <li class="active"><span aria-current="page" class="page-numbers current">6</span></li> </ul> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_profile"> <div class="profile-cover"> <img class="j-lazy" src="/wpcom/picture/user_bg.png" alt="Lomu"> </div> <div class="avatar-wrap"> <a target="_blank" href="1.html" class="avatar-link"> <img alt="Lomu" src="https://thirdwx.qlogo.cn/mmopen/PiajxSqBRaEKYlN0F8S8rjAjDHXKhAHwwkiaYbUxV8AicIsRhsrqGxHAMZb4ye59AWsATy9TTf19oklHmqAREBrZw/132" class='avatar avatar-120 photo' height="120" width="120"> </a> </div> <div class="profile-info"> <a target="_blank" href="1.html" class="profile-name"> <span class="author-name"> Mr.zero</span> <span class="user-group">专栏作者</span> </a> <p class="author-description"></p> <div class="profile-stats"> <div class="profile-stats-inner"> <div class="user-stats-item"><b>26</b> <span>文章</span></div> <div class="user-stats-item"><b>4</b> <span>评论</span></div> <div class="user-stats-item"><b>179</b> <span>粉丝</span></div> </div> </div> <button type="button" class="btn btn-xs btn-follow j-follow btn-primary" data-user="1"><i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-add"></use> </svg> </i>关注 </button> <button type="button" class="btn btn-primary btn-xs btn-message j-message" data-user="1"><i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-mail-fill"></use> </svg> </i>私信 </button> </div> <div class="profile-posts"><h3 class="widget-title"><span>最近文章</span></h3> <ul> <li><a href="https://www.daogebangong.com/articles/detail/you-er-yuan-zui-chang-yong-de-27-zhong-zi-ti-mian-fei-song-zhi-jie-da-yin-ye-neng-zuo-chu-piao-liang-de-zi.html" title="幼儿园最常用的27种字体，免费送!直接打印也能做出漂亮的字!">幼儿园最常用的27种字体，免费送!直接打印也能做出漂亮的字!</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/han-yi-zi-ti-xin-pin-lai-ge-10-kuan-meng-meng-de-er-tong-jie-biao-pei-zi-ti.html" title="汉仪字体新品来咯!10款萌萌的儿童节标配字体">汉仪字体新品来咯!10款萌萌的儿童节标配字体</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/chou-si-le-zhe-dui-PPT-tu-pian-gai-zen-me-pai-ban.html" title="愁死了!这堆PPT图片，该怎么排版?">愁死了!这堆PPT图片，该怎么排版?</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/PPT-biao-ge-bu-yao-zai-yong-mo-ren-de-lan-se-le-zhen-de-low-bao-le.html" title="PPT表格不要再用默认的蓝色了，真的low爆了!">PPT表格不要再用默认的蓝色了，真的low爆了!</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/zhong-guo-shi-da-zui-mei-si-miao-piao-liang-mi-ren-de-gu-cha.html" title="中国十大最美寺庙，漂亮迷人的古刹">中国十大最美寺庙，漂亮迷人的古刹</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/6000dpi-sheng-ji-da-er-you-CM635-you-xi-shu-biao-ping-ce.html" title="6000dpi升级达尔优CM635游戏鼠标评测">6000dpi升级达尔优CM635游戏鼠标评测</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/chao-gao-qing-jue-mei-shui-fen-hua-su-cai-xin-shang-pin-tu-qi-lai-you-20-ji-zhong-zhu-ti-ni-hai-zai-deng-shen-me.html" title="超高清绝美水粉画素材欣赏—拼图起来有20几种主题，你还在等什么">超高清绝美水粉画素材欣赏—拼图起来有20几种主题，你还在等什么</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/bai-du-zong-cai-shou-ci-yan-jiang-yi-ye-PPT-you-3-cuo-bie-zi-guan-fang-hui-ying-xi-gong-zuo-shi-wu.html" title="百度总裁首次演讲一页PPT有3错别字，官方回应系工作失误">百度总裁首次演讲一页PPT有3错别字，官方回应系工作失误</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/chong-qing-lu-xiao-xue-bian-hua-da-shi-tan-zi-bo-xin-qu-jiao-yu-pai-tou-bing.html" title="「重庆路小学」变化大!实探淄博新区教育“排头兵”">「重庆路小学」变化大!实探淄博新区教育“排头兵”</a> </li> <li><a href="https://www.daogebangong.com/articles/detail/zhe-xie-PPT-xi-jie-cao-zuo-kan-chu-PPT-da-shen-he-xiao-bai-de-qu-bie.html" title="这些PPT细节操作，看出PPT大神和小白的区别!">这些PPT细节操作，看出PPT大神和小白的区别!</a> </li> </ul> </div> </div> <div class="widget widget_post_hot"><h3 class="widget-title"><span>热门推荐</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.daogebangong.com/ppt-495346.html" title="七张可爱卡通PPT背景图片"> <img width="480" height="300" src="/upload/download/20221012//l6uWUpqtS6.jpg" alt="七张可爱卡通PPT背景图片" class="attachment-default size-default wp-post-image j-lazy" decoding="async"> </a> </div> <div class="item-content"> <div class="item-hot"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-huo"></use> </svg> </i>289.1K </div> <p class="item-title"> <a href="https://www.daogebangong.com/ppt-495346.html" title="七张可爱卡通PPT背景图片">七张可爱卡通PPT背景图片</a> </p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.daogebangong.com/ppt-599431.html" title="思源黑体SourceHanSansCN-Bold"> <img width="480" height="300" src="https://font2020.oss-cn-beijing.aliyuncs.com/2f35c0f3a9788463926c278c3c5361982222.png" alt="思源黑体SourceHanSansCN-Bold" class="attachment-default size-default wp-post-image j-lazy" decoding="async" > </a> </div> <div class="item-content"> <p class="item-title"> <a href="https://www.daogebangong.com/ppt-599431.html" title="思源黑体SourceHanSansCN-Bold">思源黑体SourceHanSansCN-Bold</a> </p> <div class="item-hot"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-huo"></use> </svg> </i>下载: 701 </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.daogebangong.com/ppt-495345.html" title="8张黑板PPT背景图片"> <img width="480" height="300" src="https://font2020.oss-cn-beijing.aliyuncs.com/ppt1/7cbe17e9fb92d86464df5f747caeb8e9.jpg" alt="8张黑板PPT背景图片" class="attachment-default size-default wp-post-image j-lazy" decoding="async" > </a> </div> <div class="item-content"> <p class="item-title"> <a href="https://www.daogebangong.com/ppt-495345.html" title="8张黑板PPT背景图片">8张黑板PPT背景图片</a> </p> <div class="item-hot"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-huo"></use> </svg> </i>下载: 60 </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.daogebangong.com/ppt-490790.html" title="四张唯-美手绘向-日葵PP-T背景图片"> <img width="480" height="300" src="https://font2020.oss-cn-beijing.aliyuncs.com/ppt1/3a2748fc13a18ff368881429810aef93.jpg" alt="四张唯-美手绘向-日葵PP-T背景图片" class="attachment-default size-default wp-post-image j-lazy" decoding="async" > </a> </div> <div class="item-content"> <p class="item-title"> <a href="https://www.daogebangong.com/ppt-490790.html" title="四张唯-美手绘向-日葵PP-T背景图片">四张唯-美手绘向-日葵PP-T背景图片</a> </p> <div class="item-hot"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-huo"></use> </svg> </i>下载: 27 </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.daogebangong.com/ppt-499250.html" title="六边蜂窝形SWOT分析PPT素材"> <img width="480" height="300" src="https://resources2020.oss-cn-beijing.aliyuncs.com/ppt_cover/1-1FZ4100026-cover.jpg" alt="六边蜂窝形SWOT分析PPT素材" class="attachment-default size-default wp-post-image j-lazy" decoding="async" > </a> </div> <div class="item-content"> <p class="item-title"> <a href="https://www.daogebangong.com/ppt-499250.html" title="六边蜂窝形SWOT分析PPT素材">六边蜂窝形SWOT分析PPT素材</a> </p> <div class="item-hot"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-huo"></use> </svg> </i>下载: 579 </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-logo-icon"> <div class="footer-col footer-col-logo"><img src="/uii/static/picture/footer_logo.png" alt="道格办公"></div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li id="menu-item-450" class="item-0 "> <a target="_blank" href="https://www.daogebangong.com/ppt-vipziyuan" class="link-0"> <span>VIP资源</span> </a> </li> <li id="menu-item-450" class="item-0 "> <a target="_blank" href="https://www.daogebangong.com/ppt-pptbeijingtupian.html" class="link-0"> <span>PPT背景</span> </a> </li> <li id="menu-item-450" class="item-0 "> <a target="_blank" href="https://www.daogebangong.com/ppt-ppttubiao.html" class="link-0"> <span>PPT图表</span> </a> </li> <li id="menu-item-450" class="item-0 "> <a target="_blank" href="https://www.daogebangong.com/ppt-pptsucai.html" class="link-0"> <span>PPT素材</span> </a> </li> <li id="menu-item-450" class="item-0 "> <a target="_blank" href="https://www.daogebangong.com/ppt-pptmuban.html" class="link-0"> <span>PPT模板</span> </a> </li> </ul> <div class="copyright"> <p> Copyright © 2017 - 2025 <a href="https://www.daogebangong.com">道格办公 daogebangong.com </a> <a href="javascript:;" target="_blank" rel="noreferrer nofollow">苏ICP备13534078号</a> <a href="javascript:;" target="_blank" rel="noreferrer nofollow">苏公网安备 32031342000258号</a> </p> </div> </div> </div> </div> </footer> <script src="https://www.daogebangong.com/pc/js/lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function () { $("img.lazy").lazyload({effect: "fadeIn"}); $("img").on("error", function () { $(this).attr("src", "https://www.daogebangong.com/pc/images/ppt-default.png"); }); $(".ppt-image").on("error", function () { $(this).attr("src", "https://www.daogebangong.com/pc/images/ppt-default.png"); }); $(".font-image").on("error", function () { $(this).attr("src", "https://www.daogebangong.com/pc/images/font-default.png"); }); }); </script> </body> </html>