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> & ...
- 图片轮播,信手拈来(jquery)
制作图片轮播,可以说是js或者jquery学习者应该掌握的技巧.但惭愧的是本菜之前一直一知半解,这回抽了半天多总结了下分享给大家.虽然标题比较吹牛,但目的是希望大家看了之后制作图片轮播会非常迅速. 首 ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- JavaScript图片轮播器
先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- html css+div+jquery实现图片轮播
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...
随机推荐
- UML建模之活动图介绍(Activity Diagram)
一.活动图的组成元素 Activity Diagram Element 1.活动状态图(Activity) 2.动作状态(Actions) 3.动作状态约束(Action Constraints) 4 ...
- React Jest测试
一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel ...
- WCF实例管理的三种方式
很多情况下,我们都需要控制wcf服务端对象的初始化方式,用来控制wcf实例在服务端的存活时间. Wcf框架提供了三种创建wcf实例的方式. WCF服务对象实例化基础 在普通的WCF请求和相应过程中,将 ...
- ADO.NET基础02(语句参数化,配置文件,DataSet与DataTable)
ADO.NET连接池 ado.net默认启用了连接池 *如何清空连接池?Connection的静态方法ClearAllPools(). ClearPool() Ado.net连接池使用总结: 1.第一 ...
- 52. N-Queens II
题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...
- ActiveMQ之消息指针
消息指针(Message cursor)是activeMQ里一个非常重要的核心类,它是提供某种优化消息存储的方法.消息中间件的实现一般都是当消费者准备好消费消息的时候,它会从持久化存储中一批一批的读取 ...
- How to upgrade gcc using apt-get ?
在toolchain/test下已经有打包好的gcc,版本有4.x.5.0.6.0等,用这个PPA升级gcc就可以啦! 首先添加ppa到库: 1 sudo add-apt-repository ppa ...
- What's New for Visual C# 6.0
https://msdn.microsoft.com/en-us/library/hh156499.aspx nameof You can get the unqualified string nam ...
- Android之ScaleGestureDetector(缩放手势检测)
一.概述 ScaleGestureDetector这个类是专门用来检测两个手指在屏幕上做缩放的手势用的,最简单的应用就是用来缩放图片或者缩放网页. 二.要求 利用ScaleGestureDetecto ...
- bzoj2085
首先看到k的范围就该知道这题不是倍增就是矩乘 首先肯定要求出任意一对串(a,b) a的后缀与b的前缀相同的最长长度是多少 考虑到kmp求出的失配指针是一个串最长后缀和前缀相等的长度 这里多个串我们只要 ...