CSS3
不可思议的纯CSS导航栏下划线跟随效果
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
width: 100%;
left: 0;
}
li:hover ~ li::before {
left: 0;
}
背景缩放
/*Mozilla*/
-moz-background-size:auto||
/*Webkit*/
-webkit-background-size:auto||
/*Presto*/
-o-background-size:auto||
/*W3c*/
background-size:auto||
css简单的数学运算-加减乘除
width:calc(100%/3 - 20px);
注意：CSS3 中calc()关键字+(加)、-(减)运算符必须加空格
透明度
opacity: 0.5;
背景透明度
background: rgba(76, 175, 80, 0.3)
a.div不可以包含在P里
c.有一些是地址的问题， 连号例如&要用&转义
d.所有的标签一律用小写
e.所有的标签属性必须包括在" "里
f.链接最好都加上title（更具亲和力）
g.图片要加上alt=""，属性留空都可以
h.页面布局用div+css，表格只出现在需要用表格的地方，比如表现数据
i.加粗用，而不用，因为只是改变字体样式，而代表了语气的强调，重要＝＝，所以，呃。。重要的是语义~~
////////////////////////////////////
///// ////
///// １、强制不换行 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
加属性white-space:nowrap;
////////////////////////////////////
///// ////
///// ２、高度达不到很小 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
定义div的高度为很小时有时达不到,在div后面加上overflow:hidden;
////////////////////////////////////
///// ////
///// ３、文字换行 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
CSS样式word-break:break-all
强制长的单词换行：
word-wrap:break-word;
整词换行
white-space:nowrap;
////////////////////////////////////
///// ////
///// ４、双表法调用样式表 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：
@import url( css/style01.css );
////////////////////////////////////
///// ////
///// ５、固定显示层里的字数 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
先定层宽width再加overflow:hidden;样式.
下载可以控制被除数,超出时自动出现...
{width:125px;height:20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
////////////////////////////////////
///// ////
///// ６、最小高度能自适应高度 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
拥有最小高度能自适应高度，IE、FF全兼容的div设置
height:auto!important;height:200px;min-height:200px;
////////////////////////////////////
///// ////
///// ７、防止乱码 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
防止乱码，请将用于页面编码的meta charset放到title的前面
////////////////////////////////////
///// ////
///// ８、高度有时定不了 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
高度有时定不了,使用min-height 或min-width
////////////////////////////////////
///// ////
///// ９、区分firefox,IE7,IE6 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。
比如
div{ background:green; /* for firefox */
*background:red; /* for IE6 */
}
于是大家还可以这样来区分firefox,IE7,IE6
margin-top:-15px; *margin-top:0px !important; *margin-top:0px;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
////////////////////////////////////
///// ////
///// １０、透明度问题 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
透明度问题，在IE6 IE7中显示不正常，在firefox中显示正常
透明度问题，在IE6 IE7中和在firefox中均显示正常
////////////////////////////////////
///// ////
///// １１、背景问题 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
BACKGROUND: none transparent scroll repeat 0% 0%
第一 你的这句是错的。
但是系统会帮你解释成下面这样。
BACKGROUND:transparent none repeat scroll 0% 0%
分别代表
背景属性：背景颜色 背景图片 背景是否重复 背景时候随浏览器滚动 背景平位置 背景垂直位置
background : background-color || background-image || background-repeat || background-attachment || background-position
transparent表示透明无颜色
none 表示没有设置背景图片
repeat 表示图片重复
scroll 表示背景图片随浏览器下拉而滚动
0%水平位置在x0
0%垂直位置在y0
这个试试是background 的默认这是 ，
也就是说 没有对background属性进行设置的时候 他就会使用这用设置
////////////////////////////////////
///// ////
///// １２、CSS设置不转行 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
////////////////////////////////////
///// ////
///// １３、设置强行换行 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量
亚洲文本的非亚洲文本
////////////////////////////////////
///// ////
///// １４、标题在框中间的制作方法/////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
标题
内容区
////////////////////////////////////
///// ////
///// １５、交互式按钮和图片 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
////////////////////////////////////
///// ////
///// １６、隐藏多余被除数 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
隐藏多余数还可以在后面显示三点的属性
132456789132456789
但是这个属性不符合w3c标准
////////////////////////////////////
///// ////
///// １７、div自动高度设置 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
在DIV的里面放入下面层产生一个空格.
////////////////////////////////////
///// ////
///// １８、批量去链接的虚框 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
可以批量去掉网页上全部超链接的虚框
a{blr:expression(this.onFocus=this.blur());}
////////////////////////////////////
///// ////
///// １９、指针为手形 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
指针为手形 cursor: pointer;
////////////////////////////////////
///// ////
///// ２０、常见问题 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
1、FF下给 div 设置 padding 后会导致 width 和 height 增加，但IE不会。（可用!important解决）
2、居中问题。
1) 垂直居中。将 line-height 设置为 当前 div 相同的高度，再通过 vertical-align: middle. （注意内容不要换行）
2) 水平居中。 margin: 0 auto; （当然不是万能）
3、若需给 a 标签内内容加上 样式，需要设置 display: block; （常见于导航标签）
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。
5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）
6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden ，以达到高度自适应。
7、关于手形光标。 cursor: pointer ，而 hand 只适用于 IE。
8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。
////////////////////////////////////
///// ////
///// ２１、 万能 float 闭合 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
万能 float 闭合（非常重要）
.clear{clear:both;}
将以下代码加入Global CSS 中，给需要闭合的div加上 class="clear" 即可，屡试不爽。
程序代码
////////////////////////////////////
///// ////
///// ２２、鼠标经过时改变属性 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
鼠标经过时改变属性:
onmouseover="this.style.backgroundColor='FF6600'"
onmouseout="this.style.backgroundColor='0066FF'"
////////////////////////////////////
///// ////
///// ２３、改变按钮样式 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
onmousemove="this.className='buttom_hover'" onmouseout="this.className='buttom'"
////////////////////////////////////
///// ////
///// ２４、css整体的设计 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
css整体的设计
@charset "utf-8";
body,input,table,select,textarea,h1,h2,h3,h4{
color:#555555;
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
body,input,table,select,textarea,h1{
font-size:12px;
font-weight:normal;
}
body,a,div,ul,ol,li,dl,dt,dd,p,span,form,pre,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
body{
/*font:normal normal normal 12px/1.5em tahoma, "Microsoft Yahei", Simsun, Arial Unicode MS, Mingliu, Arial, Helvetica;*/
text-align: center;
height:100%;
word-break : break-all;
}
////////////////////////////////////
///// ////
///// ２５、单词间的距离 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
单词间的距离：利用字间距属性word-spacing，可以调整单词间的距离。
.h2 {word-spacing:5pt}
////////////////////////////////////
///// ////
///// ２６、字母间距 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
字母间距：利用字母间距属性letter-spacing，可以调整单词中每个字母间的距离。
. h2 {letter-spacing:10pt};
////////////////////////////////////
///// ////
///// ２７、手形指针 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
24.cursor: pointer;和cursor: hand;在IE里边都是代表手形指针
但是在FireFox里边hand是无效的.
所以推荐使用cursor: pointer;来表示手形鼠标指针.
但是这样带来的问题就是点击链接时候会跳到页面最上边,而且地址栏最后会多出一个#来~
所以推荐用 href=”javascript:void(0)”来表示空连接~
////////////////////////////////////
///// ////
///// ２８、首行缩进两格 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
.t_msgfont{ text-indent: 2em; }其中 2em 代表两个中文字符的宽度。
////////////////////////////////////
///// ////
///// ２９、简体转成utf-8 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
26.如果页面由简体转成utf-8时CSS部分就不能有任何全角符号,否则好容易出错的.比如说样式无效等等.
解决方法:把CSS文件也转成UTF-8的格式就可以了,也就是在CSS的最前面加上 @charset "utf-8";
////////////////////////////////////
///// ////
///// ３０、层垂直居中于浏览器中 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
怎样使一个层垂直居中于浏览器中?
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
////////////////////////////////////
///// ////
///// ３１、列表前面点的样式 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
disc (缺省值，黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
////////////////////////////////////
///// ////
///// ３２、页面变成黑白 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
使整个页面变成黑白filter:Gray;放在body中
////////////////////////////////////
///// ////
///// ３３、浮动ie产生的双倍距离 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
////////////////////////////////////
///// ////
///// ３４、用iframe自动适应高度 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
////////////////////////////////////
///// ////
///// ３５、样式名字不可以以数字开头 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
样式名字不可以以数字开头，比如#33safds{...}
////////////////////////////////////
///// ////
///// ３６、未知高度垂直居中样式写法 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
blah blah...看见我居中了吗？
sdfs
sd
fsd
f
sd
fs
d
////////////////////////////////////
///// ////
///// ３７、样式控制打开链接的方法/////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
.target2 a:active {test:expression(target="_blank");}
////////////////////////////////////
///// ////
///// ３８、ifream透明背景 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
////////////////////////////////////
///// ////
///// ３９、图片垂直居中 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
.img_middle {overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; margin:0;padding:0}
.img_middle p { position:static; +position:absolute; top:50%; margin:0;padding:0}
.img_middle img { position:static; +position:relative; top:-50%;left:-50%;margin:0;padding:0}
////////////////////////////////////
///// ////
///// ４０、CSS控制input悬停样式 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
input {star : expression(
onmouseover=function(){this.style.width="200px"},
onmouseout=function(){this.style.width="100px"})}
////////////////////////////////////
///// ////
///// ４１、只有IE7认识 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
*+html div{}
这个只有IE7认识，很好用
////////////////////////////////////
///// ////
///// ４２、IE6支持PNG透明的方法 /////
///// //////
/////////////////////////////////////////
-------------------------------------------------------------------------------
在样式里使用滤镜#png {
position:absolute;background: url(../images/bg.png) repeat;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="images/bg.png");
}
注：使用 AlphaImageLoader 后该区域的超链接和按钮会失效，所以需对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。
IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用。
-------------------------------------------------------------------------------
////////////////////////////////////
///// ////
///// ４３、透明度 /////
///// //////
/////////////////////////////////////////
----------------------------------------------
filter:alpha(opacity=100); -moz-opacity:1; opacity:1;
/////////////////////////////////////////////////////////////
针对google浏览器的hack
body:nth-of-type(1) .me{color:#ff0000; }
在样式前面加上body:nth-of-type(1)
////////////////////////////////////////
默认高度
height:auto!important;height:200px;min-height:200px;
////////////////////////////////////
///// ////
///// ４４、钮按变灰色 /////
///// //////
/////////////////////////////////////////
.button_gray{filter:Gray; -moz-opacity:0.3; cursor:default;}
////////////////////////////////////
///// ////
///// ４５、半透明背景 /////
///// //////
/////////////////////////////////////////
.bg{background-color: #666;width: 100%;height: 100%;left:0;top:0;filter:alpha(opacity=50);opacity:0.5;z-index:1;position:fixed!important;position:absolute;_top:expression_r_r(eval_r(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);}
////////////////////////////////////
///// ////
///// ４６、表单上传文件样式 /////
///// //////
/////////////////////////////////////////
.file1{height:24px;float:left; display:inline; overflow:hidden;}
.file1 input{height:17px;border:1px #d4d4d4 solid; font:12px 宋体; background:#fff; padding:4px 5px 0 5px;}
.file2{width:75px; height:23px; background:url(../images/ico.gif) 15px -2562px no-repeat;overflow:hidden; float:left;}
.filebtn{width:75px; height:32px; margin-left:-130px;*margin-left:0px!important; *margin-left:-3px;filter:alpha(opacity=0);-moz-opacity:0; position:relative; top:-5px; left:-5px;cursor:pointer;}
////////////////////////////////////
///// ////
///// ４７、IE8 CSS hack /////
///// //////
/////////////////////////////////////////
"\9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
////////////////////////////////////
///// ////
///// ４８、解决IE8样式问题 /////
///// //////
/////////////////////////////////////////
在页面上插入