效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<link rel=”stylesheet” href=”css/iCIBA.css” />
</head>
<body>
<div class=”header”>
<div class=”icon”></div>
<div class=”nav”>
<ul>
<li>首页</li>
<li class=”selected”>词典</li>
<li>句库</li>
<li>翻译</li>
<li>汉语</li>
<li>资讯</li>
<li>背单词</li>
<li>免费英语</li>
<li>流利口语</li>
<li>词霸下载</li>
</ul>
</div>
<div class=”serch”>
<input type=”text” class=”enter”/><input type=”button” class=”find” value=”查一下”/>
<input type=”button” class=”ad” value=”免费90天商务英语课”/>
</div>
</div>
<div class=”left”>
<dl>
<dt class=”leftnav”>基础知识</dt>
<dd class=”leftside”>例句用法</dd>
<dd class=”leftside”>专业释义</dd>
<dd class=”leftside”>百科</dd>
</dl>
<dl>
<dt class=”leftnav”>查词历史</dt>
<dd class=”leftside”>CSS</dd>
<dd class=”leftside”>金色</dd>
<dd class=”leftside”>通栏</dd>
<dd class=”leftside”>推荐</dd>
<dd class=”leftside”>快捷</dd>
<a href=””><dd class=”leftside”>查看更多>></dd></a>
</dl>
<dl>
<dt class=”leftnav”>常用工具</dt>
<dd class=”leftside”>生词本</dd>
<dd class=”leftside”>背单词<a class=”new” href=””>new</a></dd>
<dd class=”leftside”>猜猜看</dd>
<dd class=”leftside”>热词排行</dd>
<dd class=”leftside”>写作修改</dd>
</dl>
</div>
<div class=”middle”></div>
<div class=”right”></div>
</body>
</html>
css代码：
body,li,ul,div,input,button,dl,dt,dd{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
body{
width: 973px;
height: 84px;
margin:0 auto;
}
.header{
background-color: #f6f9fe;
}
.icon{
float: left;
width: 114px;
height: 72px;
margin: 10px;
background: url(../img/icon.png) no-repeat;
}
li{
display: inline;
margin: 10px;
}
.nav{
font-size: 14px;
font-family: “微软雅黑”;
padding: 10px;
}
.enter{
height: 34px;
width: 500px;
border: 1px solid #246ed9;
margin-left: 10px;
outline: none;
}
.find{
height: 36px;
width: 110px;
border: 1px solid #246ed9;
background-color: #246ed9 ;
}
.ad{
height: 36px;
width: 174px;
font-size: 12px;
color: #0070f2;
border: 1px solid #d8d9db;
background-color: #ffffff;
}
.left{
width: 110px;
height: 487px;
position: absolute;
border:1px solid #999999;
}
.leftnav{
font-family: “微软雅黑”;
margin: 10px;
}
.leftside{
margin: 5px;
}
.middle{
width: 650px;
height: 439px;
position: absolute;
left: 320px;
border:1px solid #999999;
background: url(../img/middle.png) no-repeat;
}
.right{
width: 178px;
height: 390px;
position: absolute;
left: 990px;
border:1px solid #999999;
background: url(../img/right.png) no-repeat;
}
