效果图：

代码：

<!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. js生成随机数的方法小结

    js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...

  2. ORACLE基本SQL语句-添加更新数据函数篇

    一.添加数据 /*添加数据*/insert into STU values('stu0004','赵一',18,1,"kc0004");insert into STU(STU_ID ...

  3. 解决MacOS Terminal打开慢的问题

    用了Mac有一段时间了,突然发现Terminal打开奇慢,每次打开都显示logining...,打开大概要个五六秒的时间,以前打开都是瞬间打开的啊,这对于我们这种追求速度的程序员怎么受的了呢.开始一直 ...

  4. C#中的委托是什么？

    概述 委托类似C++中的函数指针,但是又有所不同.在C++中,函数指针不是类型安全的,它指向的是内存中的某一个位置,我们无法判断这个指针实际指向什么,对于参数和返回类型就更难以知晓.而.NET的委托则 ...

  5. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  6. ASP.NET MVC 4.0的Action Filter

    有时候你想在调用action方法之前或者action方法之后处理一些逻辑,为了支持这个,ASP.NET MVC允许你自定义创建action过滤器.Action过滤器是自定义的Attributes,用来 ...

  7. 文成小盆友python-num9 socket编程

    socket编程 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思 ...

  8. UILabel自适应高度和自动换行

    码: //初始化label UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)]; //设置自动行数与字符换行 [l ...

  9. 为什么ELF文件的加载地址是0x8048000

    在一个进程的虚拟地址空间中,ELF文件是从0x8048000这个地址开始加载的,为什么会是这个地址? 回答:用命令ld --verbose可以看到0x08048000,ld的默认脚本用这个地址作为EL ...

  10. js限制input只能输入有效的数字，有且只有一个小数点，第一个不能为小数点-备

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...