Html CSS导航、文本定位和间距帮助
全部, 我想做三件事:Html CSS导航、文本定位和间距帮助,html,css,Html,Css,全部, 我想做三件事: 我需要导航栏位于标题下方。这可能是 一个简单的解决办法,但就我个人而言,我想不出来 我需要导航中的文本垂直居中 如何在左右列之间留出一些空间 谢谢你的帮助!以下是css代码: body,html { margin:0; padding:0; color:#101010; font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; } p { margi
body,html {
margin:0;
padding:0;
color:#101010;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
p {
margin-top: 30px;
font-size: 16px;
line-height: 1.3em;
padding-bottom: 10px;
text-align: center;
color: #ffffff;
}
p a{
text-decoration: none;
color: #4e6f8c;
}
#wrapper {
width:960px;
margin:0 auto;
padding: 0px;
background:#fff;
}
#header {
padding:5px 10px;
background:#fff;
height:137px;
}
#nav {
padding:5px 10px;
background:#fff;
width: 960px;
height: 40px;
font-size: 15px;
color: #7c7c7c;
text-align: center;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 5px;
}
#nav li {
display:inline;
margin:0;
padding:0;
width:160px;
height: 45px;
float: left;
background-color: #f6f6f6;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#nav li:hover {
background-color: #df220f;
}
#nav li:hover a{
color: #ffffff;
text-decoration: none;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:link {
color: #7c7c7c;
text-decoration: none;
}
#nav a:visited{
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
#nav a:focus {
color: #ffffff;
text-decoration: none;
}
#nav a:active {
color: #ffffff;
text-decoration: none;
}
#leftcontent {
float:left;
width:710px;
height: 300px;
background:#df220f;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-image:url('./images/main_placeholder.png');
background-repeat:no-repeat;
background-position:center;
}
h2 {
margin:10px 0 0 20px;
color: #24389b;
font-size: 19px;
padding-bottom: 8px;
}
#rightcontent {
float:left;
width:250px;
background:#df220f;
height: 1%;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
height: 300px;
background-image:url('./images/side_logo.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#footer {
clear:both;
padding:5px 10px;
background:#fff;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
HTML编辑:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel = "stylesheet" type = "text/css"
href = "./style.css" media = "all" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="./images/logo.png" alt="Ultrabond Logo" /></div>
<div id="nav">
<ul>
<li><a href="Research">Home</a></li>
<li><a href="Research">Service<br />Details</a></li>
<li><a href="Research">Service<br />Request</a></li>
<li><a href="Research">Crack<br />Repair</a></li>
<li><a href="Research">FAQs</a></li>
<li><a href="Research">Contact</a></li>
</ul>
</div>
<div id="leftcontent">
</div>
<div id="rightcontent">
<p>Average cost of a windshield<br />replacement: $240</p><p>Average <i>repair</i> cost: $60</p><p>Just another reason why<br />windshield <i>repair</i> makes sense</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
更换挡风玻璃的平均成本:$240平均维修成本:$60这是挡风玻璃维修有意义的另一个原因
首先,你的链接不起作用
1) 不要为导航ul设置位置:绝对
2) 使用行高
规则()
3) 使用边距
或填充
。将marginleft:px
添加到#rightcontent
首先,您的链接不起作用
1) 不要为导航ul设置位置:绝对
2) 使用行高
规则()
3) 使用边距
或填充
。将marginleft:px
添加到#rightcontent
对于#nav li,您不需要执行显示:内联和浮动:左。我会使用float:left,然后您可以使用边距调整间距
不需要使用position:absolute on#nav ul,但是如果你要使用它,这里有一个技巧可以一直帮助我。如果在未专门设置为position:relative的容器中使用position:absolute,则绝对位置将设置为整个页面。但是,如果在容器div上设置了position:relative,则完全可以将子元素定位到该div中的任何位置
像这样:
#nav
{
width: 500px;
height: 100px;
position: relative;
}
#nav ul
{
position: absolute;
top: 20px;
right: 200px;
}
这会将#nav ul 20px从顶部向下放置,将200px从右侧放置在#nav div内。如果#nav div上没有位置:相对。。然后#nav ul将被放置在距页面顶部20px和距页面右侧200px的位置。对于#nav li,您不需要执行显示:内联和浮动:左。我会使用float:left,然后您可以使用边距调整间距
不需要使用position:absolute on#nav ul,但是如果你要使用它,这里有一个技巧可以一直帮助我。如果在未专门设置为position:relative的容器中使用position:absolute,则绝对位置将设置为整个页面。但是,如果在容器div上设置了position:relative,则完全可以将子元素定位到该div中的任何位置
像这样:
#nav
{
width: 500px;
height: 100px;
position: relative;
}
#nav ul
{
position: absolute;
top: 20px;
right: 200px;
}
这会将#nav ul 20px从顶部向下放置,将200px从右侧放置在#nav div内。如果#nav div上没有位置:相对。。然后#nav ul将被放置在页面顶部20px和页面右侧200px的位置。您的链接将导致错误页面。如果您无法恢复站点,那么做一些标记如何?谢谢大家。不确定网站何时会恢复,但希望很快。我继续向网站提出了下面列出的一些建议。我将继续编辑其余的代码。再次感谢。该网站似乎已恢复。Rich,如果你能“接受”那些试图帮助你的人的一些回答,那就太好了。。。你的链接会导致错误页面。如果你无法恢复你的站点,那么做一些标记怎么样?谢谢大家。不确定网站何时会恢复,但希望很快。我继续向网站提出了下面列出的一些建议。我将继续编辑其余的代码。再次感谢。该网站似乎已恢复。Rich,如果你能“接受”那些试图帮助你的人的一些回答,那就太好了。。。