人机交互第五次作业
1.
<!--双列布局-->
<html>
<head>
<style type="text/css">
body{background-color:grey;
text-align:center;
margin:0;
padding:0;}
#wrapper{background:white;
width:800px;
margin:0 auto;
text-align:left;}
#branding{background:#aaaaaa;
height:120px;
line-height:120px;
font-size:2em;
text-align:center;
}
#footer{background:black;
color:white;
height:80px;
line-height:80px;
font-size:1.5em;
text-align:center;
clear:both;}
#content{background:yellow;
width:619px;
float:right;}
#mainNav{
width:180px;
float:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
北京联合大学
</div>
<div id="content">
内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="mainNav">
<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>
</ul>
</div>
<div id="footer">
Copyright@buu.edu.cn
</div>
</div>
</body>
</html>
2.
<!--横向-->
<html>
<head>
<style type="text/css">
body{background-color:grey;
text-align:center;
margin:0;
padding:0;}
#wrapper{background:white;
width:800px;
margin:0 auto;
text-align:left;}
#branding{background:#aaaaaa;
height:120px;
text-align:center;
position:relative;}
#branding div{font-size:2em;
line-height:100px;}
/**********/
#branding ul{list-style:none;
margin:0;
padding:0;
position:absolute;
right:0;
bottom:0;}
#branding ul li{float:left;}
#branding ul a{
text-decoration:none;
background:black;
color:white;
line-height:2em;
border-right:solid white 1px;
padding:0 2em;
float:left;
}
#branding ul a:hover{background:#bbbbbb;
color:white;}
/***********/
#footer{background:black;
color:white;
height:80px;
line-height:80px;
font-size:1.5em;
text-align:center;
clear:both;}
#content{background:yellow;
width:500px;
float:right;}
#mainNav{
width:180px;
float:left;}
#mainNav ul{list-style:none;
margin:0;
padding:0;}
#mainNav ul a{
text-decoration:none;
background:black;
color:white;
display:block;
width:150px;
line-height:2em;
border-bottom:solid white 1px;
text-indent:5px;
}
#mainNav ul a:hover{background:#bbbbbb;
color:white;}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<div>北京联合大学</div>
<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>
</ul>
</div>
<div id="content">
内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="mainNav">
<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>
</ul>
</div>
<div id="footer">
Copyright@buu.edu.cn
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号