css 分页效果

2016年07月27日 48 阅读

无标题文档 #page a{ display:block; border:1px solid red; background:black; color:white; width:20px; height:20px; float:left; margin-left:10px; text-align:center; text-decoration:none; font-size:12px; } #page a.current:link,#page a...

CSS Hack 汇总快查

2016年07月27日 46 阅读

*:lang（zh） select {font:12px ！important;} /*FF的专用*/ select:empty {font:12px ！important;} /*safari可见*/ 这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7识别 *+html {…} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 IE6及IE6以下识别 * html {…} 这个地方要特别注意很多地主都写...

CSS小例子（只显示下划线的文本框，像文字一样的按钮）

2016年07月27日 44 阅读

只显示下划线的文本框，像文字一样的按钮 body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-l...

可以给img元素设置背景图

2016年07月27日 46 阅读

实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。 Image Demo div { background: url（"http://img.jb51.net/images/blur.jpg"） no-repeat top left; width: 232px; height: 200px; } img { display: block; background: url（"http://i...

不通过JavaScript实现的自动滚动视差效果

2016年07月27日 44 阅读

这个效果是仿照Chirs Coyier的视差教程实现的，经过Chirs的允许使用了其中的星空背景。 运行效果：在这里观看：http://www.fofronline.com/experiments/parallax/#experiment该效果可以在Safari 4 Beta和Google Chrome中正常预览，实现该效果无需JavaScript。（但是在IE7及以下版本中无法观看）实现方法：这个页面的HTML代码非常简单，通过一个div来定义背景，另一...

div+CSS 兼容小摘

2016年07月27日 46 阅读

区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green ！important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*background:green ！important;*background:blue; I...

CSS的inherit与auto使用分析

2016年07月27日 44 阅读

通常是一个很小的数值，经过层层放大歪曲后，整个布局就走形了。CSS是一门很简单的语言，易学易用，但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为，CSS是由以下三大块构成的：默认值，继承系统与加权系统。默认值，也就是浏览器在用户没有设置属性的情况下，默认指定的属性。CSS框架基本都有一个叫reset.css 的文件，就是对其进行重设，消除各浏览器的差异的。继承系统就是下面要重点讨论的东西。加权系统，也就是优先级的问题，不在本文的讨论范畴，不说了...

firefox下rowspan+border+border-collapse的bug

2016年07月27日 44 阅读

后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse; 表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。 先看示例吧：Rank"s HTML document* {font-size:15px;text-decoration:none;}td {border-top:1px solid #000}第一列第二列 test 第一条中间没有横线 test t...

了解CSS的查找匹配原理，让CSS更简洁、高效

2016年07月27日 48 阅读

看1个简单的CSS： DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。 匹配原理： 浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox ...

Zen Coding 快速编写HTML/CSS代码的实现

2016年07月27日 46 阅读

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。你在写HTML代码（包括所有标签、属性、引用、大括号等）上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而...

Zen Coding css,html缩写替换大观 快速写出html,css

2016年07月27日 46 阅读

阅读本文，先仔细阅读网站文章。 Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称（div, p）; E#id 使用id的元素（div#content, p#intro, span#error）; E.class 使用类的元素（div.header, p.error.critial）. 你也 可以联合使用class和idID: div#content.column.width; E>N 子代元素（div>...

javascript代码规范小结

2016年07月27日 45 阅读

1. Javascript代码应符合Douban-JSLint检验标准 1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while 1-2. 只有长语句可以考虑断行，如： TEMPL_SONGLIST.replace（"{TABLE}", da["results"]） .replace（"{PREV_NUM}", prev） .replace（"{NEXT_NUM}", next） .replace（"{...

浅谈href=#与href=javascript:void（0）的区别

2016年07月27日 45 阅读

＃"包含了一个位置信息默认的锚点是＃top 也就是网页的上端而javascript:void（0） 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而javascript:void（0） 则不是如此所以调用脚本的时候最好用void（0）或者<input onclick><div onclick>等打开新窗口链接的几种办法1.window.open（"url"）2.用自定义函数 <script>...

HTML5 WebStorage（HTML5本地存储技术）

2016年07月27日 50 阅读

WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用cookie。有同学可能会问，既然有了cookie本地存储，为什么还要引入WebStorage的概念？Cookie肿么了cookie的缺陷是非常明显的1. 数据大小：作为存储容器，cookie的大小限制在4KB左右这...

html的基本使用（HTML标签解释）

2016年07月27日 44 阅读

一、链接在HTML中超文本的链接非常重要，基本格式如下：<A HREF="资源地址">链接文字</A>1、本地链接①绝对路劲：<A HREF="C:imagesarticle.jpg">绝对路劲链接到本地图片</A>②相对路劲<A HREF ="article2.jpg"> 相对路劲链接到本地图片</A>③链接到上一级目录<A HREF="../test.htm">链接到上...

css实现气泡框效果（实例加图解）

2016年07月27日 48 阅读

前提：气泡框或者提示框是网页很常见的，实现它的方式有很多，我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置，但是用这种方式维护很麻烦，比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等。下面我们来学习下使用html+css来实现这种效果！ 如下效果： and 我们可以来分析下：要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位上去就可以了，那么我们怎么样通过css来制作小三角形呢？一：首先我们来看看css ...

纯CSS绘制三角形（各种角度）

2016年07月27日 45 阅读

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法复制代码 代码如下:#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transpa...

HTML meat作用

2016年07月27日 45 阅读

meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和 keywords（分类关键词），所以应该给每页加一个meta值...

CSS绘制五角星

2016年07月27日 40 阅读

1 六角形复制代码 代码如下:#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six:after {width: 0;height: 0;border-left: 50px solid t...

CSS透明属性详解代码

2016年07月27日 52 阅读

透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:复制代码 代码如下:.transparent_class {filter:alpha（opacity=50）;-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}上面的几个属性分别是:opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha（opaci...