HTML5练习4
1、菜单条
主要代码
<!doctype html>
<html>
<head> <meta charset="utf-8">
<title>无标题文档</title>
<style>
.a1
{
background-color:#F00;
width:100px;
height:40px;
top:100px;
left:30%;
position:absolute;
overflow:hidden;
}
.a2
{
background-color:#F00;
width:100px;
height:40px;
top:100px;
left:30%;
position:absolute;
}
.a3
{
width:100px;
height:120px;
top:40px;
position:absolute;
}
.a4
{
width:100px;
height:40px;
background-color:#F3F;
overflow:hidden;
position:absolute;
}
.a41
{
width:100px;
height:40px;
background-color:#F3F;
position:absolute;
}
.a5
{
background-color:#90C;
width:100px;
height:40px;
top:40px;
position:absolute;
overflow:hidden;
}
.a51
{
background-color:#90C;
width:100px;
height:40px;
top:40px;
position:absolute;
}
.a6
{
background-color:#FF0;
width:100px;
height:40px;
top:80px;
position:absolute;
overflow:hidden;
}
.a61
{
background-color:#FF0;
width:100px;
height:40px;
top:80px;
position:absolute;
}
.a7
{
width:100px;
height:120px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
.a8
{
width:100px;
height:80px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
.a9
{
width:100px;
height:40px;
left:100%;
top:0px;
position:absolute;
background-color:#36F;
}
</style>
</head> <body>
<div class="a1" onmouseover="className='a2'" onmouseout="className='a1'">
搜索引擎
<div class="a3">
<div class="a4" onmouseover="className='a41'" onmouseout="className='a4'">
百度
<div class="a7"><a href="http://www.baidu.com">baidu</a></div>
</div>
<div class="a5" onmouseover="className='a51'" onmouseout="className='a5'">
搜狗
<div class="a8"><a href="www.sougo.com">sougo</a></div>
</div>
<div class="a6" onmouseover="className='a61'" onmouseout="className='a6'">
360
<div class="a9"><a href="www.360.com">360</a></div>
</div>
</div>
</div>
</body>
</html>
结果：
HTML5练习4的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
随机推荐
- 【bzoj3881】[Coci2015]Divljak AC自动机+树链的并+DFS序+树状数组
题目描述 Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...
- Python之Numpy数组拼接，组合，连接
转自:https://www.douban.com/note/518335786/?type=like ============改变数组的维度==================已知reshape函数 ...
- MT【109】线面角最大时为二面角平面角
解答:如图设C到$\alpha$面的距离为$d_1,C_1$到虚线距离为$d_2$ 所求距离$d=d_1+d_2=|AC|sin\theta+|CC_1|cos\theta=4\sqrt{2}sin\ ...
- Crash dump进程信息
linux下 比较简单,这里不在说明, windows下 相对复杂一点,用SetUnhandledExceptionFilter 来捕获 MiniDumpWriteDump 来写dmp文件,这种方法还 ...
- 学习Spring Boot：（十七）Spring Boot 中使用 Redis
前言 Redis 1 是一个由Salvatore Sanfilippo写的key-value存储系统. edis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日 ...
- 【BZOJ1295】[SCOI2009]最长距离（最短路）
[BZOJ1295][SCOI2009]最长距离(最短路) 题面 BZOJ 洛谷 题解 这题很妙啊. 我们枚举一个点,只需要考虑到他的最远点就行了,显然只需要考虑一个点即可.那么这两个点之前联通的最小 ...
- 关于ehcache配置中timeToLiveSeconds和timeToIdleSeconds的区别
在使用ehcache框架时,timeToLiveSeconds和timeToIdleSeconds这两个属性容易混淆,今天有空就记录一下,以防之后又忘记了. 首先来说明一下这两个属性分别有什么作用:( ...
- CSS 笔记(一)
学习了张鑫旭大神的浮动教程,记一下笔记. 浮动最开始是为了文字环绕图片效果. 浮动会破坏父元素的包裹. 清除浮动:在父元素加上clearfix(after不兼容ie6 7,zoom为ie6 7下方法) ...
- Java基础-赋值运算符Assignment Operators与条件运算符Condition Operators
Java基础-赋值运算符Assignment Operators与条件运算符Condition Operators 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.赋值运算符 表 ...
- vim文本删除方法 Linux
1,先打开某个文件: vim filename 2,转到文件结尾 在命令模式输入 G 3,转到10行 在命令模式输入 10G 4,删除所有内容:先用G 转到文件尾,然后使用下面命令: :1, .d ...