DIV+CSS 常用代碼大全

07-24

* html .classdao {} 6.0*+html .classdao {} 7.0

DISPLAY: block;塊狀元素

注釋代碼裡面放中文會引起多出行或著很多不確認因素文字溢出和浮動錯位等

style="cursor:hand" 手型顯示

<u></u>加下劃線

清除浮動:clear:both

IE6.0下margin-left雙倍距解決方法:加入:display: inline;

.class_r_x li:hover,.class_r_x li.hover {background: #FFE8E8;} 滑鼠經過變色

文本欄位:input{}[PS:全局定義]

<span class="cuo_" DISABLED>本站聲明 <a href="#">閱讀>></a></span> 直接給文字加陰影「DISABLED」

-------------------------------------------------------------------

FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000,

EndColorStr=#ffffff); 加在css裡面實現漸變的效果

-------------------------------------------------------------------

display:none;隱藏DIV

-------------------------------------------------------------------

.main{width:950px;MARGIN: 0px auto;}

段落縮進:text-indent:2em

.target a:active {test:expression(target="_blank");}定義整站所有的鏈接都新窗口打開

layout-flow: vertical-ideographic;字體豎排

火狐下取消前面的點：list-style:none

<font color="#006699"> 您的手機號碼：</font>

none : 默認值 SPAN:對象指定內嵌文本容器

border="0"圖邊框位0 border:0;

.hangleftcenfootdi02 li{float:left;padding:0 7px;font:normal 100% Tahoma,sans-serif;border-right:1px solid #333333;}/*導航樣式*/

display=block, block表示該元素顯示為一個塊級元素，單獨佔一行 none表示該元素不顯示，並且不在網頁上佔位

white-space: nowrap 屬性實現禁止文字自動換行

font-weight:700 字體的粗細 font-family:Georgia; 好看的數字字體

color:#0000FF 字體的顏色 font-size:12px 字體的大小

font-family: 金梅毛行書; 限制字體

line-height:180% 行間的高度

position:absolute; bottom:0; DIV居底部

font-family:"宋體" 字體的選擇

color:#FF0000 顏色的控制

letter-spacing:2px 字間距的控制

border: 1px solid #FF0000 邊線 1px是寬度；solid是形態，這裡表示實線，再如dotted和dashed是虛線；#000是顏色。( border-bottom:1px solid #D3D3D3; border-left:1px solid #D3D3D3; border-right:1px solid #D3D3D3; 它可以分別對邊線進行定義，四個方向)

text-decoration: none; 下滑線

BORDER-BOTTOM: #ddd 1px dashed; 點陣虛線[大]

<hr size="1" noshade="noshade" style="border:1px #cccccc dotted;"/> 點陣虛線[小]

text-align 對齊元素中的文本(4個方向) text-align:center; 垂直排列-底部vertical-align:bottom;

background-color: #999999; 背景色

background-image: url(/images/200804242338220.jpg); 背景圖

background:url(../../img/esyj_/arrowy.gif) no-repeat 4px 3px;

background:url(../images/top_bg.jpg) top center no-repeat; 底圖居頂

BACKGROUND: url(/img/body_bg.gif) repeat-y center 50%; 解決背景拉伸與上下延伸的問題

BACKGROUND: url(../img/background.png) #fff repeat-x 0px 0px 背景居頂橫鋪其餘的地方為白色

background-repeat:no-repeat; 背景禁止拉伸

FLOAT: center; 框里平行居中(4個方向)

margin-top: 100px; 間距整體邊距(4個方向)

padding-top:??px來設置對象的內下邊距的樣式對應的有left(左邊) right(右邊) bottom(底部) top(頂部) 定義全局邊距：padding:10px;

display:inline 可用來水平排列對象去掉li前面的點：list-style:none;

OVERFLOW: hidden;內容會被修剪，但是瀏覽器不會顯示供查看內容的滾動條。

absolute是絕對定位，relative是相對定位寫法「position:absolute;

margin:(外邊距)（包含四個方向）

padding:（內邊距）（包含四個方向）

<img src="images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！

a:link {color: #F00;text-decoration: none;} 鏈接顏色a:visited {text-decoration: none;} 已訪問鏈接a:hover {text-decoration: none;color: #00F;} 變換圖象鏈接a:active {text-decoration: none;} 活動鏈接一般情況下不要這欄

text-decoration: underline; 下劃線

上下居中：line-height:25px;

#main_08_info_08_txt LI span.class_01

給LI裡面重新定義樣式我們習慣用ID來定義如果用CLASS的話會讀不到樣式

圖片樣式.yjcs_biao_images li{ width:128px; height:100px; float:left;margin:0 0 20px 14px; text-align:center;}.yjcs_biao_images img{ width:120px; height:80px;border: 1px solid #BDD5ED; padding:3px 3px 3px 3px; float:left; margin:0 0 10px 0}

滑鼠移上去以後變成手的形狀 style="cursor:hand"

浮動 .news_x_l_top_01_tu .hover_bg_txt { margin-left:-180px;PADDING-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 15px; PADDING-TOP: 0px; POSITION: absolute; TOP: 440px; HEIGHT: 15px; text-align:center; color: Blue; background-color:#E6E6E6}

[PS：TOP為整站的定位；margin-top:10px;相對定位]

如何讓圖片和文字在同一條水平容器中居中對齊可以用有個很簡單的解決辦法就是在圖片上加個樣式vertical-align:middle;放在圖片的代碼里

/*給圖片加鏈接色*/

#qita_qg li A IMG {BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid}#qita_qg li A:visited IMG {BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid}#qita_qg li A:hover IMG {BORDER-RIGHT: #eb0156 1px solid; BORDER-TOP: #eb0156 1px solid; BORDER-LEFT: #eb0156 1px solid; BORDER-BOTTOM: #eb0156 1px solid}

------------------------------------------網站共用----------------------------------------------------------

* {PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP:0px}

body,div,img,ul,li,span,p,br { margin:0; padding:0;border:0;}body { font-size:12px; color:#666;margin:0 auto 0 auto; width:950px;}li { list-style:none;display: inline;}a { font-size:12px; color:#666; text-decoration:none;}a:hover { text-decoration:underline; color:#F60;}img{ border:none;vertical-align:middle;}h1{font-size:12px; font-weight:bold; color:#000000; float:left}h2{font-size:14px; font-weight:bold; color:#000000; float:left}

PNG透明的方法:<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../meihuabao_logo.png);width:1px;height:1px"></div>