CSS里面我最不会用的就是UL LI这些了~~~~现在想把5张图片作为菜单显示在一行,怎么也不行~~~我倒!!!大家帮帮忙!
这是页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MainWebPage</title>
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="menu">
<ul>
<li><img src="images/collection.jpg" width="183px" height="63px"/></li>
<li><img src="images/stores.jpg" width="183px" height="63px/></li>
<li><img src="images/aboutus.jpg" width="183px" height="63px/></li>
<li><img src="images/Press-Release.jpg" width="183px" height="63px/></li>
<li><img src="images/contact.jpg" width="183px" height="63px/></li>
</ul>
</div>
<div id="show"></div>
<div id="indexlogo"><img src="images/indexlogo.jpg" width="300px" height="46px/></div>
<div id="copyright">Copyright ©2009 Oxana & Company All rights reserved.</div>
</div>
</body>
</html>这是CSS:
body {background-color: #ffffff;font:14px Verdana, Arial, Helvetica, sans-serif; margin:0px; color:#999999}#main{margin:auto; text-align:center; width:915px}#indexlogo{ text-align:right; margin:10px 0px 0px 0px}
#copyright{font-weight:bold;margin:20px 0px 10px 0px;font-size:12px}#menu{padding:0px}
#menu ul{list-style:none; margin:0px;}
#menu ul li{float:left;margin:0px;}
#show{margin:5px 0px 0px 2px;width:915px; color:#0000FF}
这是页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MainWebPage</title>
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="menu">
<ul>
<li><img src="images/collection.jpg" width="183px" height="63px"/></li>
<li><img src="images/stores.jpg" width="183px" height="63px/></li>
<li><img src="images/aboutus.jpg" width="183px" height="63px/></li>
<li><img src="images/Press-Release.jpg" width="183px" height="63px/></li>
<li><img src="images/contact.jpg" width="183px" height="63px/></li>
</ul>
</div>
<div id="show"></div>
<div id="indexlogo"><img src="images/indexlogo.jpg" width="300px" height="46px/></div>
<div id="copyright">Copyright ©2009 Oxana & Company All rights reserved.</div>
</div>
</body>
</html>这是CSS:
body {background-color: #ffffff;font:14px Verdana, Arial, Helvetica, sans-serif; margin:0px; color:#999999}#main{margin:auto; text-align:center; width:915px}#indexlogo{ text-align:right; margin:10px 0px 0px 0px}
#copyright{font-weight:bold;margin:20px 0px 10px 0px;font-size:12px}#menu{padding:0px}
#menu ul{list-style:none; margin:0px;}
#menu ul li{float:left;margin:0px;}
#show{margin:5px 0px 0px 2px;width:915px; color:#0000FF}
<li><img src="images/stores.jpg" width="183px" height="63px/></li>
<li><img src="images/aboutus.jpg" width="183px" height="63px/></li>
<li><img src="images/Press-Release.jpg" width="183px" height="63px/></li>
<li><img src="images/contact.jpg" width="183px" height="63px/></li>
要加这句吧
可以变横排<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>水平导航条</title>
<meta http-equiv="Content-Type" Type="text/html charset=GB2312" />
<style type="text/css">
ul#nav {
list-style-type: none;
margin:0;
padding:0;
}
ul#nav li {
float:left;
margin:0px 20px;
padding:0px;
}
ul#nav li a{
display:block;
width:100px;
height: 28px;
line-height: 28px;
background-color:#ccc;
text-decoration:none;
text-align:center;
}
ul#nav li a:hover {
background-color:#333;
color: #fff;
}
</style>
</head><body>
<ul id="nav" >
<li id="first"><a href="/">Water</a></li>
<li id="second"><a href="/">Fire</a></li>
<li id="three"><a href="/">Air</a></li>
<li id="four"><a href="/">Earth</a></li>
<li id="five"><a href="/">Beyond</a></li>
</ul></body>
</html>
这样可以了,楼主本来css对的了,是div标签写错了而已。写漏了。
不过如果不会用的话,还是有必要学习一下的。写惯了你会发现这样写简单高效,代码精简。
#menu ul{list-style:none; margin:0px; margin-left:300px;}
就可以了啊
如果调li的间距,在li中写MARGIN-LEFT=?就可以了啊
不是这个问题~~~我看CSS和HTML都没问题~可是就不行~~我倒~~~不在一行是个问题~还有就是错乱~~跟其他几个层都错落了~
换个软件运行下是不是你的CSS样式库 不能解析
我用opera9,firefox3,ie7测试都没有其它问题。