CSS高速制作图片轮播的焦点
来源:http://www.ido321.com/858.html
效果图:
演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/
代码:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta http-equiv="content-type" content="text/html;charset=utf-8">
5: <title>图片轮播的焦点</title>
6: <style type="text/css">
7: .div
8: {
9: width: 240px;
10: position: absolute;
11: }
12: ul
13: {
14: list-style: none;
15: margin-left: -50px;
16: }
17: ul li
18: {
19: width: 50px;
20: height: 50px;
21: margin-left: 10px;
22: float: left;
23: border: 1px solid #ccc;
24: background-color: #ccc;
25: border-radius:25px;
26: text-align: center;
27: }
28: li:hover
29: {
30: background-color: red;
31: }
32: span
33: {
34: font-size: 30px;
35: line-height: 50px;
36: }
37: </style>
38: </head>
39: <body>
40: <div class="div">
41: <ul>
42: <li><span>1</span></li>
43: <li><span>2</span></li>
44: <li><span>3</span></li>
45: <li><span>4</span></li>
46: </ul>
47: </div>
48: </body>
CSS高速制作图片轮播的焦点的更多相关文章
- CSS快速制作图片轮播的焦点
来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...
- axure 动态面板制作图片轮播 (01图片轮播)
利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- JavaScript图片轮播器
先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...
- 图片轮播,信手拈来(jquery)
制作图片轮播,可以说是js或者jquery学习者应该掌握的技巧.但惭愧的是本菜之前一直一知半解,这回抽了半天多总结了下分享给大家.虽然标题比较吹牛,但目的是希望大家看了之后制作图片轮播会非常迅速. 首 ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- html css+div+jquery实现图片轮播
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...
随机推荐
- 数链剖分(树的统计Count )
题目链接:https://cn.vjudge.net/contest/279350#problem/C 具体思路:单点更新,区间查询,查询的时候有两种操作,查询区间最大值和区间和. 注意点:在查询的时 ...
- android getWidth()和getMeasuredWidth()方法的区别
getWidth() Return the width of the your view. Returns The width of your view, in pixels. 源代码: public ...
- blog迁移
blog迁移到: https://github.com/for-firecat/
- Ansible Tower系列 三(使用tower执行一个任务)【转】
创建playbook Tower playbook 项目默认存在 /var/lib/awx/projects/ su - awx cd projects/ mkdir ansible-for-devo ...
- 解决getJSON跨域登录Session丢失的问题
最近在做项目中发现,我用下面的代码异步请求到login.ashx: var memberUrl = rooturl + 'member.ashx?r=' + Math.random() + '& ...
- java 异常历史 和观点
异常起源于PL/1和Mesa之类的系统中. 1.) 不在于编译器是否会强制程序员去处理错误,而是要由一致的,使用异常来报告错误 2.) 不在于什么时候进行检查,而是一定要有检查.
- unmappable character for US-ASCII
编码错误编译时加-encoding UTF-8即可 :javac -encoding UTF- file.java //
- 【LOJ】#2107. 「JLOI2015」城池攻占
题解 用一个平衡树维护能攻占到u点的骑士,合并到父亲的时候去掉攻击力小于父亲生命值的那部分,只要把那棵树拆掉并且将树中的所有骑士更新一下答案,用无旋式treap很好写 合并的时候只要启发式合并就可以了 ...
- rabbitMQ的安装(Windows下)
在公司接触到这一块,信息中间件的使用,在公司没有时间了解的更加深入,只是在简单的使用,这里将深入学习一番. 参考:http://blog.csdn.net/lu1005287365/article/d ...
- 详解VirtualBox虚拟机网络环境解析和搭建-NAT、桥接、Host-Only、Internal、端口映射
本文以VirtualBox为例 如果出现主机无法ping通虚拟机的情况,请首先确认虚拟机防火墙已关闭. 一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3. ...