<!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>版权:© 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;
}
分享到:
相关推荐
DIV+CSS页面布局,适合刚开始学习的初学者,代码简单易懂
第一步:规划网站,本...第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决IE浏览器的显示BUG;
国外的div页面布局,和个性,很好看,有兴趣的拿去看看吧,能激发你的灵感。
div+css页面布局.rar
div + css布局,让页面布局更简单。
网页布局简单案例 通过简单的更改几行样式实现通篇布局的调整
如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要...
一本很好的实例讲解书籍,每个安全均按照效果图切割、页面效果分析、html代码编写,最终css页面布局实现进行讲解。即使刚入门的新手,也可以一步步轻松实现复杂的css页面布局。
关于页面设计方面的。大家可以看看。DIV+CSS标准化网页布局.ppt。
用DIV+CSS布局网页的一个实例HTML代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
div+css 网页布局教程+例题... HTML格式...
此教程文字清晰,内容讲的详实,可以很容易让我们了解div+css布局的优缺点,并且里面讲的很多知识点都是我们在css手册中无法掌握的,看了它我想我们就会明白个八九成了,比如游览器兼容,float浮动知识透析等等……
SEO优化中的DIV+CSS命名规则,能减少DIV css,增加加载速度,更加有利于搜索的收录
介绍DIV和CSS的使用方法和常用技巧。DIV+CSS页面布局基础知识,适用于技术与平台中心无css基础研发人员
DIV+CSS 页面布局,压缩包含有源文件和说明性技术文档,适合初学者学习借鉴,亲测有效,可放心下载!
由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的。 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或...
div+css 布局的一个减肥产品排行榜的页面模版 解压密码:www.hibeijing.net
DIV+CSS布局大全,DIV + DSS布局,让你轻松搞好页面!