css

css

go

背景图像未覆盖整个页面高度。

英文: Background Image not covering full page height 问题我已将背景图片设置给我的<body>标签，但由于某种原因，图片未能填充以与页面上...

2023年8月5日62评论

go

“使用相对单位的样式表可以更容易地在不同的输出环境之间进行缩放”。

英文: "Style sheets that use relative units can more easily scale from one output environment to ...

2023年8月5日97评论

go

如何使用媒体查询将一个 div 移动到另一个 div 的上方。

英文: How to use media queries to move one div above another div 问题 I am using Bootstrap 5 to make a w...

2023年8月5日75评论

go

如何在没有填充的情况下，从文本到顶部添加垂直和水平空间？</a></h2> </header> <div class="entry-content"> <div class="archive-content"> 英文: How to add vertical and horizontal space from text to top of <textarea> without padding? 问... </div> <div class="clear"></div> <span class="title-l"></span> <span class="entry-meta lbm vr"> <span class="meta-author author-hide"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span><span class="date"><time datetime="2023-08-05 00:29:25">2023年8月5日</time></span><span class="views"><i class="be be-eye ri"></i>71</span><span class="comment"><a href="https://go.coder-hub.com/76837724.html#respond"><span class="no-comment"><i class="be be-speechbubble ri"></i>评论</span></a></span><span class="post-tag"><a href="https://go.coder-hub.com/tag/html" class="tag-cloud-link tag-link-1080 tag-link-position-1" style="font-size: 14px;">html</a> <a href="https://go.coder-hub.com/tag/javascript" class="tag-cloud-link tag-link-835 tag-link-position-2" style="font-size: 14px;">javascript</a></span> </span> <div class="clear"></div> </div> </article> <article id="post-98768" class="post-item-list post ms scl" data-aos=fade-up> <figure class="thumbnail"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76837501.html" data-src="https://cdn.coder-hub.com/wp/img/16.jpg"></a></div> <span class="cat cat-roll"><a href="https://go.coder-hub.com/category/go">go</a></span> </figure> <header class="entry-header entry-header-c"> <h2 class="entry-title"><a href="https://go.coder-hub.com/76837501.html" rel="bookmark">带有文本的圆形Div内的图像</a></h2> </header> <div class="entry-content"> <div class="archive-content"> 英文: Image inside rounded Div with Text 问题我正在制作一个圆角的 div，其中包含一个已经是圆角的图像，右侧有文本。文本一直溢出了 div。而且，文本从 di... </div> <div class="clear"></div> <span class="title-l"></span> <span class="entry-meta lbm vr"> <span class="meta-author author-hide"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span><span class="date"><time datetime="2023-08-04 23:57:13">2023年8月4日</time></span><span class="views"><i class="be be-eye ri"></i>62</span><span class="comment"><a href="https://go.coder-hub.com/76837501.html#respond"><span class="no-comment"><i class="be be-speechbubble ri"></i>评论</span></a></span><span class="post-tag"><a href="https://go.coder-hub.com/tag/css" class="tag-cloud-link tag-link-1212 tag-link-position-1" style="font-size: 14px;">css</a> <a href="https://go.coder-hub.com/tag/html" class="tag-cloud-link tag-link-1080 tag-link-position-2" style="font-size: 14px;">html</a></span> </span> <div class="clear"></div> </div> </article> <article id="post-97863" class="post-item-list post ms scl" data-aos=fade-up> <figure class="thumbnail"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76837316.html" data-src="https://cdn.coder-hub.com/wp/img/25.jpg"></a></div> <span class="cat cat-roll"><a href="https://go.coder-hub.com/category/go">go</a></span> </figure> <header class="entry-header entry-header-c"> <h2 class="entry-title"><a href="https://go.coder-hub.com/76837316.html" rel="bookmark">在悬停时如何显示一些文本</a></h2> </header> <div class="entry-content"> <div class="archive-content"> 英文: How do I show some text on hover 问题 I am a newbie to web development and I'm facing an issue to ... </div> <div class="clear"></div> <span class="title-l"></span> <span class="entry-meta lbm vr"> <span class="meta-author author-hide"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span><span class="date"><time datetime="2023-08-04 23:27:29">2023年8月4日</time></span><span class="views"><i class="be be-eye ri"></i>59</span><span class="comment"><a href="https://go.coder-hub.com/76837316.html#respond"><span class="no-comment"><i class="be be-speechbubble ri"></i>评论</span></a></span><span class="post-tag"><a href="https://go.coder-hub.com/tag/css" class="tag-cloud-link tag-link-1212 tag-link-position-1" style="font-size: 14px;">css</a> <a href="https://go.coder-hub.com/tag/html" class="tag-cloud-link tag-link-1080 tag-link-position-2" style="font-size: 14px;">html</a></span> </span> <div class="clear"></div> </div> </article> <article id="post-97915" class="post-item-list post ms scl" data-aos=fade-up> <figure class="thumbnail"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76837274.html" data-src="https://i.stack.imgur.com/DoEu6.jpg"></a></div> <span class="cat cat-roll"><a href="https://go.coder-hub.com/category/go">go</a></span> </figure> <header class="entry-header entry-header-c"> <h2 class="entry-title"><a href="https://go.coder-hub.com/76837274.html" rel="bookmark">使用CSS重新创建形状</a></h2> </header> <div class="entry-content"> <div class="archive-content"> 英文: Recreating shape using CSS 问题我正在尝试仅使用CSS重新创建下面图片中的形状。这是我尝试过的：  <div class="pagenav-clear"><div class="clear"></div><div class="turn betip turn-small"> <form class="page-nav-form" action="" autocomplete="off" method="get"> <input class="input-number dah" type="number" min="1" max="218" onblur="if (this.value==''){this.value='10';}" onfocus="if (this.value=='10'){this.value='';}" value="10" name="paged" /> <div class="page-button-box"><input class="page-button dah" value="" type="submit"></div> </form> <span class="max-num">218</span> <nav class="navigation pagination" aria-label="文章"> <h2 class="screen-reader-text">文章导航</h2> <div class="nav-links"><a class="prev page-numbers" href="https://go.coder-hub.com/tag/css/page/9"><i class="be be-arrowleft dah"></i></a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/">1</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/6">6</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/7">7</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/8">8</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/9">9</a> <span aria-current="page" class="page-numbers current">10</span> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/11">11</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/12">12</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/13">13</a> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/14">14</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://go.coder-hub.com/tag/css/page/218">218</a> <a class="next page-numbers" href="https://go.coder-hub.com/tag/css/page/11"><i class="be be-arrowright dah"></i></a></div> </nav> <div class="clear"></div></div></div> </section> <div id="sidebar" class="widget-area all-sidebar"> <aside id="search-4" class="widget widget_search ms" data-aos="fade-up"><div class="searchbar"> <form method="get" id="searchform" action="https://go.coder-hub.com/" autocomplete="off"> <span class="search-input"> <input type="text" value="" name="s" id="s" placeholder="输入搜索内容" required /> <button type="submit" id="searchsubmit"><i class="be be-search"></i></button> </span> <div class="clear"></div> </form> </div><div class="clear"></div></aside><aside id="about-4" class="widget about ms" data-aos="fade-up"> <div id="feed_widget"> <div class="feed-about"> <div class="author-back" style="background-image: url('https://go.coder-hub.com/wp-content/themes/begin/img/default/options/user.jpg');"></div> <div class="about-main"> <div class="about-img"> <div class="about-img-box"><img src="https://go.coder-hub.com/wp-content/uploads/2023/08/cropped-v2-46d9eaf887cea850a9211ed7e8b3168b_r-1.png" alt="name"/></div> </div> <div class="clear"></div> <div class="about-name">开发者交流平台</div> <div class="about-the">通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。</div> </div> <div class="clear"></div> <div class="feed-about-box"> <div class="feed-t tqq"><a class="dah" target=blank rel="external nofollow" href=http://wpa.qq.com/msgrd?V=3&uin=594295220&Site=QQ&Menu=yes><i class="be be-qq"></i></a></div> <div class="clear"></div> </div> <div class="clear"></div> <div class="about-inf"> <span class="about about-cn"><span>文章</span>117266</span> <span class="about about-pn"><span>留言</span> 3 </span> <span class="about about-cn"><span>访客</span>7788722</span> </div> </div> </div> <div class="clear"></div></aside><aside id="cx_tag_cloud-3" class="widget cx_tag_cloud ms" data-aos="fade-up"><h3 class="widget-title"><span class="title-i"><span></span><span></span><span></span><span></span></span>热门标签</h3> <div id="tag_cloud_widget" class="cloud-tag"> <a href="https://go.coder-hub.com/tag/python" class="tag-cloud-link tag-link-945 tag-link-position-1" style="font-size: 17.870967741935px;" aria-label="python (10,561 项)">python</a> <a href="https://go.coder-hub.com/tag/css" class="tag-cloud-link tag-link-1212 tag-link-position-2" style="font-size: 14.58064516129px;" aria-label="css (2,175 项)">css</a> <a href="https://go.coder-hub.com/tag/android" class="tag-cloud-link tag-link-796 tag-link-position-3" style="font-size: 16.08064516129px;" aria-label="android (4,498 项)">android</a> <a href="https://go.coder-hub.com/tag/reactjs" class="tag-cloud-link tag-link-845 tag-link-position-4" style="font-size: 15.5px;" aria-label="reactjs (3,367 项)">reactjs</a> <a href="https://go.coder-hub.com/tag/javascript" class="tag-cloud-link tag-link-835 tag-link-position-5" style="font-size: 17px;" aria-label="javascript (6,931 项)">javascript</a> <a href="https://go.coder-hub.com/tag/node-js" class="tag-cloud-link tag-link-867 tag-link-position-6" style="font-size: 14px;" aria-label="node.js (1,645 项)">node.js</a> <a href="https://go.coder-hub.com/tag/c-3" class="tag-cloud-link tag-link-1734 tag-link-position-7" style="font-size: 14.629032258065px;" aria-label="c++ (2,254 项)">c++</a> <a href="https://go.coder-hub.com/tag/sql" class="tag-cloud-link tag-link-1024 tag-link-position-8" style="font-size: 14.870967741935px;" aria-label="sql (2,536 项)">sql</a> <a href="https://go.coder-hub.com/tag/html" class="tag-cloud-link tag-link-1080 tag-link-position-9" style="font-size: 15.306451612903px;" aria-label="html (3,061 项)">html</a> <a href="https://go.coder-hub.com/tag/spring" class="tag-cloud-link tag-link-826 tag-link-position-10" style="font-size: 14.91935483871px;" aria-label="spring (2,579 项)">spring</a> <a href="https://go.coder-hub.com/tag/go" class="tag-cloud-link tag-link-5536 tag-link-position-11" style="font-size: 20px;" aria-label="go (29,044 项)">go</a> <a href="https://go.coder-hub.com/tag/java" class="tag-cloud-link tag-link-791 tag-link-position-12" style="font-size: 19.612903225806px;" aria-label="java (23,767 项)">java</a> <a href="https://go.coder-hub.com/tag/typescript" class="tag-cloud-link tag-link-1951 tag-link-position-13" style="font-size: 14.387096774194px;" aria-label="typescript (1,996 项)">typescript</a> <a href="https://go.coder-hub.com/tag/spring-boot" class="tag-cloud-link tag-link-800 tag-link-position-14" style="font-size: 15.403225806452px;" aria-label="spring-boot (3,207 项)">spring-boot</a> <a href="https://go.coder-hub.com/tag/r" class="tag-cloud-link tag-link-1450 tag-link-position-15" style="font-size: 15.209677419355px;" aria-label="r (2,978 项)">r</a> <a href="https://go.coder-hub.com/tag/pandas" class="tag-cloud-link tag-link-2296 tag-link-position-16" style="font-size: 14.532258064516px;" aria-label="pandas (2,117 项)">pandas</a> <a href="https://go.coder-hub.com/tag/json" class="tag-cloud-link tag-link-821 tag-link-position-17" style="font-size: 15.112903225806px;" aria-label="json (2,846 项)">json</a> <a href="https://go.coder-hub.com/tag/arrays" class="tag-cloud-link tag-link-805 tag-link-position-18" style="font-size: 14.725806451613px;" aria-label="arrays (2,325 项)">arrays</a> <a href="https://go.coder-hub.com/tag/c-2" class="tag-cloud-link tag-link-995 tag-link-position-19" style="font-size: 15.645161290323px;" aria-label="c# (3,634 项)">c#</a> <a href="https://go.coder-hub.com/tag/flutter" class="tag-cloud-link tag-link-1645 tag-link-position-20" style="font-size: 14.096774193548px;" aria-label="flutter (1,721 项)">flutter</a> <div class="clear"></div> </div> <div class="clear"></div></aside><aside id="countdown_be_widget-3" class="widget countdown_widget ms" data-aos="fade-up"><h3 class="widget-title"><span class="title-i"><span></span><span></span><span></span><span></span></span>悟已往之不谏，知来者之可追！</h3> <div class="be-countdown-widge"> <div class="countdown-count-main square-progress"> <div class="countdown-area"> <div class="countdown-item countdown-day" id="dayprogress"> <div class="countdown-title">今日</div> <div class="besea"> <div class="bewave"></div> <div class="bewave"></div> <div class="bewave"></div> <div class="progress-count">00%</div> </div> <div class="countdown-time">已<span>00</span>小时</div> </div> <div class="countdown-item countdown-week" id="weekprogress"> <div class="countdown-title">本周</div> <div class="besea"> <div class="bewave"></div> <div class="bewave"></div> <div class="bewave"></div> <div class="progress-count">00%</div> </div> <div class="countdown-time">已过<span>00</span>天</div> </div> <div class="countdown-item countdown-month" id="monthprogress"> <div class="countdown-title">本月</div> <div class="besea"> <div class="bewave"></div> <div class="bewave"></div> <div class="bewave"></div> <div class="progress-count">00%</div> </div> <div class="countdown-time">已过<span>00</span>天</div> </div> <div class="countdown-item countdown-year" id="yearprogress"> <div class="countdown-title">今年</div> <div class="besea"> <div class="bewave"></div> <div class="bewave"></div> <div class="bewave"></div> <div class="progress-count">00%</div> </div> <div class="countdown-time">已是<span>00</span>月</div> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div></aside> </div> <div class="clear"></div> </div> <div class="clear"></div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <div class="site-copyright"> <p style="text-align: center;">Copyright © 开发者交流平台版权所有.</p> <p style="text-align: center;"> </div> <div class="add-info"> <div class="clear"></div> <span class="yb-info"> <a href="https://beian.miit.gov.cn/" rel="external nofollow" target="_blank">闽 ICP 备 2022019110 号 - 1 </a> </span> </div> <div class="clear"></div> </div> <ul id="scroll" class="scroll scroll-but"> <li><a class="scroll-h ms fo"><i class="be be-arrowup"></i></a></li> <li><a class="scroll-b ms fo"><i class="be be-arrowdown"></i></a></li> <ul class="night-day"> <li class="foh"><span class="night-main"><a class="m-night fo ms"><span class="m-moon"><span></span></span></a></span></li> <li class="foh"><a class="m-day fo ms"><i class="be be-loader"></i></a></li> </ul> <li class="qrshow foh"> <a class="qrurl ms fo"><i class="be be-qr-code"></i></a> <span class="qrurl-box"> <img id="qrious"> <span class="logo-qr"><img src="https://go.coder-hub.com/wp-content/uploads/2023/08/cropped-v2-46d9eaf887cea850a9211ed7e8b3168b_r-1.png" alt="开发者交流平台" /></span> <p>本页二维码</p> <span class="arrow-right"></span> </span> </li> </ul> <script type='text/javascript' id='superfish-js-after'>var fallwidth = {fall_width: 190}</script> <script type="text/javascript">var QaptchaJqueryPage="https://go.coder-hub.com/wp-content/themes/begin/inc/qaptcha.jquery.php"</script> <script>window._betip = { uri:"https://go.coder-hub.com/wp-content/themes/begin/" }</script><script type="text/javascript" src="https://go.coder-hub.com/wp-includes/js/clipboard.min.js?ver=2.0.11" id="clipboard-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/superfish.js?ver=2023/08/22" id="superfish-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/begin-script.js?ver=2023/08/22" id="be_script-js"></script> <script type="text/javascript" id="be_script-js-after"> /* <![CDATA[ / var ajax_content = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var Offset = {"header_h":"80"};var aosstate = {"aos":"0"}; var bea_ajax_params = {"bea_ajax_nonce":"68117a1d24","bea_ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var be_mail_contact_form = {"mail_ajaxurl":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var ajax_sort = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var random_post = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var ajax_ac = {"ajaxurl":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var ajax_captcha = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var ajax_load_login = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"};var ajax_pages_login = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"}; var host = {"site":"https:\/\/go.coder-hub.com"};var plt = {"time":"30"}; var copiedurl = {"copied":"\u5df2\u590d\u5236"};var copiedlink = {"copylink":"\u590d\u5236\u94fe\u63a5"}; / ]]> / </script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/ajax-tab.js?ver=2023/08/22" id="ajax_tab-js"></script> <script type="text/javascript" id="ajax_tab-js-after"> / <![CDATA[ / var ajax_tab = {"ajax_url":"https:\/\/go.coder-hub.com\/wp-admin\/admin-ajax.php"}; var Ajax_post_id = {"post_not_id":""}; / ]]> / </script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/qrious.js?ver=2023/08/22" id="qrious-js-js"></script> <script type="text/javascript" id="qrious-js-js-after"> / <![CDATA[ / var ajaxqrurl = {"qrurl":"1"}; / ]]> / </script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/owl.js?ver=2023/08/22" id="owl-js"></script> <script type="text/javascript" id="owl-js-after"> / <![CDATA[ / var Timeout = {"owl_time":"4000"};var gridcarousel = {"grid_carousel_f":"4"};var flexiselitems = {"flexisel_f":"5"};var slider_items_n = {"slider_sn":"4"}; / ]]> */ </script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/sticky.js?ver=2023/08/22" id="sticky-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/ias.js?ver=2023/08/22" id="ias-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/nice-select.js?ver=2023/08/22" id="nice-select-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/fancybox.js?ver=2023/08/22" id="fancybox-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/3dtag.js?ver=2023/08/22" id="3dtag-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/countdown.js?ver=2023/08/22" id="countdown-js"></script> <script type="text/javascript" src="https://go.coder-hub.com/wp-content/themes/begin/js/captcha-email.js?ver=2023/08/22" id="login-js"></script> </footer> </div> </body> </html>