CSS
关注
分享
扫一扫
iteye_12132
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
普通三列布局
[b]1.采用固定宽度[/b][code="html"]#wrapper{ width:800px; margin:0 auto; background:#999 url(img/1.jpg) repeat-y left top;}#header{ height:100px; background-color:#ccc;}#nav{ widt...2010-08-19 14:34:46 · 93 阅读 · 0 评论 -
备份一个简单的分页条
[code="html"] /15 [/code][code="css"].pageBar{text-align:right;margin:18px 20px 18px 0;}.pageBar .link{display:inline-block;padding:2px 8px;margin:2px;c...2013-07-20 10:57:45 · 95 阅读 · 0 评论 -
简单下拉框模拟
[code="html"]Image preview example /*下拉模拟*/.simSelect { display:inline-block;position: relative;border: 1px solid #ccc; line-height: 34px;text-align:center; }.simSelect:afte...2015-06-19 16:19:38 · 308 阅读 · 0 评论 -
动态添加style元素
[code="js"]/** * @description IE6~9下，页面的样式规则有如下限制： * 1）link+style元素的个数不能大于31个； * 2）单个css文件的rule条数，不能大于4095条; * 3）@import 命令不能嵌套超过4层。 * * 文件处理了动态加载 link/style元素的情况，但不能处理页面一开始就已经违反了限制...2013-09-03 15:42:28 · 2954 阅读 · 0 评论 -
图片倒影
[code="html"]无标题文档#wrapper{width:600px;margin:50px auto;border:1px solid #ccc;}*{border:none;padding:0;margin:0;}.reflectionBox{position:relative;_zoom:1;}.reflectionBox:befo...2013-09-18 11:13:46 · 118 阅读 · 0 评论 -
css3的饼图
来自：http://atomicnoggin.ca/test/pie-chart.html[code="html"]Pure CSS3 Pie Chartsbody { font-family:Tahoma, Geneva, sans-serif;}h2 { text-align:center;}.chart { position:r...原创 2013-12-31 15:12:32 · 504 阅读 · 0 评论 -
css3 简单slider
[code="html"] 大屏幕 .sliderBox{height:12em;position:relative;overflow: hidden;} .slider{position:absolute;width:100%;height:100%;} .slider li{position:absolute;top:...2014-01-24 15:16:24 · 1373 阅读 · 0 评论 -
纯CSS3的图片集点击放大
[code="html"] .slideshow {width:300px; height:60px; margin:250px auto;}input {position:absolute; left:-9999px; display:none;}label.toggle {display:block; width:80px; height:60px;...原创 2014-03-26 10:15:00 · 1647 阅读 · 0 评论 -
纯CSS3的loading图案
转自：http://www.cssplay.co.uk/menu/cssplay-loading-animation.html[code="html"]div.loading {width:200px; height:200px; position:relative; float:left; margin:0 10px;}div.one {background:#0...原创 2014-03-26 10:57:42 · 173 阅读 · 0 评论 -
模拟滚动条
[code="html"]Insert title here #wrapper{width:300px;background: #ff0;position:fixed;right:10px;top:20px;bottom:0;color:#fff;} #wrapper{*height:100%;} .box{overflow: hidd...2014-04-10 09:37:00 · 123 阅读 · 0 评论 -
如何读写伪类元素的样式？
示例：[code="html"]Hi, this is a plain-old, sad-looking paragraph tag..example::before { content: 'pseudoElement '; color: red;}[/code][b]一、读取，使用 window.getComputedStyle 方...2014-12-17 10:00:54 · 279 阅读 · 0 评论 -
移动端的“点透”问题
移动端的“点透”问题，这篇博文有较好的说明：http://www.cnblogs.com/zldream1106/p/3670988.html移动端的事件触发顺序： touchstart -> touchend -> click通常的情况是：1. A区域是一个浮层，绑定touchstart/touchend事件，事件函数将A区域隐藏。2. 点击发生的位...原创 2015-04-15 14:13:50 · 159 阅读 · 0 评论 -
纯CSS3的图片slider
[code="html"] body{background:#000;}.container{ margin:50px auto; width:500px; height:300px; overflow:hidden; border:10px solid; border-top-color:#856036...原创 2015-04-16 14:36:37 · 241 阅读 · 0 评论 -
简单的css3全屏滚动
[code="html"] qqqqqqqq body,#wrapper{min-height:100%;height:100%;overflow:hidden;} #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;} sec...2015-04-27 16:41:02 · 1102 阅读 · 0 评论 -
简单的css3全屏滚动-左右方向
据说 translateZ(0)可以触发GPU渲染，提高动画的性能。切换的属性变化，可以有2种：1. transform:translateX的值2. left的值；这里动画切换比较简单，看不出有什么优势。二、采用translateX属性值控制容器位置：[code="html"] qqqqqqqq ...2015-04-28 15:17:32 · 1038 阅读 · 0 评论 -
icon font VS svg font
关于字体图标和SVG图标，CSS TRICK网站有较好的说明。https://css-tricks.com/icon-fonts-vs-svg/总的来讲：[b]1. 字体图标浏览器支持多一点。(IE6+)2. SVG显示效果好一些，更多的CSS控制（例如：支持图标颜色渐变），制作相对简单些。(IE9+)[/b]需要补充的是，SVG有以下缺点：1. 对于IE浏...2015-05-14 15:21:12 · 504 阅读 · 0 评论 -
页面布局：分5个区域
[code="html"]*{margin:0;padding:0;}body{width:100%;height:100%;overflow:hidden;}.viewPort{position:absolute;width:100%;height:100%;overflow:hidden;}.top,.bottom,.left,.right,.inner...2013-05-15 17:19:31 · 1816 阅读 · 0 评论 -
关于getBoundingClientRect 与 getClientRects
getBoundingClientRect 可以用来获取 元素 相对视图左上角的位置。它的返回值是一个对象，包含4个属性：{top:0,left:0,bottom:0,right:0}， ——FirefoxV3.1+扩展了该对象，添加了width,height属性。 默认它是不计算页面的滚动距离的，跨浏览器的解决方案，可以参考jQuery的offset方法。 ...2012-08-19 14:29:47 · 449 阅读 · 0 评论 -
一个分页栏的样式
转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/css_pagination_links/[code="html"]/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.pagination{ pad...原创 2010-07-29 15:21:29 · 332 阅读 · 0 评论 -
简单表单
[code="html"]fieldset{ border: 1px solid green;}legend{ font-weight:bold;}label{ /* 启用该规则，标签将显示在输入框上面 display:block; */ /*启用下面的规则，标签将显示在输入框的左边，并具有了宽度*/ float:left; width:1...2010-08-19 14:44:53 · 79 阅读 · 0 评论 -
关于float的理解
[code="html"]div.collapse{ width:100px; height:100px; padding:5px; /*margin:10px;*/ background-color:lightblue; border:1px solid #a9a9a9;}content[/code]假如不包含 这段代码,那么外...2010-08-19 16:54:00 · 218 阅读 · 0 评论 -
设置选中文字的颜色和背景色
转载自：http://witmax.cn/css-text-selection.html样式：[code="html"]/*应用到全部标签*/* ::-moz-selection{ background:#FFCC89 none repeat scroll 0 0; color:#222222;}::selection{ backgroun...原创 2010-08-19 17:00:29 · 971 阅读 · 0 评论 -
background-position的理解
[b]background-position: [left] [top] [/b];默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，也就是说padding值不影响position的定位。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。内置的几个值分别对应：top:0%;l...2010-08-20 15:35:20 · 165 阅读 · 0 评论 -
理解margin collapse现象
[b]空白边叠加现象[/b]：只发生在垂直方向上的block元素(如p,h1,div等)。float,inline(如strong,span)以及绝对定位元素不受影响。1.包含关系：[code="html"] inner .inner{ width:100px;height:100px;background-color:#666; margin-top:20p...2010-08-20 15:45:09 · 223 阅读 · 0 评论 -
CSS圆角实现
[b]1.方法一：上下两张带圆角的图片。宽度固定，允许高度变动.[/b][code="html"]HeadlineContent.box {width: 418px;background: #effce7 url(images/bottom.gif) no-repeat left bottom;}.box h2 {background: url(im...2010-08-20 16:28:15 · 197 阅读 · 0 评论 -
[疑问]Inline元素的问题
[code="html"].container{ width:350px; background-color:#ccc;}span.box { display:inline; visibility:visible; line-height:100px; margin:0 100px; padding:20px 120px; border...2010-08-23 16:39:05 · 123 阅读 · 0 评论 -
关于未设置父元素宽度的block子元素显示
如果block父元素设置了宽度，而block子元素又没有设置宽度（我的理解是默认为一个单词/汉字的宽度），那么，假如 子元素的内容+padding + margin 超过了父元素的宽度，则，子元素的内容将会自动换行，每一行的最小内容为一个单词(汉字)，然后计算该行的内容 + padding + margin，超过父元素的宽度，重复换行操作，直到所有内容显示。这个时候，假如父元素没有设置高度，那么...2010-08-23 16:57:59 · 223 阅读 · 0 评论 -
三角区域
[code="html"]#triangle{ border: 2px solid #999; position: relative; width: 50px; height: 25px;}#triangle > div{ border-style: solid; border-color: transparent #900; border-wi...2010-09-02 08:57:13 · 197 阅读 · 0 评论 -
兼容IE的 position:fixed
[code="html"] html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;} /* the core */ #wrapper{ position:relative; ...原创 2011-06-15 14:38:30 · 198 阅读 · 0 评论 -
Eric Meyer’s Universal Cross- Browser Style Reset
[code="html"]/* v1.0 | 20080212 */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, im...原创 2010-06-19 15:37:09 · 79 阅读 · 0 评论 -
position定位
static：静态定位，元素的默认定位方式，它简单的遵从页面文档的普通流动(flow)，当元素是静态定位的时候，top和left属性无效；relative：相对定位，该定位方式与静态定位相似，因为元素会继续遵从页面文档的普通流动(flow)，除非受到其它指令的影响。但是，设置top,left属性会引起元素相对于它的原始（静态）位置进行偏移。absolute:绝对定位，绝对定位的元素...2010-06-24 10:40:22 · 110 阅读 · 0 评论 -
横/纵向二级导航菜单
[code="html"] Recipes Starters Main Courses Desserts Contact Us Starters Main Courses Desserts Articles Buy Online Recip...2010-07-22 08:47:42 · 681 阅读 · 0 评论 -
文本框（input）添加提示图标与修饰效果
转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/input_background_image/为你的文本框加一个说明用途的小图标input.txtInput {background: fff;background-repeat: no-repeat;background-position: 2px center;bord...原创 2010-07-29 14:50:00 · 1287 阅读 · 0 评论 -
使用relative属性为DIV和图片添加背影
转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/css_shadow/[code="html"]/* 为 DIV 加阴影 */.out {position:relative;background:bbb;margin:10px auto;width:240px;}.in {background:fff...原创 2010-07-29 15:07:40 · 201 阅读 · 0 评论 -
四个方向鼠标滑入的css动画
[code="html"] 测试 *{margin:0;} /* The wrapper */ .b-block { position: relative; display: inline-block; overflow: hidden; width: 10em; hei...原创 2015-05-14 18:08:26 · 435 阅读 · 0 评论