[英]Header CSS styling spacing
我有一个相当简单的 header，尽管我发现我的 RWD 允许 header 在任何地方工作并获得整个页面的外观，但我可以看到我想要的方式。 我现在正在网格轨道内尝试使用 flexbox 的网格模板，而当我想要链接之间的间隙时，我的 header 不喜欢。 我创建了一个 js 小提琴https://jsfiddle.net/Arandolph01/vp8xnrmL/2/我的想法是最好的响应式 Web 设计，当我改变屏幕尺寸时，我不断得到徽标和图像几乎完全消失。 我已经使用了正确的指标和自动，它与最新的布局一起说，所以感谢我填写。
更新
.nav_menu a {
margin: 1em 3.7em;
}
body { background-image: url(https://i.imgur.com/sCfeeeY.png),url(https://i.imgur.com/sCfeeeY.png); background-position: top 1em right 1em, bottom 1em left 1em; background-repeat: no-repeat; }.row { flex: 2 auto; grid-column: 1 30em; display: flex; margin: auto; }.active { margin: 1em; }.fullwebpage.section { display: grid; grid-template-rows: 1fr 1fr auto auto 1fr 1fr; grid-template-columns: minmax(40em, 25%) 1fr; grid-column: 1; flex: 0 1 28em; }.sectionheader { display: flex; flex: 8 auto; grid-row: auto 1; width: 100%; margin: 1em; margin-right: 3em; }.sectionfirst { padding-top: 5em; }.nav_menu { margin-right: 4em; }.nav_menu { float: left; justify-content: space-around; text-decoration: none; font-family: Verdana; font-weight: bold; display: flex; z-index: 1; }.wrap { display: inline-flex; width:100%; margin-top:2em; }.wrap a { display: flex; flex: 3 auto; flex-flow: row; grid-row: 1; float: start; color: black; text-decoration: none; font-size: 17px; }.wrap#gsbutton { padding-top: .5em; padding-right: 0; padding-left: 0; margin-right: 3em; margin-left: 0em; }
<,DOCTYPE html> <html lang="en"> <head> <title>Frontend Challenge Developer Website</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <.-- displays site properly based on user's device --> <link rel="stylesheet" type="text/css" href="attributes:css"> </head> <body> <section> <section class="row header" id="sectionheader"> <.-- page bar header navigation tabs --> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index.html"> <img src="https.//i.imgur.com/4kctnTg.png"></img> </a> </div> <nav class="nav_menu"> <a class="active" href=""><.--index:html-->Home</a> <a class="active" id="pricingheader" href=""><.--pricing.html-->Pricing</a> <a class="active" href=""><.--products.html-->Products</a> <a class="active" href=""><!--aboutus.html-->About Us</a> <a class="active" href=""><!--community-->Community</a> </nav> <a class="gsbutton" id="gsbutton" href=""> <img src="https://i.imgur.com/XZY4xX0.png" alt=""> </a> </div> </div> </section> </body> </html>
我希望该部分间隔 1-3em。
您所要做的就是为活动的 class 添加一点余量。
body { background-image: url(https://i.imgur.com/sCfeeeY.png), url(https://i.imgur.com/sCfeeeY.png); background-position: top 1em right 1em, bottom 1em left 1em; background-repeat: no-repeat; }.a { padding: 2px 0px; text-decoration: none; font-size: 17px; font-family: Verdana; font-weight: bold; color: black; justify-content: space-around; }.row { flex: 2 auto; grid-column: 1 10em; grid-row: auto; display: flex; }.fullwebpage { display: grid; grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr auto; grid-column: 1; grid-gap: 5em; }.sectionheader { display: flex; flex: 8 auto; grid-row: auto 1; width: 100%; margin: 1em; margin-right: 3em; }.section_bg.head_bg a:active { color: black; }.footer a:active { color: white; }.table-row { width: 100%; display: flex; }.topfooterbanner { width: 100%; background-color: orange; height: 100%; bottom: 0em; }.nav_menu { float: left; justify-content: space-around; text-decoration: none; font-family: Verdana; font-weight: bold; display: flex; z-index: 1; }.wrap { display: inline-flex; /* float: left; */ /* flex: 3 auto; */ width: 100%; /* margin-left: 10em; */ margin-top: 2em; /* padding: 1em; */ /* text-align: center; */ }.wrap a { display: flex; flex: 3 auto; flex-flow: row; grid-row: 1; float: start; color: black; text-decoration: none; font-size: 17px; }.active { margin: 5px; }
<section class="row header" id="sectionheader"> <.-- page bar header navigation tabs --> <div class="head_bg"> <div class="wrap"> <div class="logo"> <a href="index:html"> <img src="https.//i.imgur.com/4kctnTg.png"></img> </a> </div> <nav class="nav_menu"> <a class="active" href="index.html">Home</a> <a class="active" id="pricingheader" href="pricing.html">Pricing</a> <a class="active" href="product.html">Products</a> <a class="active" href="about.html">About Us</a> <a class="active" href="community.html">Community</a> </nav> <a class="gsbutton" id="gsbutton" href="pricing:html"><img src="https.//i.imgur.com/jfNTTt4.png" alt=""></a> </div> </div> </section>
如何用javascript完全替换页面或其标题的CSS样式？
[英]How to fully replace the CSS styling of a page or its header with javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.