내 navbar 영역을 밝은 파란색으로 변경하고 싶고 내가 할 것이라고 생각한 CSS를 설정했지만 대신 전체 navbar 영역이 아닌 내 탐색 항목 뒤에 색상을 배치했습니다. 전체 navbar 영역에서 색상을 얻으려면 어떻게해야합니까?
HTML
<!doctype html>
<html>
<head>
<title>Cities Gallery</title>
<link rel="stylesheet" type="text/css" href="css/myStyles.css">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="london.html">London</a></li>
<li><a href="paris.html">Paris</a></li>
<li><a href="tokio.html">Tokyo</a></li>
</ul>
</nav>
<article>
<div class="intro_text">
<h1>City Navigator</h1>
<p>Welcome to my cities website. Click on a link on a left to view City information</p>
</div>
<img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;">
</article>
</div>
</body>
<footer>
<p>Posted by: German Jimenez</p>
<p>Contact information: <a href="mailto:[email protected]">
German Jimenez</a>.</p>
</footer>
</html>
CSS
div.container{
width:100%;
border:1px solid gray;
}
header, footer{
padding:1em;
color:white;
background-color:black;
clear:left;
text-align:center
}
nav {
float:left;
max-width:160px;
margin:0;
padding:1em;
background-color:lightblue; //this did not work
}
nav ul {
list-style-type: none;
padding:0;
}
nav ul a {
text-decoration: none;
}
article{
margin-left:170px;
border-left:1px solid gray;
padding:1em;
overflow:hidden;
}
내가 사용하는 것이 flex에 .container,로 설정 wrap세트 header로 flex: 0 0 100%는 그래서 flex-basis: 100%및 전체 행을 차지합니다. 그런 다음 설정 article에 flex: 1 0 0;(그 것 때문에 flex-grow공간이에서 남은 채우기 nav)
div.container {
width: 100%;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
}
header,
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center
}
nav {
max-width: 160px;
margin: 0;
padding: 1em;
background-color: lightblue; //this did not work
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
flex: 1 0 0;
}
header {
flex: 0 0 100%;
}<!doctype html>
<html>
<head>
<title>Cities Gallery</title>
<link rel="stylesheet" type="text/css" href="css/myStyles.css">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="london.html">London</a></li>
<li><a href="paris.html">Paris</a></li>
<li><a href="tokio.html">Tokyo</a></li>
</ul>
</nav>
<article>
<div class="intro_text">
<h1>City Navigator</h1>
<p>Welcome to my cities website. Click on a link on a left to view City information</p>
</div>
<img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;">
</article>
</div>
</body>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다