CSS

有意思:textarea resize属性下纯CSS交互效果

一、众所周知的众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志。有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做交互效果。二、纯CSS的交互展示您可以狠狠地点击这里:textarearesize下的纯CSS交互demo例如,在FireFox浏览器下,拖动(往右→)下图圈中的图标:一个半透明遮罩层随着拖动把张含韵给覆盖了,达到了半遮面的交互效果。效果没什么,但是却完全CSS实

系统 2019-08-29 23:45:38 2449

CSS

CSS3 icon font完全指南

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。为什么要将icon做成字体?在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8alpha透明或者pn

系统 2019-08-12 09:29:28 2447

CSS

使用div和CSS样式画三角形

文章参考http://blog.csdn.net/cangkukuaimanle/article/details/6798509http://www.jb51.net/css/16650.html说说画三角形的原理1、设置一个DIV的高度和宽度全部为0,2、然后设置border-width为适当的值3、设置border-style为实线4、设置border-color的颜色,然后将上、右、下、左不需要显示的边框设置为透明即可例子

系统 2019-08-29 22:10:13 2441

CSS

CSS盒子模型

语法:padding:length参数:length:由浮点数字和单位标识符组成的长度值|或者百分数。百分数是基于父对象的宽度。请参阅长度单位说明:检索或设置对象四边的补丁边距。①如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。②如果只提供一个,将用于全部的四条边。③如果提供两个,第一个用于上-下,第二个用于左-右。④如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。⑤内联对象要使用该属性,必须先设定对象的height或width属性

系统 2019-08-29 22:31:37 2439

CSS

必须记住的 30 类 CSS 选择器

大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。1.*Css代码*{margin:0;padding:0;}在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用

系统 2019-08-29 22:13:06 2439

CSS

十步学习css定位知识

十步学习css定位知识http://www.barelyfitz.com/screencast/html-training/css/positioning/这个教程解释了css布局中的以下问题:position:static,position:relative,position:absolute,float作为例子的div的代码:

id=div-before

<

系统 2019-08-29 23:51:58 2429

CSS

一款简易的CSS3扁平化风格联系表单

CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单。经测试效果相当不错,huiyi8素材推荐下载。css3按钮:http://www.huiyi8.com/css3/anniu/一款简易的CSS3扁平化风格联系表单

系统 2019-08-12 01:33:19 2427

CSS

div+css动态菜单

body{cursor:hand;margin:0;padding:0;position:absolute;overflow:hidden;left:0;top:0;width:100%;height:100%;}.link{position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibi

系统 2019-08-29 23:41:34 2418

CSS

CSS设计指南之伪元素

1.:first-line伪元素"first-line"伪元素用于向文本的首行设置特殊样式。2.:first-letter伪元素"first-letter"伪元素用于向文本的首字母设置特殊样式:3.:before伪元素":before"伪元素可以在元素的内容前面插入新内容。4.:after伪元素":after"伪元素可以在元素的内容之后插入新内容。CSS设计指南之伪元素

系统 2019-08-12 01:32:04 2415

CSS

css样式教程 3、CSS的color颜色

css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。程序代码red红色等同于rgb(255,0,0)等同于rgb(100%,0%,0%)等同于#ff0000等同于#f00有17个预先确定的颜色,它们是:aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,andyellow.transparent也

系统 2019-08-29 23:17:16 2378

CSS

30个你必须熟记的CSS选择器

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。1.*1234*{margin:0;padding:0;}首先我们来认识一些简单的选择器,尤其针对初学者,然后再看其他高级的选择器。星号可以用来定义页面的所有元素。许多开发者会使用这个技巧来把margin和padding都设为0

系统 2019-08-29 22:12:58 2359

CSS

CSS3 Media Query实现响应式Web设计(针对不同移

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3MediaQueries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

系统 2019-08-29 22:22:37 2356

CSS

[转] CSS Framework,让你事半功倍

近两年来,程序员有一句话很流行,“不要重复制造轮子”,所以出现了许许多多让我们非常受用的各种框架。Framework在开发的各个领域给我们减少了很多工作量。而对于网页设计师来说,一直以来,缺少这样的Framework来帮助设计师们减轻工作量。今天给大家推荐一些不错的CSSFramework:首先是本文的主角:这是一个非常轻量级而且很少侵入性的框架(这话怎么看都不是网页设计师能熟悉的,:-)),换句话来说,这是一个很底层的CSSFramework,并没有替你

系统 2019-08-29 23:39:49 2345

CSS

CSS sprites的利弊

刚刚看到一篇国外讨论CSSsprites利弊的文章,作者认为那是潜在的危险,在文中也指出了他的很多观点,这个技术我用的时间不长,不过到也还是有一些体会的,在这里也说一说自己的理解吧。所谓CSSsprites就是把很多张小的背景图集中在一张大图上,然后通过定义background-position来调用不同位置的背景图。这个技术最大的优点就是减少了HTTP请求,另外就是减小了图片的大小,节省带宽。这就是google的一张CSSsprites:googlecs

系统 2019-08-12 09:29:54 2344

CSS

防止表格被撑开 CSS word-wrap 英文单词断开换

或在脚本中:this.style.wordBreak=break-allString设置或获取一个下面的值:normal缺省值.允许从每个词处回行。break-all不管在什么位置,超过列宽时就回行。keep-all不允许Chinese,Japanese,和Korean回行。这个功能类似与“normal”的非

系统 2019-08-12 09:27:06 2335