div+css页面布局

最新推荐文章于 2022-05-16 00:41:46 发布

dzgwt2006

最新推荐文章于 2022-05-16 00:41:46 发布

阅读量87

点赞数

<!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=gb2312" />
<title>英语系网站</title>
<link href="english.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="body">

           <div id="header"><span class="titleleft"><a href="7717060@sina.com">联系我们</a></span><span class="titleright">在线人数</span></div>

		   <div id="barner">
		   	<img src="banner.jpg" width="860" height="100" />
           </div>

		     <div id="links">
		       <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>网上聊天</li>
			     <li>最新留言</li>
			  </ul>	
      </div>
		       <div id="newsArea"><div id="title"><span class="titleleft">系内通知</span><span class="titleright">更多消息</span></div></div>
			   <div id="afficheArea"><div id="title"><span class="titleleft">系内新闻</span><span class="titleright">更多内容</span></div></div>
			   <div id="registerArea">
			      <div id="title"><span class="titleleft">用户登陆</span></div>
				  <form action="1.html" method="post" />
				  <p>用户: <input type="text" name="username" id="input"/></p>
				  <p>密码: <input type="password" name="password" id="input"/></p>
				  <p><input type="submit" value="登陆" />  <input type="submit" value="注册" /></p>
				  </form>
	           </div>
			  <div id="instroduceArea"><div id="title">
			       <span class="titleleft">英语系简介</span></div>
				    <p>英语系建立于2004年,英语系建立于2004年英语系建立于
					英语系建立于2004年英语系建立于2004年英语系建立于2004年
					英语系建立于2004年英语系建立于2004年英语系建立于2004年
					英语系建立于2004年英语系建立于2004年英语系建立于2004年.</p>
			  </div>
			  <div id="pictureArea"><div id="title"><span class="titleleft">学生风采</span><span class="titleright">更多内容</span></div></div>
			  <div id="left"><div id="title"><span class="titleleft">部门活动</span><span class="titleright">更多内容</span></div></div>
			  <div id="middle"><div id="title">  <span class="titleleft">文件下载</span><span class="titleright">更多内容</span></div></div>
			  <div id="right"><div id="title"><span class="titleleft">最新留言</span><span class="titleright">更多内容</span></div></div>
			  <div id="footer">
			    <p>版权:&copy XXXXXXXXXXXXX学院-英语系</p>
				<p>Copyright: English Department</p>
			  </div>
   </div>
</body>
</html>

/* CSS Document */
body{
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration: none;
}

a:link{ color: #000; text-decoration: none;background-color:inherit;}
a:visited{ color: #000; text-decoration: none;background-color:inherit;}
a:hover{ color: #014898; text-decoration: none;background-color:inherit;}
a:active{ color: #000; text-decoration: none;background-color:inherit;}

#body{
margin: 0 auto;
width:860px;
height:1200px;
border:1px solid #000000;
position:relative;
}

#header{
width:860px;
height:20px;
background:#00499c;
font-size:14px;
}

#barner{
width:860px;
height:100px;
background:#999999;
}

#links{
width:860px;
height:25px;
background:#00499c;
border-bottom:4px solid #999999;
}

#links ul{
padding:4px;
margin:0;
}

#links ul li{
float:left;
display:block;
width:90px;
text-decoration:none;
font-size:14px;
color:#FFFFFF;

}

#newsArea{
width:240px;
position:absolute;
top:160px;
left:10px;
height:400px;
border:1px solid #000000;
}

#title{
	width:100%;
	position:absolute;
	top:0px;
	height:20px;
	border-bottom:1px solid #000000;
	font-size:12px;
	background:#00499c;
	color: #FFFFFF;
}

#afficheArea{
width:350px;
height:250px;
position:absolute;
top:160px;
left:260px;
border:1px solid #000000;
}


#pictureArea{
width:840px;
height:200px;
position:absolute;
top:575px;
left:10px;
border:1px solid #000000;
}


#registerArea{
width:230px;
height:250px;
position:absolute;
top:160px;
left:621px;
border:1px solid #000000;
text-align:left;

}


#registerArea p{
width:200px;
text-align:center;

margin-left:-20px;
padding-top:20px;

}


#instroduceArea{
width:590px;
height:140px;
position:absolute;
top:420px;
left:260px;
border:1px solid #000000;
font-size:16px;
}


#instroduceArea p{
padding:30px 37px 4px 27px;
}
#input{ width:110px; margin-top:5px; border:#999 1px solid; height:15px;}

#registerArea p
{
position:relative;
left:30px;
top:25px;
}

#left
{
width:270px;
height:290px;
border:1px solid #000000;
position:absolute;
top:790px;
left:10px;
}


#middle
{
width:280px;
height:290px;
border:1px solid #000000;
position:absolute;
top:790px;
left:290px;
}


#right
{
width:270px;
height:290px;
border:1px solid #000000;
position:absolute;
top:790px;
left:580px;
}


#footer{
width:860px;
height:100px;
position:absolute;
top:1100px;
border-top:1px solid #000000;
background:#00499c;
}

#footer p{
text-align:center;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-top:10px;
}

/*-----------------------------------------------*/
.titleleft{
float:left;
padding-left:10px;
padding-top:2px;
}
.titleright{
float:right;
padding-right:10px;
padding-top:2px;
}
.titlecenter{
float:none;
text-align:center;
}