如何拉伸背景颜色
我已经拍摄并找到了我感兴趣使用的导航菜单的以下代码，但是如果有人可以提供帮助的话，我会有一个简单的问题。我想要拍摄并看看是否可能，是采取并将颜色拉伸到屏幕顶部以填补以下代码中的空白。任何帮助将不胜感激提前感谢。有任何问题让我知道。有问题的区域位于标题区域，其中标有“＃34; Some Text Here＆＃34;如果可能的话，想要到屏幕的顶部。
这是代码
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!doctype html>
<html lang="en-US" prefix="og: http://ogp.me/ns#" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://w3bits.com/wp-content/themes/bits-v2/labs.css">
<title>Site Title Here</title>
<script>
var script = function(src) {
var e = document.createElement('script');
e.async = true;
e.src = src;
document.getElementsByTagName('head')[0].appendChild(e);
};
var style = function(css) {
var e = document.createElement('style');
if (e.styleSheet) {
e.styleSheet.cssText = css;
} else {
e.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(e);
}
var toggleDisplay = function(el, display, class_el) {
var EL = document.querySelector(el);
if (EL.style.display == display) {
EL.style.display = "none";
if (class_el) EL.classList.add(class_el);
} else {
EL.style.display = display;
if (class_el) EL.classList.add(class_el);
}
};
if (!showAds) {
setTimeout(function() {
var w = document.querySelector('.wrapper');
if (typeof ga !== 'undefined') {
ga('send', 'event', 'Adblock', 'Yes', {
'nonInteraction': 1
});
} else if (typeof _gaq !== 'undefined') {
_gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
}
var ab_a = document.createElement("div"),
w_p = w.parentNode;
w_p.classList.add("ab-active");
ab_a.setAttribute("class", "ab-alert");
w_p.parentNode.insertBefore(ab_a, w_p);
ab_a.innerHTML = '<p>I never intend to spoil your experience here, but this is important. I want to share with you that this website exists totally because of adverts money.</p><p>If you whitelist my website in your adblocker software, I won\'t show you more than two Google ads per page, and no popups. It\'s a promise.</p><p>Thanks for your patience :-)</p><p class="small" style="opacity: .75">This message disappears by itself in 15 seconds.</p>';
var ab = document.querySelector(".ab-alert");
document.documentElement.setAttribute("oncontextmenu", "return false");
style('.ab-alert{box-sizing:border-box;line-height:1.75}.site-wrapper{transition: opacity .5s ease-in-out;}.ab-active{ opacity: .0125; pointer-events: none;position:fixed;width:100%;}.ab-alert,.ab-active{user-select:none;}.ab-alert{opacity: 1;transition: opacity .5s ease-in-out;font-size: 15px;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;max-width: 450px; background-color: white; padding: 2.5em}');
setInterval(function() {
ab.style.opacity = "0";
ab.remove();
w_p.classList.remove("ab-active");
document.documentElement.removeAttribute("oncontextmenu");
}, 15000);
}, 1000);
}
script("//s3.buysellads.com/ac/bsa.js");
</script>
<!-- This site is optimized with the Yoast SEO plugin v5.9.1 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta property="og:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 …" />
<meta property="og:url" content="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:site_name" content="W3Bits" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 […]" />
<meta name="twitter:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta name="twitter:site" content="@w3bits_" />
<meta name="twitter:creator" content="@w3bits_" />
<script type='application/ld+json'>
{
"@context": "http:\/\/schema.org",
"@type": "WebSite",
"@id": "#website",
"url": "http:\/\/w3bits.com\/",
"name": "W3Bits",
"potentialAction": {
"@type": "SearchAction",
"target": "http:\/\/w3bits.com\/?s={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- / Yoast SEO plugin. -->
<link rel='dns-prefetch' href='//s.w.org' />
<link rel='https://api.w.org/' href='http://w3bits.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://w3bits.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://w3bits.com/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='http://w3bits.com/?p=2474' />
<link rel="alternate" type="application/json+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F&format=xml" />
<link rel="stylesheet" href="http://w3bits.com/files/css/css-responsive-nav.css">
</head>
<body class="labs-template-default single single-labs postid-2474">
<div class="container">
<div class="wrapper">
<div class="bup" id="bup">
<style>
.w3bits-labs {
width: 468px;
height: 60px;
margin: 1.5em 0 0
}
@media(min-width: 728px) {
.w3bits-labs {
width: 728px !important;
height: 90px !important;
}
}
@media(max-width:727px) and (min-width: 468px) {
.w3bits-labs {
width: 468px !important;
height: 60px !important;
}
}
@media(max-width: 467px) and (min-width: 234px) {
.w3bits-labs {
width: 234px !important;
height: 60px !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- W3Bits Labs -->
<ins class="adsbygoogle w3bits-labs" style="display:block" data-ad-client="ca-pub-1581655830066906" data-ad-slot="9749450056" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="background:#0099cc; font-size:22px; text-align:center; color:#000; font-weight:bold; height:auto; padding-top:50px;">Some Text Here !!</div>
<div id="wrap">
<nav id="menu">
<label for="tm" id="toggle-menu">Navigation Menu <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu cf">
<li><a href="#">Home</a></li>
<li><a href="#">Dropdown
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label>
</a>
<input type="checkbox" id="sm0">
<ul class="sub-menu">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul>
</li>
<li><a href="#">2-level DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
</a>
<input type="checkbox" id="sm1">
<ul class="sub-menu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
</a>
<input type="checkbox" id="sm2">
<ul class="sub-menu">
<li><a href="#">Item 2.2.1</a></li>
<li><a href="#">Item 2.2.2</a></li>
<li><a href="#">Item 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a href="#">Multiple Levels
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3">
<ul class="sub-menu">
<li><a href="">3.1
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm4">▾</label>
</a>
<input type="checkbox" id="sm4">
<ul class="sub-menu">
<li><a href="">3.1.1</a></li>
<li><a href="">3.1.2</a></li>
<li><a href="">3.1.3</a></li>
<li><a href="">3.1.4</a></li>
</ul>
</li>
<li><a href="">3.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5">
</a>
<ul class="sub-menu">
<li><a href="">3.2.1</a></li>
<li><a href="">3.2.2</a></li>
<li><a href="">3.2.3</a></li>
</ul>
</li>
<li><a href="">3.3
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
<input type="checkbox" id="sm6">
</a>
<ul class="sub-menu">
<li><a href="">3.3.1</a></li>
<li><a href="">3.3.2</a></li>
<li><a href="">3.2.2</a></li>
<li><a href="">3.3.4</a></li>
<li><a href="">3.3.5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sample #2</a></li>
<li><a href="#">Another DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm8">▾</label>
</a>
<input type="checkbox" id="sm8">
</a>
<ul class="sub-menu">
<li><a href="">4.1</a></li>
<li><a href="">4.2</a></li>
<li><a href="">4.2</a></li>
<li><a href="">4.4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<nav class="cf lab-nav lab-nav--fixed lab-nav--bottom lab-nav--light">
<a href="http://w3bits.com/css-responsive-nav-menu/" title="Back to the article" class="lab-article-link">
<svg class="icon icon-right-open icon-reverse">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-right-open"></use>
</svg><span> Article</span></a>
<ul class="lab-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://w3bits.com/css-responsive-nav-menu/" title="Share on Facebook">
<svg class="icon icon-facebook">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://twitter.com/intent/tweet?original_referer=http://w3bits.com/css-responsive-nav-menu/&text=$article_title&url=http://w3bits.com/css-responsive-nav-menu/&via=w3bits_" title="Tweet">
<svg class="icon icon-twitter">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://plus.google.com/share?url=http://w3bits.com/css-responsive-nav-menu/" title="Share on Google+">
<svg class="icon icon-gplus">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-gplus"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="javascript:void((function(d){var%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document));" title="Pin-it on Pinterest">
<svg class="icon icon-pinterest">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-pinterest"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="http://www.addthis.com/bookmark.php?url=http://w3bits.com/css-responsive-nav-menu/" class="share-link" rel="external nofollow" title="Share the love" target="_blank">
<svg class="icon icon-share">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-share"></use>
</svg><span></span></a>
</li>
</ul>
</nav>
<a href="http://w3bits.com/follow/" class="lab-follow lab-follow--light"><svg class="icon icon-plus"><use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-plus"></use></svg> Follow</a>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-10703354-8', 'w3bits.com');
ga('require', 'displayfeatures');
ga('send', 'pageview');
var toggle_menu = document.querySelector("#toggle_menu"),
toggle_search = document.querySelector("#toggle_search");
if (toggle_menu) {
toggle_menu.addEventListener("click", function() {
toggleDisplay("#main-nav", "block", false);
toggle_menu.classList.toggle("active");
toggle_menu.children[0].classList.toggle("icon-close");
}, false);
}
if (toggle_search) {
toggle_search.addEventListener("click", function() {
toggleDisplay("#search", "block", false);
toggle_search.classList.toggle("active");
toggle_search.children[0].classList.toggle("icon-close");
}, false);
}
</script>
<script type='text/javascript' src='http://w3bits.com/wp-content/themes/bits-v2/assets/js/prettify.js'></script>
<script type='text/javascript'>
prettyPrint()
</script>
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
尝试
<div style="background:#0099cc; font-size:22px; text-align:center; color:#000; font-weight:bold; height:auto; padding-top:50px;width:100%;overflow:hidden;">Some Text Here !!</div>
让我知道它是怎么回事。
答案 1 :(得分：0)
谷歌广告没有加载到顶部，而div有一个保证金。
执行以下操作以清除站点/页面上方的空间
1.查找并删除以下内容：
<ins class="adsbygoogle w3bits-labs" style="display:block" data-ad-client="ca-pub-1581655830066906" data-ad-slot="9749450056" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
2.接下来你的div与bup class和id有一个余量。删除保证金，你很高兴：
.bup {
margin: 0 auto 2.5em;
position: relative;
z-index: 9999;
display: flex;
justify-content: center;
}
.bup 中找到 labs.css
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？