divcss布局技巧以及伪类使用.docxVIP

CSS(Joe Zhou 2011/4/15)一些小技巧案例一：都是浮动惹得祸（父类DIV无法包含子类DIV）代码：Css：.father{width:1000px;}.sons{width:300px;height:500px;float:left;}Html：div class=fatherdiv class=sons宽三百，高五百的儿子/divdiv class=sons宽三百，高五百的儿子/divdiv class=sons宽三百，高五百的儿子/div/div解决方案：方案一：使用一个宽度和父类一样无高度DIV 放置最后一个子类的后面方案二：使用伪类after css代码（content:; display: block; height:0; clear:both; visibility:hidden;）案例二：伪类使用Css中有多少个伪类？:link向未被访问的链接添加样式。Css 1:visited向已被访问的链接添加样式。Css 1:hover当鼠标悬浮在元素上方时，向元素添加样式。Css 1:active向被激活的元素添加样式。 Css 1:focus向拥有键盘输入焦点的元素添加样式。Css 2:first-letter 向文本的第一个字母添加特殊样式。Css 1:first-line 向文本的首行添加特殊样式。Css 1:before在元素之前添加内容。Css 2:after在元素之后添加内容。Css 2使用方法：Focus的使用：打开某个页码使用tab键连续按，你就可以发现页面的焦点了，一般来讲，页面的图片，超级链接，表单都可以成为焦点。案例二：给表单添加focus效果。代码：Css：.focus-1: focus,.focus-2:focus{border:2px #ff0000 solid;}.focus-3:focus,.focus-4:focus{border:2px #fff000 solid;}Html：input type=text name=focus-1 class=focus-1 value=表单一input type=text name=focus-2 class=focus-2 value=表单二input type=text name=focus-3 class=focus-3 value=表单三input type=text name=focus-4 class=focus-4 value=表单四First的使用：有很多网站总是会把content的第一个字或者每个段落的第一个字使用大写，或者变大size，以醒人目。（letter，line）案例三：内容首字大写。Css ：p{font-size:12px;}p:first-letter{font-size:30px;color:#ff0000;/*padding-left:24px;首行缩进*/}p:first-line{color:#0C9565;}div p em:first-child{color:#0C9;}Html：divpenglish,emenglish/em,english,emenglish/em,english,english,brenglishenglishenglish,brenglish,english,english/pp中文字中em文字中/em文字中br文字中文字中文br字中文字中文字中文字/ppenglish,english,enbrglish,english,engbrlish,english,englishenglibrshenglish,english,english,english/pp中文字中文字中文字中文字中文字br中文字中文字中文字中文字/p/div效果图：Before和after的使用：上面关于浮动的解决方案中已经表现出了after的实力了，学会了after，before也就学会了，这里不在过多熬述。Content属性的使用，使用after，怎content的内容就会出现在焦点的后面。代码：Css：div{border:1px solid #000000;}.a:after {content: after后面;color:red;border:1px solid red;}.b:after {content: after后面;color:red;display:block;border:1px solid red;}.c:before {content: before前面;color:red;border:1px solid red;}Html：div class=azhmkxps space/divbrbrdiv class=bzhmkxps space/divbrbrdiv