效果图：

代码：

<!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;
}

iCIBA简单案例的更多相关文章

  1. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  2. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  3. [Design Pattern] Front Controller Pattern 简单案例

    Front Controller Pattern, 即前端控制器模式,用于集中化用户请求,使得所有请求都经过同一个前端控制器处理,处理内容有身份验证.权限验证.记录和追踪请求等,处理后再交由分发器把请 ...

  4. [Design Pattern] Observer Pattern 简单案例

    Observer Pattern,即观察者模式,当存在一对多关系,例如一个对象一有变动,就要自动通知被依赖的全部对象得场景,属于行为类的设计模式. 下面是一个观察者模式的简单案例. Observer ...

  5. [Design Pattern] Mediator Pattern 简单案例

    Meditor Pattern,即调解模式,用一个调解类类处理所有的沟通事件,使得降低多对象之间的沟通难度,属于行为类的设计模式.为了方便理解记忆,我也称其为,沟通模式. 下面是一个调解模式的简单案例 ...

  6. [Design Pattern] Iterator Pattern 简单案例

    Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...

  7. [Design Pattern] Command Pattern 简单案例

    Command Pattern, 即命令模式,把一个命令包裹在一个对象里面,将命令对象传递给命令的执行方,属于行为类的设计模式 下面是命令模式的一个简单案例. Stock 代表被操作的对象.Order ...

  8. [Design Pattern] Proxy Pattern 简单案例

    Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...

  9. [Design Pattern] Flywight Pattern 简单案例

    Flywight Pattern, 即享元模式,用于减少对象的创建,降低内存的占用,属于结构类的设计模式.根据名字,我也将其会理解为 轻量模式. 下面是享元模式的一个简单案例. 享元模式,主要是重用已 ...

随机推荐

  1. eclipse中安装genymotion

    在eclipse中安装genymotion.安装genymotion需要先安装virtualbox.选择Help选项中的install new software 然后点击进去点击ADD,在locati ...

  2. javascript div元素后追加节点

    例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...

  3. （原）torch的apply函数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221633.html torch中的apply函数通过可以不断遍历model的各个模块.实际上其使用的 ...

  4. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  5. Xcode本地文件 提交svn 的明细

    XXXXX.xcscmblueprint  这个文件不用提交svn

  6. ISO7816通讯协议在工控主板EM9160中的实现方案

    在新的国家电网智能终端相关标准中,规定了通过专门的加密芯片来保证设备数据安全性的方法,而设备主控单元与加密芯片采用了广泛应用的ISO7816通讯协议.工控主板EM9160为了适应这一新的技术需求,对其 ...

  7. python 操作 office

    首先介绍下office win32 com接口,这个是MS为自动化提供的操作接口,比如我们打开一个WORD文档,就可以在里面编辑VB脚本,实现我们自己的效果.对于这种一本万利的买卖,Python怎么能 ...

  8. pidof,pgrep进程名查PID, /proc目录由pid查进程名

    pidof,pgrep进程名查PID cat /proc/4990/status|grep "name",由pid查进程名

  9. fstream读写UNICODE文件

    今天遇到要处理UNICODE文件的情况,网上找了一圈都是读取出字节,再转的,这个不方便啊!想起了有codecvt这么个东西,顺藤摸瓜,找到了方法. locale utf16(locale(" ...

  10. Best Cow Line (POJ 3617)

    题目: 给定长度为N的字符串S,要构造一个长度为N的字符串T.起初,T是一个空串,随后反复进行下列任意操作. ·从S的头部删除一个字符,加到T的尾部 ·从S的尾部删除一个字符,加到T的尾部 目标是要构 ...