刚才发的图对应的源码

来源：互联网发布：首尔知乎编辑：程序博客网时间：2024/06/02 12:32

<!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>div+css布局</title>
<style>
#n li{
float:left;
}
#n li a{
display:block;
padding:4px;
margin:17px;
color:#FF0;
width:140px;
height:28px;
text-align:center;
background-color:#3F6;
font-size:28px;
}
#n li a:hover{
background-color:#39C;
color:#30C;
}
#top{
background-image:url(903b81537d847cc6f67a58ffdd422563.jpg);
border:1px solid #30C;
width:100%;
height:130px;
float:top;
}
#bottom{
background-color:#3C3;
border:1px solid #30C;
width:100%;
height:300px;}
#bottom-left{
background-color:#CF3;
width:30%;
height:200px;
margin:15px;
float:left;
}
#bottom-right{
background-color:#F39;
width:50%;
height:200px;
margin:15px;
float:right;
}
#foot1{
background-color:#C69;
width:100%;
height:150px;
}
#foot2{
background-color:#639;
width:100%;
height:50px;
}
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="top">
<div id="n">
<ul>
<li><a href="#">酒店概况</a></li>
<li><a href="#">客房</a></li>
<li><a href="#">餐饮</a></li>
<li><a href="#">商务会议</a></li>
<li><a href="#">酒店服务</a></li>
<li><a href="#">订房表</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
<div id="clear"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-right"></div>
</div>
<div id="foot1"></div>
<div id="foot2"></div>
</body>
</html>

0 0