div+css页面布局
<!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>用户:&nbsp;<input type="text" name="username" id="input"/></p><p>密码:&nbsp;<input type="password" name="password" id="input"/></p><p><input type="submit" value="登陆" />&nbsp;&nbsp;<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;}
页:
[1]