误区一.多p症 <p class="nav"><ul><li><a href="/home/">Home</a></li><li><a href="/about/">About</a></li><li><a href="/concact/">Concact</a></li></ul> </p>上述使用使用多余的p标签现状，就称为“多p症”，理应简化成下<ul class="nav"><li><a href="/home/">Home</a></li><li><a href="/about/">About</a></li><li><a href="/concact/">Concact</a></li> </ul>误区二.多类class症 注意点class可以应用于页面任意多个元素...
大家看到的html背景色渐变是通过CSS实现的，个人感觉还不错，可以清楚的看到图片 效果截图： 实现代码： 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startC...
当定义了 Text 的 height 属性时，在 Text 中输入的文字都不是垂直居中的，不过可以通过css来控制它，下面有个不错的示例，大家可以参考下 当定义了 Text 的 height 属性时，在 Text 中输入的文字都不是垂直居中的，不过你可以添加CSS来控制它，让输入的文字垂直居中，使网页更完美。 代码如下:<html> <head> <style type="text/css"> #text { height:20px; vertical-align:middle; line-height:20px; /*line-height must be...
Active的一段话active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。Active的特点 其实我们打开一个带有active链接，激活acive是有一个过程的，就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间，笔者认为其默认花费零点几秒。DOCTYPE html> <html><head><title>a</title><met...
CSS的简介 1、CSS概述及作用CSS：Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。 作用：CSS将网页内容和显示样式进行分离，提高了显示功能。2、 CSS和HTML的结合（*****）（四种）CSS与HTML的结合方式1.style属性方式：利用标签中style属性来改变每个标签的显示样式。 例： <p style="background-color:#FF0...
css cursor url用法格式：css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码：html{cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;} 解析：前面的url是自定义鼠标图标路径，第2个参数auto是css标准的cursor样式，可换成其它属性(如pointer/default等)！（注释：w3school推荐第2个参数必须定义一种普通的光标，以防URL 定义的可用光标使可备用！另外IE下面...
border-radius 基本语法：border-radius ： none | {1,4} [/ {1,4} ]? 取值范围：： 由浮点数字和单位标识符组成的长度值。不可为负值。如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。 但是，如果你要在四个角上一一指定，可以使用以下规则：四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值...
0.环境准备（1）过渡需要浏览器的支持，使用这些属性要加上浏览器厂商的前缀，我用的chrome49已经不需要前缀了，-o- Opera-webkit- Safari、Chrome-moz- Firefox-ms- IE(2) cssp{height:15px;/*类似于高度这种属性,必须明确指定值*/}p:hover/*初始p:hover*/{height:100px;}(3)html文件body部分1.快速使用将下面属性加入初始p:hovertransition: background 2s linear 1s,height 1s linear 1s;2.详解(1)分别指定、属性详解将下面属性...
CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#） 还有w3school上面的这句话早已经过时：目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit，还有其他浏览器的一些...
记得一年前，到一家公司面试的时候，问我position有哪几个属性，我憋半天才回答出2个，大家估计都清楚，就是我们经常用到的2个（relative，absolute）。 最近又用到了好多，深入研究了下。 一、语法: position：static | relative | absolute | fixed 取值: static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。 relative：相对定位，对象遵循正常文档流，但将依据top，right，b...
CSS的相对定位和绝对定位通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情...
一、!important (功能有限) 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) 例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ }二、CSS HACK的方法(新手可以看看，高手就当路过吧) 首先需要知道的是： 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6、IE7 共用 *height: 100px; IE7、...
上一篇现在看起来好像没什么营养，呵呵，今天努力。 首先说一下“盒子模型” ，在css里认为div是一个盒子。。。盒子？什么意思？呵呵 看看下边的图吧： 这里把我们用到了好几个CSS属性，在上一篇里介绍过，看到了吧CSS骗了我好久啊，我一直以为width，height是div的宽和高，没想到啊，没想到，它们只是content的宽和高。这就是div全部的大小控制了。不过这里要注意body也是一个大的盒子，要是默认不设置margin的话，会和窗口四周...
讲师：林玉燕简介：担任多个大型产品项目的需求分析和架构设计，以及应用软件的代码编写、测试、架构设计到项目管理工作，具有高级软件工程师培训经历，历任大学兼职讲师，长期从事企业级开发应用研究和高级软件工程师的培养及管理工作，为了社会提供了更多、更优秀的软件人才。讲师：林玉燕简介：担任多个大型产品项目的需求分析和架构设计，以及应用软件的代码编写、测试、架构设计到项目管理工作，具有高级软件工程师培训经历，...
圣杯布局：两栏固定-中列浮动-中列div排在前面，好处是当网速慢的时候，内容列能首先显示出来 一个额外的DIV包含着我们的三个层,这样的结构符合我集中内容上一体的标记为一体的习惯 样式很也简单,左边侧栏是200PX,右边是150,为了简便标示用LC,RC,CC分别代表左边,右边和中间,样式如下: body { min-width: 550px; /* 2x LC width + RC width */ } #container { padding-left: 200px; /* LC width */ pa...