问题描述
我刚刚开始学习HTML和CSS，因此我并不了解。 我检查了其他问题并尝试了给出的答案，但是没有一个对我有用。 我希望标题和导航栏位于同一边框的底部。 我尝试了很多方法，但不知道下一步该怎么做。
这是我的html;
<body>
<div id="main">
<nav id="nav01"></nav>
<h1 class="padding">hardalname</h1>
<p>Lorem ipsum dolor sit amet.</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
这是我的CSS；
body {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
background-color: white;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: white;
border-radius: 0 0 5px 5px;
}
h1 {
font-family: "Courier New", Courier, monospace;
border-bottom: 1px double darkred;
color: darkred;
font-size: 30px;
}
h1.padding {
padding-bottom: 5px;
}
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display: inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius; 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: silver;
}
这是我正在使用的导航栏；
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>hardalname</a></li>" +
"<li><a href='about.html'>hakk?mda</a></li>" +
"</ul>";
body { font-family: "Courier New", Courier, monospace; font-size: 16px; background-color: white; color: #696969; padding: 3px; } #main { padding: 5px; padding-left: 15px; padding-right: 15px; background-color: white; border-radius: 0 0 5px 5px; } h1 { font-family: "Courier New", Courier, monospace; border-bottom: 1px double darkred; color: darkred; font-size: 30px; } h1.padding { padding-bottom: 5px; } ul#menu { padding: 0; margin-bottom: 11px; } ul#menu li { display: inline; margin-right: 3px; } ul#menu li a { background-color: #ffffff; padding: 10px 20px; text-decoration: none; color: #696969; border-radius; 4px 4px 0 0; } ul#menu li a:hover { color: white; background-color: silver; }
<body> <div id="main"> <nav id="nav01"> <ul id='menu'> <li><a href='index.html'>hardalname</a> </li> <li><a href='about.html'>hakk?mda</a> </li> </ul> </nav> <h1 class="padding">hardalname</h1> <p>Lorem ipsum dolor sit amet.</p> <footer id="foot01"></footer> </div>
1楼
jessh
0
2015-07-25 16:15:17
添加将边框添加到导航的规则：
#nav01{
border-bottom: 1px double darkred;
}