Research on relationship between HTML textarea cols,rows attribute and width and height

Author: daogeziyuan • 2022-12-11 • Picture material template recommendation • Views 655

Sorry, as an AI language model, I cannot click on the official account link above. But I can help you study the relationship between the `cols` and `rows` attributes of the HTML `` element and the width and height. In HTML, the `<textarea>` elem</p> </div> <div class="entry-content"> <div class='rich_media_content js_underline_content' id='js_content' ><p ><strong ><span ><strong ><span ><span >(click</span><span >top <span >public <span >public </span>number</span></span></span></strong></span></strong><strong><span >, you can quickly follow)</span></strong><br ></p><p ><span ></span></p><blockquote ><p ><span >Author: Zhang Xinxu </span></p><p ><span >URL: http://www.zhangxinxu.com/wordpress/2016/02/html-textarea-rows-height/</span></p></blockquote><p><span ><strong>1. About the cols and rows attributes of the textarea element</strong></span></p><p>The <textarea> element, commonly known as "text field" or "multi-line text box", has its own native HTML attribute rows to represent rows, which can change the height of the visual area of <textarea>, and cols to represent columns. Change the width of the visible area of <textarea>. For example:</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>It will be found that the size below is obviously larger than that without cols and rows attribute values.</p><p>Here comes the following question. I think many friends know that cols and rows can affect the size of the text field. Is there any relationship between the different values of cols and rows and the final pixel size displayed? Can it be calculated by formula? Is the final performance affected by other CSS properties?</p><p>I think that few people know about the above problems, including me, before writing this article, I also had a vague understanding.</p><p>Now I’m going to talk nonsense. When I write this article, I am actually lonely in my heart. This feeling is very similar to the experience of going to the wilderness alone to find a fishing ground. You know there is a river ahead, but you don’t know whether it is suitable for fishing there. If you want to know the result, you need to confirm it yourself. However, no one has passed before the road to the river bank, that is to say, there is no road, and what stands in front of you is a barren grass that is as high as a person. They are so high and so far away that they seem to have no end in sight. What danger, poisonous snakes and wild boars may appear at any time. However, following my passionate heart, I resolutely went to explore the unknown road. The grass and trees grow so densely that I can only push them away with my hands and step on my feet to move forward. They have barbs The stems and vines, the blade-like leaves, leave scars on your hands and faces. When you are halfway forward, and you are in the middle of the whole wild grass field, there is no one around, only a gentle wind wipes the intertwined grass and leaves. Suo Suo, a feeling of loneliness arises spontaneously. At this moment, no matter how strong my heart is, I will hesitate, should I continue to move forward...</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/5c6a547cea2223ebea9a2826bf695703.jpg'></p><p>Yes, should I move on! ? Recently, there is a sentence that has had a great impact on my heart, and it has been mentioned repeatedly, that is, "What is your purpose for doing this?"</p><p>"Please, don't be so utilitarian, don't be so tired, okay, I just pursue my heart, and I just do it because of my interest!" My first reaction in my heart was like this.</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/f2bced56303d75c88937d7352c43fca4.jpg'></p><p>However, when I suddenly looked up and found that there was no one around and was full of thorns, I would hesitate in my heart. For example, this article, if you insist on utilitarianism and purpose, it is really nothing, is it worth it? Does anyone care? Is it worth the time spent? Why do something that no one cares about? Why not focus on trendy stuff that will help your project? Why do you have to walk alone among the thorns when others are flying in the sky? (Video below: Passers-by write their biggest regret in life on the street blackboard)</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/8da459ce19cf47cadb59b9e61d8d78e1.jpg'></p><p>So, go all out, I will continue my progress, cross the grass that I have never crossed, go to the river that calls and wait, and find the virgin fishing land that I yearn for.</p><p><span ><strong>Second, cols attribute value and width</strong></span></p><p>You can click here: textarea text field cols attribute and width relationship demo (http://www.zhangxinxu.com/study/201602/textarea-cols-width.html)</p><p>The interface is as follows:</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/b7f006dd7b4522e5721596380b1e1b8b.jpg'></p><p>We can choose to drop down to modify the text size, font, and character spacing of the text field to see if it will affect the width of the text field. The results and conclusions are as follows:</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>It can be seen that the Chrome browser is only affected by the character size, and ignores the font and character spacing; while the FireFox browser affects each of them; and the IE browser is not affected by the character spacing.</p><p>Then comes the most concerned question, is there any relationship or formula between the value of cols and the width of the final display?</p><p>In the simsun font, that is, Song Ti, we can easily see the relationship between:</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>Since CSS and HTML were invented by foreigners, the relative width of each unit of cols is relative to English characters. In Song typeface, it can be considered as 8px, and the latter 17px is actually easy to understand, indicating the scroll bar. width. Under the window system, by default, the width occupied by the scroll bars of all browsers is 17 pixels. Therefore, for Chrome and IE browsers, the final width of the text field (not considering the padding and border size for now) is the single character width * cols value + scroll bar width. However, under the FireFox browser, the increased width is 29px, so it is not clear what 29px is.</p><p>Under IE browser, if the overflow attribute value of <textarea> is hidden, there will be no 17px added later, while other browsers do not have this phenomenon.</p><p>Then, when we use other fonts, the final width performance is more subtle. Therefore, the unit corresponding to a single cols is not an integer, it may be 8.1px or 7.7px~7.8px.</p><p>To sum it up:</p><p>It seems that it is of practical value only under the Chrome browser, because the width fluctuations under other browsers are too obvious, and any other environment changes will cause the width to be different, which is actually very bad in web page layout. Because the webpage is top-down, the height can be very long, but the width is generally fixed, the resources are relatively tight, and the layout is required to be precise. Therefore, once the width is different in each browser, it is bound to Greatly affect its practical value. Therefore, in the actual web production, unless the width requirements are not high, the CSS width attribute is still used to control the width of the text field at other times.</p><p><span ><strong>3. Rows attribute value and height</strong></span></p><p>You can click here hard: textarea text field rows attribute and height relationship demo</p><p>The interface is as follows:</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/d830df45fdc05e5ae3ed76eae975880d.jpg'></p><p>We can choose to drop down to modify the text size, font and line height of the text field to see if it will affect the height of the text field. The results and conclusions are as follows:</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>It can be seen that the Chrome browser and the FireFox browser are only affected by the size of the line height, and ignore the font and character size; while the IE browser is completely opposite, turning a blind eye to the line-height line height, but it does not care about the character size and character size. Fonts matter.</p><p>Then comes the most concerned question, is there any relationship or formula between the value of rows and the height of the final presentation (not considering the influence of padding and border first)?</p><p>In the Chrome browser, the final height is the product of the value of rows and line-height. As shown in the demo screenshot above, when the rows value is 2 and the line-height is 20px, the final height is 40px, which is their product.</p><p>It is similar under the FireFox browser, but there is a difference, that is, the height needs to be calculated with the size of the scroll bar, so the following scene is 17px higher than the Chrome browser:</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/6d78468e2a6590ebf47d148f836548c9.jpg'></p><p>Under the IE browser, the height has nothing to do with the line height, it is more determined by the height of the content area with text (the concept in the inline box model), because when different fonts are switched, the height will also become higher, for example, using Microsoft The Yahei font will become taller obviously, and the height of the content area of Microsoft Yahei is higher than that of ordinary fonts. Therefore, in order to determine the relationship between the height of the text field and the characters, the key is to determine the calculation coefficient: height=rows*coefficient. For example, the 16px Microsoft Yahei font has a coefficient of approximately 21 (see the figure below), and Song Ti simsun is between 18.2 and 18.5.</p><p ><img src='https://system-daogeziyuan-1251174242.cos.ap-nanjing.myqcloud.com/type_article/sucaituijian/7d9fc42048172c0e914809d494e296bc.jpg'></p><p>To sum it up:</p><p>Compatibility is still a mess, no two browsers behave exactly the same. But in the end, the performance design is a little bit better than cols. The more critical issue is that the height is generally not so strict, so sometimes we don't want to re-create the CSS to confirm the height of the text field, and it is also possible to use the rows attribute value to do it.</p><p><span ><strong>Fourth, the final conclusion</strong></span></p><p>The result of the final research is that the compatibility is very poor, and the cost of wanting to perform exactly the same under each browser is very high. Therefore, if you have strict requirements on the layout of the text field, use the CSS width/height property for precise control.</p><p>The only gain is that I know how different browsers are compatible, as well as the calculation method of the final size presentation, related factors, etc., which may provide a different idea for the realization of a certain function in the future!</p><p>En, that's all!</p><p>(End of this article)</p><p ><span >【Today's WeChat official account recommendation ↓】</span></p><p ></p></div> <div class="entry-readmore"> <div class="entry-readmore-btn"></div> </div> <div class="entry-copyright"><p>Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source:<span> https://www.daogebangong.com/en/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> Like <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> Reward <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">Columnist</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">Related Suggestion</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">[Practical tutorial] PPT scientific research drawing tutorial (016) - schematic diagram of electrospinning </a> </h4> <div class="item-excerpt"><p>[Practical tutorial] PPT scientific research drawing tutorial (016) - schematic diagram of electrospinning</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">[Practical Tips] Illustrated Electrospinning Process: An Introductory Guide to PPT Scientific Research Drawing (016) </a> </h4> <div class="item-excerpt"><p>[Practical Tips] Illustrated Electrospinning Process: An Introductory Guide to PPT Scientific Research Drawing (016)</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">The most complete PPT scientific research drawing tutorial and materials in history (second edition) </a> </h4> <div class="item-excerpt"><p>The most complete PPT scientific research drawing tutorial and materials in history (second edition)</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">New version: PPT scientific research drawing complete guide and material collection </a> </h4> <div class="item-excerpt"><p>New version: PPT scientific research drawing complete guide and material collection</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">"Guidelines for Making Scientific Research PPT Illustrations" </a> </h4> <div class="item-excerpt"><p>"Guidelines for Making Scientific Research PPT Illustrations"</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/en/articles/detail/hang-zhou-yi-lao-shi-fa-hong-bao-you-xue-sheng-zuo-ye-bei-jian-mian-you-ren-de-shi-juan-yi-tao.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/Rainy-Day-Scenery-hu-nan-xiao-cheng-de-shan-shui-hua-juan.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/bi-zhi-tui-jian-gun-hen-ku-hen-zan-de-dong-man-chang-jing-zhe-ge-hua-feng-ai-le.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/lian-xiang-tui-chu-Carme-zhi-neng-shou-biao-IP68-ji-fang-hu-7-tian-xu-hang.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/fen-xiang-yi-xie-wei-mei-cha-hua-dian-nao-bi-zhi.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/li-pu-he-nv-you-chao-jia-shang-tou-nan-zi-jing-bao-jia-jing-cheng-zi-ji-xi-du.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/shi-yi-da-zi-ti-xia-zai-yu-sou-suo-wang-zhan-wo-bu-xiang-xin-ni-yong-bu-dao.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/ji-nan-duo-jia-shi-ye-dan-wei-zhao-ren-le.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/meng-gu-wen-zi-xing-she-ji.html" title=""></a> </li> <li><a href="https://www.daogebangong.com/en/articles/detail/bi-zhi-chui-zi.html" title=""></a> </li> </ul> </div> </div> <div class="widget widget_post_hot"><h3 class="widget-title"><span>Hot Recommend</span></h3> <ul> </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/en/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/en/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/en/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/en/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/en/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/en">道格办公 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>