div渐变色彩条
2016-05-21 22:19
162 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div效果图</title> <style type="text/css">/*使用内嵌式样式表css*/ .d/*定义一个class,设置共同属性*/ { width:20px;/*设置d的宽*/ height:40px;/*设置高*/ transition: width 0.2s;/*宽变化延迟0.2秒*/ box-shadow:#666 5px 5px 4px;/*设置边框阴影,上,右,下*/ } #d1/*定义一个id名字叫做d1的样式表*/ { background-color:#FFF;/*背景颜色*/ } #d1:hover/*定义鼠标悬浮在引用d1样式的div上的样式*/ { cursor:help;/*鼠标形状为问号*/ width:80px;/*宽度*/ background:#03F;/*颜色*/ } #d2 { background-color:#F00; } #d2:hover { width:100px; background:#900; } #d3 { background-color:#0F0; } #d3:hover { width:120px; background:#903; } #d4 { background-color:#00F; } #d4:hover { width:140px; background:#906; } #d5 { background-color:#FF0; } #d5:hover { width:120px; background:#909; } #d6 { background-color:#0FF; } #d6:hover { width:100px; background:#90C; } #d7 { background-color:#F0F; } #d7:hover { width:80px; background:#90F; } </style> </head> <body> <div class="d" id="d1"></div><!--引用class d的样式以及id d1属性--> <div class="d" id="d2"></div><!--引用class d的样式以及id d2属性--> <div class="d" id="d3"></div><!--引用class d的样式以及id d3属性--> <div class="d" id="d4"></div><!--引用class d的样式以及id d4属性--> <div class="d" id="d5"></div><!--引用class d的样式以及id d5属性--> <div class="d" id="d6"></div><!--引用class d的样式以及id d6属性--> <div class="d" id="d7"></div><!--引用class d的样式以及id d7属性--> </body> </html>
相关文章推荐
- [leetcode]350. Intersection of Two Arrays II
- hibernate实现双向一对多的映射
- 【Leetcode】Edit Distance
- JSTL常用标签的使用
- zoj3203题解
- Linux下tomcat初级
- 线性表
- 【Leetcode】Construct Binary Tree from Inorder and Postorder Traversal
- caffe学习笔记(8):Net Surgery
- 【Leetcode】Construct Binary Tree from Preorder and Inorder Traversal
- 第108课: Spark Streaming电商广告点击综合案例动态黑名单过滤真正的实现代码
- vi命令_Linux vi 命令用法详解:功能强大的纯文本编辑器
- JAVA设计模式之单例模式
- 安卓实战中防止Button的频繁点击多次执行点击事件和点击切换文字
- Kotlin笔记
- 编码规范-注释管理
- Educational Codeforces Round 11 D. Number of Parallelograms
- 动态规划专题总结
- 【算法相关】高频词汇统计系统(二)
- 满二叉树、完全二叉树、平衡二叉树、哈夫曼树