效果图：

代码：

<!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. Access to the path '....' is denied.解决方法

    昨天公司项目迁移服务器,从自己服务器迁移到阿里云服务器,部署完成后发现有一个页面要读取磁盘上的静态文件就报错了... 如图: 解决办法: 在 Web.Config 的 <System.Web&g ...

  2. DataGrid简单数据绑定实例2

    1.Image列显示: 后台绑定: //获取文件夹下的图片 string path = @"K:\Picture\jpg"; private void Button_Click(o ...

  3. Android Intent到底能做些什么

    Android Intent到底能做些什么 原文:http://www.toutiao.com/i6348296465147757058/?tt_from=mobile_qq&utm_camp ...

  4. ORACLE中使用SQL的正则表达式判断邮箱格式

    在数据库中,有时需要判断字符串是否是一个或者多个邮箱格式,可以使用如下语句判断: ) FROM dual WHERE regexp_like(v_mail,'^\w+((-\w+)|(\.\w+))* ...

  5. java下udp的DatagramSocket 发送与接收

    发送 package cn.stat.p4.ipdemo; import java.io.BufferedReader; import java.io.IOException; import java ...

  6. 设置cas server使用http非安全协议

    目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...

  7. q3 bsp随笔(2)

    看完了q3的port生成,以及pvs的生成 做个记录 由于q3 bsp树生成时,将场景中所有的brush平面都参与, 所以就可用bsp树的分割平面来切分port port从根节点开始,初始windin ...

  8. Qt之信号连接，你Out了吗？

    在遇到多信号问题的时候,你是否经常会连接多个槽函数呢?如果你的答案是绝对的,那么你已经Out很久了.多信号连接多个槽,实现不同的槽就在潜意识的加大程序的开销!那么为什么不去链接同一个槽呢?     今 ...

  9. How can I save HICON to an .ico file

    refer:http://stackoverflow.com/questions/2289894/how-can-i-save-hicon-to-an-ico-file answer1: #inclu ...

  10. mysql windows 下导入大文件

    先进入你的mysql bin目录 cd D:/php/mysql/bin 输入命令 mysql -u 用户名 -p 密码 数据库名 < 文件路径                          ...