> 웹 프론트엔드 > HTML 튜토리얼 > DIV+CSS中10句新手最有用的css代码[转]_html/css_WEB-ITnose

DIV+CSS中10句新手最有用的css代码[转]_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:28:57
원래의
1320명이 탐색했습니다.

以个人经验总结了一下比较常用的css小技巧,希望能给新手朋友有所帮助:

1.float:left
功能:使多个div平行并排
用法:



2.clear:both
功能:多个div平行并排的时,不得不加一个空div用clear:both进行描述。因为如果不加以限制,IE显示正常,而firefox则排版错误。
用法:

3.margin:0 auto
功能:如果你要让页面居中对齐,而宽度并不等于屏幕宽度。这样margin:0 auto就会显示其巨大的价值
用法:

4.margin:0px
功能:你是否有页面中添加一个form然后怎么调也调不好其排版,它总是给你换行或者撑大外容器。只要用margin:0px即可
用法:

5.margin:-x px
功能:如果要将一个img和一个span文字内容并排,你会发现高低总会不一致。这样就可以用margin定义外边距,这个数值可以是负的
用法:
DIV+CSS中10句新手最有用的css代码[转]_html/css_WEB-ITnose(表示图片向上移2px)
6.padding:x px
功能:怎么样才能让内容和容器有一定的间距呢?这就是内边距padding的作用,这儿之所以把它提出来是要注意它的用法
用法:
Here is data!
(这个div的显示高度是多少?30px)
7.line-height:x px
功能:许多时候一段文字太紧密,看起来心烦。那就将其行间距拉大,这儿用line-height定义其行高
用法:
Here is data!

8.a
功能:定义链接属性。许多时候新手容易问:为什么我定义了css属性却显示不正确?那么你很有可能写乱了a的顺序,正确的顺序应该是lvha
用法:
a:link{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
a:visited{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
a:hover{
font-size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline; 
}
a:actived{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
9:border:0px
功能:如果你给一个img加了链接,那么就会出现一个讨厌的边框,这时候将其定义为0去掉它。
用法:
DIV+CSS中10句新手最有用的css代码[转]_html/css_WEB-ITnose
10:display:none
功能:有时候可能需要隐藏对象,这时候用display最合适。特别是在许多在线编辑器的编辑模式时最有用
用法:

(往数据库新加内容时)

(更新数据库内容时使用)
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿