CSS+DIV练手-公司
这是第三个了，感觉兴致来了，就做一个练练手。呵呵
界面：
CSS+DIV源码：
<!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>css练手</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#cad7df url(bg.jpg) repeat-x;/* 背景色、水平重复的背景图片 */
}
#container{
width:758px;
}
#banner{
background:url(logo.jpg) no-repeat;
height:62px;
margin:0px 0px 1px 0px;
padding-top:0px;
}
#banner ul{
list-style:none;
position: absolute;
left: 540px;
top: 4px;
padding: 0px;
margin: 0px;
}
#banner li{
float:left;
text-align:center;
padding:0px 0px 0px 25px;
}
#banner a:link, #banner a:visited {
color: #4A6F87;
text-decoration: none;
}
#banner a:hover {
color: white;
text-decoration: none;
}
#left{
width:158px;
float:left;
}
#left #navigation{
width:158px;
margin:0px 0px 10px 0px;
padding:0px;
}
#left #navigation ul{
margin: 0px;
padding: 0px;
border-top: 5px solid #CAD7DF;
list-style:none;
}
#left #navigation ul li{
border-bottom: 1px solid #CAD7DF;
}
#left #navigation ul li a{
display:block; /*以块区模式显示a，然后设置icon为背景，并规定其位置，然后再设置文字位置*/
background:url(icon1.gif) no-repeat 13px 11px;
padding:5px 0px 2px 25px;
}
#left #navigation li a:link,#left #navigation li a:visited {
background-color: #7591A3;
color: white;
text-decoration:none;
}
#left #navigation li a:hover{ /* 鼠标经过时 */
color:#003e66; /* 改变文字颜色 */
background:#aacbe0 url(icon2.gif) no-repeat 13px 11px;/* 改变背景图片颜色 */
}
#left #search .text{
width:80px;
background:transparent;
border:1px solid #7591A3;
}
#left #search .btn{
border: 1px solid #7591A3;
background: transparent;
font-size: 12px;
height: 19px;
}
#main{
float:left;
width:600px;
margin:0px;
padding:0px;
background-color:white;
}
#main #news h3{
margin:20px 0px 0px 20px;
padding:0px;
font-size:16px;
}
#main #news h3 a{
display:block;
background:url(icon3.gif) no-repeat 1px 7px;
padding:0px 0px 0px 10px;
}
#main #news h3 a:link, #main #news h3 a:visited {
color: black;
text-decoration: none;
}
#main #news h3 a:hover{
color:#7591a3;
text-decoration:underline;
}
#main #list{
float:left;
margin:7px 0px 4px 0px;
width:340px;
padding:0px 0px 0px 28px;
}
#main #list h4{
font-size: 12px;
background: #E0E7EC url(icon4.gif) no-repeat 7px 8px;
padding: 3px 0px 2px 17px;
margin-bottom:5px;
}
#main #list p.date{
padding: 0px 0px 5px 2px;
font-weight: bold;
color: #014E68;
margin:0px;
}
#list ul{
margin:0px 0px 6px 40px;
padding:0px;
list-style-type:disc;
}
#main #list ul li a:link,#main #list ul li a:visited,#main #list p.more a:link,#main #list p.more a:visited {
color: #333;
text-decoration: none;
}
#main #list ul li a:hover,#main #list p.more a:hover {
color: #00A9E7;
text-decoration: underline;
}
#main #list p.more{
display:block;
background:url(icon5.gif) no-repeat 5px 5px;
padding:0px 0px 0px 13px;
}
#main #right{
float: left;
width: 180px;
margin: 23px 0px 5px 30px;
padding: 0px;
border-left: 1px solid #7591A3;
}
#main #right h3{
margin:0px;
padding:1px 0px 1px 15px;
background:url(right_right.gif) no-repeat;
color:white;
}
#main #right p.date2{
background: #E0E7EC url(icon6.gif) no-repeat 5px 7px;
margin: 7px 15px 3px 7px;
padding: 1px 0px 1px 15px;
font-weight: bold;
}
#main #right p.content{
margin: 0px 15px 3px 7px;
padding: 0px 0px 1px 0px;
}
#main #right p.more2{
background: url(icon5.gif) no-repeat 5px 5px;
margin: 0px 15px 3px 7px;
padding: 0px 0px 1px 15px;
}
#main #right p.more2 a:link,#main #right p.more2 a:visited {
color: #333;
text-decoration: none;
}
#main #right p.more2 a:hover {
color: #00A9E7;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">英文版</a></li>
</ul>
</div>
<div id="left">
<div id="navigation">
<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>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">项目介绍</a></li>
<li><a href="#">日程安排</a></li>
</ul>
</div>
<div id="search">
<form>
查找：<input type="text" class="text">
<input type="button" class="btn" value="搜">
</form>
</div>
</div>
<div id="main">
<div id="top">
<img src="banner.jpg">
</div>
<div id="news">
<h3><a href="#">新闻快递：公司股票于昨日在美国纳斯达克上市</a></h3>
</div>
<div id="list">
<h4><span>公告栏</span></h4>
<p class="date">2012.12.12</p>
<ul>
<li><a href="#">公司例会确定了新的项目筹备组</a></li>
<li><a href="#">i、g、t三人当选公司新任董事会骨干</a></li>
<li><a href="#">对股票的运作做了详细的规划</a></li>
<li><a href="#">lh担任办公室重要职务，茁壮成长</a></li>
</ul>
<p class="date">2012.12.12</p>
<ul>
<li><a href="#">公司成立25周年纪念，领导发表重要讲话</a></li>
<li><a href="#">新一轮项目筹备工作开始启动</a></li>
</ul>
<p class="more"><a href="#">more</a></p>
<h4><span>前沿技术</span></h4>
<p class="date">2012.12.12</p>
<ul>
<li><a href="#">清华大学电子工程系牛人做报告，气氛融洽</a></li>
<li><a href="#">晾衣杆实现高增益、高信噪比波束自动成形天线</a></li>
</ul>
<p class="more"><a href="#">more</a></p>
<h4><span>资源下载</span></h4>
<p class="date">2012.12.12</p>
<ul>
<li><a href="#">时时语音和图象处理功能的纸箱</a></li>
<li><a href="#">自动收发装置更新，电力充足</a></li>
</ul>
<p class="more"><a href="#">more</a></p>
</div>
<div id="right">
<h3>English Letter</h3>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
<p class="date2">2012.12.12</p>
<p class="content">Auditorium Stage</p>
<p class="more2"><a href="#">more</a></p>
</div>
</div>
</div>
</body>
</html>