效果图：

代码：

<!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. 微信企业号 出现redirect_uri unauthorized 50001 解决办法

    在企业号内获得用户信息时,需要对域名授权,如果不授权会提示: redirect_uri unauthorized  50001 错误. 通常,我们会在 输入我们的授权域名. 今天在企业号内又新建了一个 ...

  2. SqlServer 开启或关闭数据库主键自增

    可用作删除一行主键数据库,在还原数据行,或者删掉后,被伤处的主键还可以利用 --开启当前表的可复制功能,仅在当前回话中有效 SET IDENTITY_INSERT  dbo.PDAUserInfo O ...

  3. Swift中类的两段式构造(类的构造过程)

    import Foundation /* 类的构造需要两个阶段: 第一阶段: 1.程序调用子类的某个构造器 2.为实例分配内存, 此时实例的内存还没有被初始化 3.指定构造器确保子类定义的所有实例存储 ...

  4. MyEclipse笔记（2）：debug的使用

    对于程序代码而言,学会调debug是重中之重,依此,掌握该技巧 以算1到50的和的代码为例: package com.front.action; public class debug { public ...

  5. uva 10994 - Simple Addition

    //组合数学 //计算sum{i从右往左数的第一个非0数字,p<=i<=q}. #include <cstdio> typedef long long ll; ll sum(l ...

  6. centos6.7下 编译安装MySQL5.7

    centos6.7下编译安装MySQL5.7 准备工作 #-----依赖包及MySQL和boost安装包----- #yum包安装: shell> yum -y install gcc-c++ ...

  7. vagrant 配置文件简析

    #自定义box名字 config.vm.box = "website" #以ip192.168.33.10访问 config.vm.network "private_ne ...

  8. ubuntu安装过程未设置root密码

  9. WCF基于Cookie回传的系列（概述）

    1  WCF的基本知识(不作细述,园子里有很多的经典的文章系列) 2 WCF的执行过程 3 让服务通信像浏览器发送请求应答一样回传Cookie,并实现Cookie在不同的服务间共享 4  基于共享后的 ...

  10. RazorPad中的ModelProvider

    在RazorPad的右侧 我们可以提供模型的结构,Json数据结构体 当提供多个的时候 是Json中的数组 [{     Name: "NI" }, {     Name: &qu ...