CSS 布局一个漂亮的滑块

好好看看代码，相信会对你帮助不少。

CSS布局一个漂亮的滑块

dl {
margin: 0;
padding: 0;
}
dt {
position: relative;
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative;
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("/upload/20091006163826471.jpg");
}
* html dd { float: none; }
dd div {
position: relative;
background: url("/upload/20091006163826679.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("/upload/20091006163826537.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}

生活满意度：

63%
工作满意度：

38%
爱情满意度：

86%

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • CSS 布局一个漂亮的滑块

    CSS 布局一个漂亮的滑块

    好好看看代码,相信会对你帮助不少. CSS布局一个漂亮的滑块 dl { margin: 0; padding: 0; } dt { position: relative; clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } dd { position: r

  • 第9天:第一个CSS布局实例

    第9天:第一个CSS布局实例

    接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好

  • 130个漂亮CSS布局站点参考

    130个漂亮CSS布局站点参考

    以下是CSSVault.com推荐的2004年1月--3月130个CSS布局站点,供大家参考: CCD Design Webexpresse Happy Cog Icelandic National Team Derek Powazek Blogdsgn Postcard Times Eview 360 Euro Pair Agency Schillmania DFS Online Ways to create The Great Monkey Papel Continuo Made By Gi

  • 第8天:CSS布局入门

    第8天:CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid;BORDER-R

  • 分享一个漂亮的php验证码类

    本文实例为大家分享了一个漂亮的php验证码类,供大家参考,具体内容如下 //验证码类 class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 private $width = 130;//宽度 private $height = 50;//高度 privat

  • DIV+CSS布局教程大全与pdf电子书 下载

    div+css布局入门 4XHTML下css+div布局总结. 6网页设计DIV+CSS--第1天:选择什么样的DOCTYPE. 9第一天 9什么是DOCTYPE 10我们选择什么样的DOCTYPE 10补充 10网页设计DIV+CSS--第2天:什么是名字空间 10网页设计DIV+CSS--第3天:定义语言编码 11网页设计DIV+CSS--第4天:调用样式表. 11外部调用样式表 11双表法调用样式表 12网页设计DIV+CSS--第5天:head区的其他设置. 12收藏夹小图标. 12为搜

  • CSS布局入门

    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距. 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px; PADDING-LEFT: 20px;  PADDING-TOP: 20px; PADDING-RIGHT: 10px;  P

  • div＋css布局入门

    你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =

  • Bootstrap CSS布局之列表

    Bootstrap CSS布局之列表

    本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下 列表 普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontal ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 普通列表ul li 有序列表ol

随机推荐