CSS 層疊樣式表單
Ctrl+j 彈出自動提示,幫助.
鼠標放到元素上變形狀(鼠標樣式,鼠標形狀變了):cursor: pointer;
元素的顯示模式(display:none)
給控件做文本內容(即label來修飾文本) <label for=”user”>婚否</label><input typ=”checkbox” id=”user”/> 這樣,當點擊”婚否”的時候也可以選中或不選複選框了
<fieldset>
<legend>這是標題</legend>
<input type=”text”/>
<input type=”text”/>
<input type=”text”/>
</fieldset>
上面這個控件相當於 winfor 裏面的 groupbox容器, 就是將一些控件框起來
全局css: *{padding:0;margin:0}
絕對定位/相對定位: position:absolute|relative
Css兼容性問題(在firfox中可以,在IE中不行時,設置元素;z-index:100;position:relative
):例子:選項卡效果
零散知識點:<pre>標籤是去除特殊效果的</pre>
<center>這個標籤代表居中顯示</center>
<br/>和P標籤對的區別: p標籤前後有大量的空白
元素邊緣距離(padding)內邊距, margin 是外邊距
<img alt=” 圖片無法顯示的時候顯示的文字” title=” 是將鼠標放到圖片上的時 候出現的提示信息” />
如果樣式發生衝突,則按樣式優先級來( 1.行內樣式 2.嵌入式樣式 3.外鏈樣式 )
<a href="http://baidu.com/" target="_blank">target設置是否新窗口中打開</a>
<font face="宋體" size="+4" color="#CC0000" style="background-color:#000099">調整字體的, 只調整這個標籤裏的字體，不影響其他</font>
導入外部css樣式表(不常用)
<style type=text/css>
@import style.css
</style>
返回頂部: <a href="#top">返回頂部</a>
設爲首頁: <a οnclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://baidu.com');"href="#">設爲首頁</a>
粗體(加粗) : b標籤對或strong標籤對,css中是 font-weight:bold
斜體 : I標籤對或em標籤對
上劃線/下劃線: u標籤對
縮進 blockquote標籤對
回車換行 : <br/>
橫線: <hr/> 例子: <hr width="500" size="1" noshade="noshade" align="center">
<xmp>取消標籤對裏的所有特效 ,僅僅用於查錯</xmp>
<p align="center">對齊方式</p>
<nobr>取消文字的換行,禁止換行</nobr>
描點,錨點其實就是設置a標籤,超鏈接的href=”#name” name就是想要跳到地 點的控件的name
小技巧:網頁中插入圖片時,最好指定大小,這樣,哪怕圖片沒有加載完成,也會先把位置占上
如果網頁上要顯示小圖(比如縮略圖),不要僅僅是把大圖設定一下width,height來 縮小,因爲任然會下載大圖,會使得加載速度很慢
想要什麼符號的話直接在設計器裏敲就行了( 版權符號©用 © )
自動刷新頁面 < meta http-equiv="Refresh" content="10 ; url=http://yourlink" />
在不同瀏覽器中顯示中文 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
Div中不允許使用 <p></p>,可以用 <span></span>解決
獲取匹配元素在當前視口的相對偏移: kj.offset().left 或者 kj.offset().top 即獲取當前對象的top和left 頂點座標
//遮罩
<style type="text/css">
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:block;z-index:100}
</style>
邊框樣式: border:solid 4px #F60
樣式分類: web樣式 ; 內聯樣式 ; 行列樣式
選擇器: HTML選擇器
DIV{ font-size:100px;}
Class選擇器 ; (可以用到多個標籤)
.wjq{ background-color: red} 然後相應的標籤設置class=”wjq”
ID選擇器 ; (只能用到一個標籤)
#wjq{ background-color: red} 然後相應的標籤設置id=”wjq”
關聯選擇器 ; (意思是class=”.divnum1”內的P標籤使用該樣式)
.DIVNum1 P{ font-size:35px;}
組合選擇器 ; (逗號兩邊的都應用此樣式)
div,p{ font-size:35px;} 或者 .aaa,#bbb{ font-size:35px;}
僞元素選擇器 (針對一個標籤不同的狀態顯示不同的樣式)
a{color:#ccc; font-size:12px;} (正常情況下)
A:visited{TEXT-DECORATION:none} //超鏈接點擊過的樣式
A:active{TEXT-DECORATION:none } //選中超鏈接時的樣式
A:link{TEXT-DECORATION:none} //超鏈接未被訪問過的狀態
A:hover{TEXT-DECORATION:underline} //(當鼠標放上去時)
<body link="#0000CC" alink="#CC6600" vlink="#FF0000">設置正在訪問的鏈接文本顏色,將鼠標指針放在這裏，鏈接文本就會變成紅色，單擊超鏈接，文字的顏色變成第三種</body>
如果想同時使用兩個不同的樣式,如 class=”yangshiyi01 yangshi02” 那麼這個控件同時就同時有了兩個樣式的效果
CSS註釋: 一般在頭部 /*網頁css註釋*/
CSS規範:標籤要成對(標籤對)例: <body></body> 或者 <br/>
CSS屬性: 字體 : text-family:隸書 或者 font-family:’黑體’
單位:px或%
顏色: color:red
字體粗細: font-weight:blod(或3px)
字體風格:font-style:normal(主要定義斜體什麼的)
劃線: text-decoration:none ( 下/上劃線,刪除線(s標籤對),斜線,文字閃爍等)
字母大小寫: text-transform:uppercase (大小寫轉換)
Font-variant : small-caps ( 字母轉爲大寫)
段落 : 水平對齊方式 text-align:right(右對齊) |inherit(繼承父類對齊樣式)
垂直對齊設置: vertical-align:top|middle|bottom|sub|super|10px(相 對於元素行高屬性的百分比)
字母間距:letter-spacing
單詞間距:word-spacing
文本行高:line-height:20px (行與行之間的間距,行間距)如果div中爲 空,如果使用line-height 則他會自動填充 29px的高度,就相當於div中有東西
縮進方式:text-indent:pre
排版方式: white-space:normal|pre(,默認多個空格算一個,但pre將保 留空格個數)|nowrap(不換行,除非遇到br)
邊框 : border-width:
Border-color:
Border-style:
Border
border:30px solid #000 (這是邊框的標準寫法,去掉任意一個都不行)
Border-left:3px dotted #060; (左邊框(虛線),3像素,綠色)虛線(dotted)
Border-style:solid 邊框風格,實線,虛線,點線(dotted)等
背景 : 背景顏色: background-color:red , 第二種寫法bgcolor=”red”
背景圖片: style=”background-image:url(‘/image/123.jpg’)”
背景重複方式設置: background-repeat:repeat-x| no-repeat|…
背景位置設置 background-position:center bottom
background-position:0px 2px
固定背景或滾動背景設置 background-attachment:fixed(填充背景)
合併設置背景樣式例子:
{ background:#00cc00 url(logo.jpg) no-repeat bottom right}
背景音樂: <bgsound src="音頻地址" loop="循環次數">
列表 列表圖片符號 (list-style-image:url(‘logo.jpg’))
列表項的項目符號樣式, 設置時將圖片符號去掉(因爲二者衝突)
(list-style-type: disc(實心圓)|circle(空心圓)|square(方塊)|decimal(阿拉伯數字)|
lower-roman(小寫羅馬數字)|upper-roman(大寫羅馬數字)|
lower-alpha(小寫英文字母)|upper-alpha(大寫英文字母)|none(無項目符號);)
Li不顯示圓點: list-style-type:none ; 一般設在li或者ul上
列表項位置 list-style-position設置值:inside(內部)|outside(外部)
list-style-position: 2px 10px;
<!—type=”disc”可以設置列表項左側符號的樣式-->
<ul type="disc">
<li type="circle" style="font-size:16px">列表項</li>
<li type="circle" style="font-size:16px">列表項</li>
</ul>
表格table 表格寬度和表格內容的關聯方式 table{ table-layout : fixed;}
表格標題的顯示方式和顯示位置
table{ caption-side : bottom; text-align:left} (表格標題在表格上面的左邊)
表格邊框的顯示方式 table{ border-collapse : collapse;}
表格邊框和外邊框之間的距離 table{ border –spacing : }
控制對空單元格的顯示 table{ empty-cells : hide} (空單元格隱藏)
鼠標放入時顯示方式 tr : hover{ color : red;}
表頭的td可以用th代替,這樣就會表頭粗體,居中顯示,建議表頭標題 用<thead>代替<tr>
Rowspan(行跨度), colspan(列跨度)進行單元格的合併,佔用多個單元格
<caption>表格的標題,自動居中,也可以用align設置對齊方式</caption>
border-collapse:collapse; /*是消除單元格之間的間距*/
<thead bgcolor="#CCFFFF">
<th>列標題1</th>
<th>列標題2</th>
<th>列標題3</th>
</thead>
主題: 選擇界面風格：可以用來更改主題
<select onChange="document.styleSheets[0].href=
this.options[this.selectedIndex].value+'.css'" >
<option value="Style/mr" selected>默認風格</ option >
< option value="Style/red">粉紅風情</ option >
</select>
位置 :居中:margin:0 auto (margin是外邊距)
居左/右(左/右漂移):float:left|right
表單 給input添加背景色,背景圖
一條線的文本框
.wjq { border:none; border-bottom:dashed 1px #060; color:#9c0; }
按鈕樣式控制 onMouseOver=”this.className=’.wjq’ ”
彩色的下拉框 給單個option選項單獨設置class樣式即可
類似Excel表格的表單 其實就是前臺表格和後臺數據庫的交互
僞元素 超鏈接的正常狀態( 沒有任何動靜 ) a : link { color:#000 }
訪問過的超鏈接狀態 a : visited { color:#ccc }
光標移動到超鏈接上的狀態 a : hover { color:#f90 }
選中超鏈接時的狀態 a : active { color:#f00 }
段落中的第一行文本 p : first - line {…}
段落中的第一個字母 P : first – letter {…}
h1 : first – child{ color: #ccc; font-size:77px;}
.div.d1>h1:first-child { color:red; font-size:20px; } 與下一句
.d1h1:first-child { color:red; font-size:20px; } 同上一句效果一樣
鼠標樣式: .p1{cursor:url(‘logo.jpg’)} 或者
Style=”cursor:url(圖案的鏈接,後綴名爲.cur)”
.span1{ cursor:move; }
.b1{cursor:text;}
滾動條: Overflow:hidden 隱藏滾動條
例子:.div1{ Overflow-x:hidden|auto 隱藏橫向滾動條;
Overflow-y:scroll 顯示縱向滾動條;
}
以下的滾動條的樣式只對IE起作用,此外還要將代碼第一行刪除
ScrollBar – face – color: red (滾動條突出部分的顏色)
ScrollBar – highlight – color: red (滾動條空白部分的顏色)
ScrollBar – shadow – color: red (立體滾動條陰影的顏色)
ScrollBar – 3Dlight – color: red (滾動條亮邊的顏色)
ScrollBar – arrow – color: red (上下按鈕上三角箭頭的顏色)
ScrollBar – track – color: red ( 滾動條的背景顏色 )
ScrollBar – darkshadow – color: red ( 滾動條強陰影的顏色)
ScrollBar – base – color: red (滾動條的基本顏色)
佈局 DIV 不要將DIV用到文字中,DIV 是用來佈局的
z-index空間位置,( z-index:auto|數字 ) 其實就是設置層疊div的層疊順序
層(div ) 塊( span)
層:<div></div>將內容放到層中,就以這些內容當成一個整體進行 處理,比如整體隱藏,整體移動等,div非常強大和常用
塊:<span> div是將內容放到一個矩形的區域中(整體性),會影 響佈局,而span只是把一段內容定義成一個整體進行操作,但不 影響該佈局顯示.
框架結構iframe(浮動框架) 和水平垂直(frameSet)框架:其頁面名稱不允許包含特殊字符,連接符,空格,等必須是單個的單詞或者字母組合
<!--如果希望將同一個瀏覽器窗口進行水平分割,又進行垂直分割,就需要用到嵌套框架技術了-->
<!--frameborder屬性是設置邊框的 framespacing是設置邊框寬度的 bordercolor是設置邊框顏色的 -->
<!--noresize 是禁止調整框架窗口尺寸只要加上這個單詞就是禁止 -->
<!--marginwidth設置框架邊框與頁面內容的水平邊距 marginheight 設置邊框與頁面內容的垂直邊距 -->
<!--scrolling = "是否顯示滾動條" -->
<!-- <noframes></noframes> 標籤對是當瀏覽器不支持框架頁面時替換的內容 -->
<!--在原網頁中寫入超鏈接里加入屬性 target="網頁框架中的frame名稱" 那麼在框架網頁中點擊鏈接相應位置就會跳轉到這個超鏈接的地址-->
<!--設置浮動框架-->
<iframe src=http://baidu.com/ name="k" width="76" scrolling scrolling="yes"></iframe>
<!如果要使用frameset,name靜態網頁中就不能寫body及其裏面的內容,即沒有body>
<!--下面又是一個構架的嵌套-->
<frameset rows="163*,430*" framespacing="10" frameborder="yes" border="11" bordercolor="#CC0000">
<frame src="http://www.baidu.com/" name="top01">
<framesetcols="60*,100*" >
<frame src="http://www.baidu.com/" name="left01">
<frameset rows="100*,100*" >
<frame src="http://www.baidu.com/" name="right01">
<frame src="http://www.baidu.com/" name="right02">
</frameset>
<noframes>對不起,您的瀏覽器不支持框架頁面</noframes>
</frameset>
</frameset>
調用iframe: 在同一頁面中,iframe以外的 A 標籤或者按鈕(linkButton等)的target=”本頁中 iframe的name”,則當點擊A標籤時, 鏈接到的頁面就會顯示在iframe框架中
例子: 加入本頁iframe以外有個<a href="http://baidu.com" target="ifame123">
那麼本頁中名爲 iframe123 就會裝載百度頁面
其他 display : block (塊級元素,上下顯示) | inline(行級元素,一行顯示)|
inline-block(行級塊元素) | list-item (列表級元素)| none
Float : left | right | none
Clear: left(清除左側浮動屬性)|right(清除右側浮動屬性)|
None(不清除)|both(兩邊清除)
Visibility : hidden (隱藏,但保留空間位置)| visible
Display: none(隱藏,並刪除保留位,即內容,空間位同時消失)
裁切 clip: rect(top|right|bottom|left) auto
元素溢出後如何處理 Overflow:visible| hidden(將超出部分隱藏)| scroll| auto (自動產生滾動條)
超鏈接(url鏈接地址格式):“/” 表示網站根目錄
“../”表示父目錄
“http://www.cnblogs.com/”表示父目錄的父目錄
“./”或者不寫任何斜線(反斜槓)表示相對於當前路 徑的目錄,站內引用最好相對URL ,這樣域名改變了,目錄改變了都不受影響
Src=”/image/pic01.jpg”; 這是正確的
Src=”../image/pic01.jpg”; 這是正確的
Src=”image/pic01.jpg”; 這是錯誤的
控件
Radio單選按鈕:相同name屬性的爲一組(分組),不同的radio設置不同的value值來區分
File 文件選擇控件 把 enctype必須設置爲multipart/form-data, method屬性爲post
Select下拉列表控件,如果size屬性大於1就是listbox ,
(在listbox的option中如果multiple=”設置是否可以多選”)
combobox,<select multiple>或者<select multiple=”multiple”>(推薦),那麼就是可以多選的listbox
Select中的項是<option>這是一個待選項</option>
<option selected>設置本項爲選中項</selected>或者
<option selected=”selected”>設置本項爲選中項</selected>(推薦)
如何實現”不選擇” 添加一個<option value=”-1”>不選擇</option>然後編程判斷select 選中的值如果是-1 就認爲是不選擇
Select分組選項,可以使用optgroup 對數據進行分組,分組本身不會被選擇,無論對於下拉列表還是列表框都使用
分組演示:
<select size=”3”>
<optgrouplabel=”亞洲”>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label=”歐洲”>
<option>法國</option>
<option>德國</option>
<option>英國</option>
</optgroup>
</select>
<textarea cols=”100” rows=”10”> 多行文本</textarea>
Image或者img圖像圖片標籤: 一些屬性 alt提示文字 Border邊框 hspace 水 平間距 vspace垂直間距 align對齊方式(多種) lowsrc 設置低分 辨率圖片 usemap 印象地圖
embed播放流媒體文件: <embed src="音頻視頻地址" width="400px" height="400px" autostart="true(是否自動播放)" loop="true(是否循環)" hidden="false(是否隱藏面板)">播放器需要一個播放插件</embed>
marquee滾動,圖片滾動,文字滾動
<marquee direction="right" behavior="scroll" loop="-1" scrollamount="3" scrolldelay="3" bgcolor="#FF0000" width="500" height="50">這是設置滾動效果的文字</marquee>
一些屬性: direction 設置滾動方向 behavior 滾動方式----循環滾動 ;滾動一次就停; 來回交替滾動 loop循環次數 scrollamount 滾動速度 scrolldelay 滾動延遲
Ctrl+j 彈出自動提示,幫助.
鼠標放到元素上變形狀(鼠標樣式,鼠標形狀變了):cursor: pointer;
元素的顯示模式(display:none)
給控件做文本內容(即label來修飾文本) <label for=”user”>婚否</label><input typ=”checkbox” id=”user”/> 這樣,當點擊”婚否”的時候也可以選中或不選複選框了
<fieldset>
<legend>這是標題</legend>
<input type=”text”/>
<input type=”text”/>
<input type=”text”/>
</fieldset>
上面這個控件相當於 winfor 裏面的 groupbox容器, 就是將一些控件框起來
全局css: *{padding:0;margin:0}
絕對定位/相對定位: position:absolute|relative
Css兼容性問題(在firfox中可以,在IE中不行時,設置元素;z-index:100;position:relative
):例子:選項卡效果
零散知識點:<pre>標籤是去除特殊效果的</pre>
<center>這個標籤代表居中顯示</center>
<br/>和P標籤對的區別: p標籤前後有大量的空白
元素邊緣距離(padding)內邊距, margin 是外邊距
<img alt=” 圖片無法顯示的時候顯示的文字” title=” 是將鼠標放到圖片上的時 候出現的提示信息” />
如果樣式發生衝突,則按樣式優先級來( 1.行內樣式 2.嵌入式樣式 3.外鏈樣式 )
<a href="http://baidu.com/" target="_blank">target設置是否新窗口中打開</a>
<font face="宋體" size="+4" color="#CC0000" style="background-color:#000099">調整字體的, 只調整這個標籤裏的字體，不影響其他</font>
導入外部css樣式表(不常用)
<style type=text/css>
@import style.css
</style>
返回頂部: <a href="#top">返回頂部</a>
設爲首頁: <a οnclick="this.style.behavior='url(#default#homepage)';
this.sethomepage('http://baidu.com');"href="#">設爲首頁</a>
粗體(加粗) : b標籤對或strong標籤對,css中是 font-weight:bold
斜體 : I標籤對或em標籤對
上劃線/下劃線: u標籤對
縮進 blockquote標籤對
回車換行 : <br/>
橫線: <hr/> 例子: <hr width="500" size="1" noshade="noshade" align="center">
<xmp>取消標籤對裏的所有特效 ,僅僅用於查錯</xmp>
<p align="center">對齊方式</p>
<nobr>取消文字的換行,禁止換行</nobr>
描點,錨點其實就是設置a標籤,超鏈接的href=”#name” name就是想要跳到地 點的控件的name
小技巧:網頁中插入圖片時,最好指定大小,這樣,哪怕圖片沒有加載完成,也會先把位置占上
如果網頁上要顯示小圖(比如縮略圖),不要僅僅是把大圖設定一下width,height來 縮小,因爲任然會下載大圖,會使得加載速度很慢
想要什麼符號的話直接在設計器裏敲就行了( 版權符號©用 © )
自動刷新頁面 < meta http-equiv="Refresh" content="10 ; url=http://yourlink" />
在不同瀏覽器中顯示中文 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
Div中不允許使用 <p></p>,可以用 <span></span>解決
獲取匹配元素在當前視口的相對偏移: kj.offset().left 或者 kj.offset().top 即獲取當前對象的top和left 頂點座標
//遮罩
<style type="text/css">
.mask {width:100%;height:100%; background-color:#000;position:absolute;
top:0px;left:0px;filter:alpha(opacity=30);display:block;z-index:100}
</style>
邊框樣式: border:solid 4px #F60
樣式分類: web樣式 ; 內聯樣式 ; 行列樣式
選擇器: HTML選擇器
DIV{ font-size:100px;}
Class選擇器 ; (可以用到多個標籤)
.wjq{ background-color: red} 然後相應的標籤設置class=”wjq”
ID選擇器 ; (只能用到一個標籤)
#wjq{ background-color: red} 然後相應的標籤設置id=”wjq”
關聯選擇器 ; (意思是class=”.divnum1”內的P標籤使用該樣式)
.DIVNum1 P{ font-size:35px;}
組合選擇器 ; (逗號兩邊的都應用此樣式)
div,p{ font-size:35px;} 或者 .aaa,#bbb{ font-size:35px;}
僞元素選擇器 (針對一個標籤不同的狀態顯示不同的樣式)
a{color:#ccc; font-size:12px;} (正常情況下)
A:visited{TEXT-DECORATION:none} //超鏈接點擊過的樣式
A:active{TEXT-DECORATION:none } //選中超鏈接時的樣式
A:link{TEXT-DECORATION:none} //超鏈接未被訪問過的狀態
A:hover{TEXT-DECORATION:underline} //(當鼠標放上去時)
<body link="#0000CC" alink="#CC6600" vlink="#FF0000">設置正在訪問的鏈接文本顏色,將鼠標指針放在這裏，鏈接文本就會變成紅色，單擊超鏈接，文字的顏色變成第三種</body>
如果想同時使用兩個不同的樣式,如 class=”yangshiyi01 yangshi02” 那麼這個控件同時就同時有了兩個樣式的效果
CSS註釋: 一般在頭部 /*網頁css註釋*/
CSS規範:標籤要成對(標籤對)例: <body></body> 或者 <br/>
CSS屬性: 字體 : text-family:隸書 或者 font-family:’黑體’
單位:px或%
顏色: color:red
字體粗細: font-weight:blod(或3px)
字體風格:font-style:normal(主要定義斜體什麼的)
劃線: text-decoration:none ( 下/上劃線,刪除線(s標籤對),斜線,文字閃爍等)
字母大小寫: text-transform:uppercase (大小寫轉換)
Font-variant : small-caps ( 字母轉爲大寫)
段落 : 水平對齊方式 text-align:right(右對齊) |inherit(繼承父類對齊樣式)
垂直對齊設置: vertical-align:top|middle|bottom|sub|super|10px(相 對於元素行高屬性的百分比)
字母間距:letter-spacing
單詞間距:word-spacing
文本行高:line-height:20px (行與行之間的間距,行間距)如果div中爲 空,如果使用line-height 則他會自動填充 29px的高度,就相當於div中有東西
縮進方式:text-indent:pre
排版方式: white-space:normal|pre(,默認多個空格算一個,但pre將保 留空格個數)|nowrap(不換行,除非遇到br)
邊框 : border-width:
Border-color:
Border-style:
Border
border:30px solid #000 (這是邊框的標準寫法,去掉任意一個都不行)
Border-left:3px dotted #060; (左邊框(虛線),3像素,綠色)虛線(dotted)
Border-style:solid 邊框風格,實線,虛線,點線(dotted)等
背景 : 背景顏色: background-color:red , 第二種寫法bgcolor=”red”
背景圖片: style=”background-image:url(‘/image/123.jpg’)”
背景重複方式設置: background-repeat:repeat-x| no-repeat|…
背景位置設置 background-position:center bottom
background-position:0px 2px
固定背景或滾動背景設置 background-attachment:fixed(填充背景)
合併設置背景樣式例子:
{ background:#00cc00 url(logo.jpg) no-repeat bottom right}
背景音樂: <bgsound src="音頻地址" loop="循環次數">
列表 列表圖片符號 (list-style-image:url(‘logo.jpg’))
列表項的項目符號樣式, 設置時將圖片符號去掉(因爲二者衝突)
(list-style-type: disc(實心圓)|circle(空心圓)|square(方塊)|decimal(阿拉伯數字)|
lower-roman(小寫羅馬數字)|upper-roman(大寫羅馬數字)|
lower-alpha(小寫英文字母)|upper-alpha(大寫英文字母)|none(無項目符號);)
Li不顯示圓點: list-style-type:none ; 一般設在li或者ul上
列表項位置 list-style-position設置值:inside(內部)|outside(外部)
list-style-position: 2px 10px;
<!—type=”disc”可以設置列表項左側符號的樣式-->
<ul type="disc">
<li type="circle" style="font-size:16px">列表項</li>
<li type="circle" style="font-size:16px">列表項</li>
</ul>
表格table 表格寬度和表格內容的關聯方式 table{ table-layout : fixed;}
表格標題的顯示方式和顯示位置
table{ caption-side : bottom; text-align:left} (表格標題在表格上面的左邊)
表格邊框的顯示方式 table{ border-collapse : collapse;}
表格邊框和外邊框之間的距離 table{ border –spacing : }
控制對空單元格的顯示 table{ empty-cells : hide} (空單元格隱藏)
鼠標放入時顯示方式 tr : hover{ color : red;}
表頭的td可以用th代替,這樣就會表頭粗體,居中顯示,建議表頭標題 用<thead>代替<tr>
Rowspan(行跨度), colspan(列跨度)進行單元格的合併,佔用多個單元格
<caption>表格的標題,自動居中,也可以用align設置對齊方式</caption>
border-collapse:collapse; /*是消除單元格之間的間距*/
<thead bgcolor="#CCFFFF">
<th>列標題1</th>
<th>列標題2</th>
<th>列標題3</th>
</thead>
主題: 選擇界面風格：可以用來更改主題
<select onChange="document.styleSheets[0].href=
this.options[this.selectedIndex].value+'.css'" >
<option value="Style/mr" selected>默認風格</ option >
< option value="Style/red">粉紅風情</ option >
</select>
位置 :居中:margin:0 auto (margin是外邊距)
居左/右(左/右漂移):float:left|right
表單 給input添加背景色,背景圖
一條線的文本框
.wjq { border:none; border-bottom:dashed 1px #060; color:#9c0; }
按鈕樣式控制 onMouseOver=”this.className=’.wjq’ ”
彩色的下拉框 給單個option選項單獨設置class樣式即可
類似Excel表格的表單 其實就是前臺表格和後臺數據庫的交互
僞元素 超鏈接的正常狀態( 沒有任何動靜 ) a : link { color:#000 }
訪問過的超鏈接狀態 a : visited { color:#ccc }
光標移動到超鏈接上的狀態 a : hover { color:#f90 }
選中超鏈接時的狀態 a : active { color:#f00 }
段落中的第一行文本 p : first - line {…}
段落中的第一個字母 P : first – letter {…}
h1 : first – child{ color: #ccc; font-size:77px;}
.div.d1>h1:first-child { color:red; font-size:20px; } 與下一句
.d1h1:first-child { color:red; font-size:20px; } 同上一句效果一樣
鼠標樣式: .p1{cursor:url(‘logo.jpg’)} 或者
Style=”cursor:url(圖案的鏈接,後綴名爲.cur)”
.span1{ cursor:move; }
.b1{cursor:text;}
滾動條: Overflow:hidden 隱藏滾動條
例子:.div1{ Overflow-x:hidden|auto 隱藏橫向滾動條;
Overflow-y:scroll 顯示縱向滾動條;
}
以下的滾動條的樣式只對IE起作用,此外還要將代碼第一行刪除
ScrollBar – face – color: red (滾動條突出部分的顏色)
ScrollBar – highlight – color: red (滾動條空白部分的顏色)
ScrollBar – shadow – color: red (立體滾動條陰影的顏色)
ScrollBar – 3Dlight – color: red (滾動條亮邊的顏色)
ScrollBar – arrow – color: red (上下按鈕上三角箭頭的顏色)
ScrollBar – track – color: red ( 滾動條的背景顏色 )
ScrollBar – darkshadow – color: red ( 滾動條強陰影的顏色)
ScrollBar – base – color: red (滾動條的基本顏色)
佈局 DIV 不要將DIV用到文字中,DIV 是用來佈局的
z-index空間位置,( z-index:auto|數字 ) 其實就是設置層疊div的層疊順序
層(div ) 塊( span)
層:<div></div>將內容放到層中,就以這些內容當成一個整體進行 處理,比如整體隱藏,整體移動等,div非常強大和常用
塊:<span> div是將內容放到一個矩形的區域中(整體性),會影 響佈局,而span只是把一段內容定義成一個整體進行操作,但不 影響該佈局顯示.
框架結構iframe(浮動框架) 和水平垂直(frameSet)框架:其頁面名稱不允許包含特殊字符,連接符,空格,等必須是單個的單詞或者字母組合
<!--如果希望將同一個瀏覽器窗口進行水平分割,又進行垂直分割,就需要用到嵌套框架技術了-->
<!--frameborder屬性是設置邊框的 framespacing是設置邊框寬度的 bordercolor是設置邊框顏色的 -->
<!--noresize 是禁止調整框架窗口尺寸只要加上這個單詞就是禁止 -->
<!--marginwidth設置框架邊框與頁面內容的水平邊距 marginheight 設置邊框與頁面內容的垂直邊距 -->
<!--scrolling = "是否顯示滾動條" -->
<!-- <noframes></noframes> 標籤對是當瀏覽器不支持框架頁面時替換的內容 -->
<!--在原網頁中寫入超鏈接里加入屬性 target="網頁框架中的frame名稱" 那麼在框架網頁中點擊鏈接相應位置就會跳轉到這個超鏈接的地址-->
<!--設置浮動框架-->
<iframe src=http://baidu.com/ name="k" width="76" scrolling scrolling="yes"></iframe>
<!如果要使用frameset,name靜態網頁中就不能寫body及其裏面的內容,即沒有body>
<!--下面又是一個構架的嵌套-->
<frameset rows="163*,430*" framespacing="10" frameborder="yes" border="11" bordercolor="#CC0000">
<frame src="http://www.baidu.com/" name="top01">
<framesetcols="60*,100*" >
<frame src="http://www.baidu.com/" name="left01">
<frameset rows="100*,100*" >
<frame src="http://www.baidu.com/" name="right01">
<frame src="http://www.baidu.com/" name="right02">
</frameset>
<noframes>對不起,您的瀏覽器不支持框架頁面</noframes>
</frameset>
</frameset>
調用iframe: 在同一頁面中,iframe以外的 A 標籤或者按鈕(linkButton等)的target=”本頁中 iframe的name”,則當點擊A標籤時, 鏈接到的頁面就會顯示在iframe框架中
例子: 加入本頁iframe以外有個<a href="http://baidu.com" target="ifame123">
那麼本頁中名爲 iframe123 就會裝載百度頁面
其他 display : block (塊級元素,上下顯示) | inline(行級元素,一行顯示)|
inline-block(行級塊元素) | list-item (列表級元素)| none
Float : left | right | none
Clear: left(清除左側浮動屬性)|right(清除右側浮動屬性)|
None(不清除)|both(兩邊清除)
Visibility : hidden (隱藏,但保留空間位置)| visible
Display: none(隱藏,並刪除保留位,即內容,空間位同時消失)
裁切 clip: rect(top|right|bottom|left) auto
元素溢出後如何處理 Overflow:visible| hidden(將超出部分隱藏)| scroll| auto (自動產生滾動條)
超鏈接(url鏈接地址格式):“/” 表示網站根目錄
“../”表示父目錄
“http://www.cnblogs.com/”表示父目錄的父目錄
“./”或者不寫任何斜線(反斜槓)表示相對於當前路 徑的目錄,站內引用最好相對URL ,這樣域名改變了,目錄改變了都不受影響
Src=”/image/pic01.jpg”; 這是正確的
Src=”../image/pic01.jpg”; 這是正確的
Src=”image/pic01.jpg”; 這是錯誤的
控件
Radio單選按鈕:相同name屬性的爲一組(分組),不同的radio設置不同的value值來區分
File 文件選擇控件 把 enctype必須設置爲multipart/form-data, method屬性爲post
Select下拉列表控件,如果size屬性大於1就是listbox ,
(在listbox的option中如果multiple=”設置是否可以多選”)
combobox,<select multiple>或者<select multiple=”multiple”>(推薦),那麼就是可以多選的listbox
Select中的項是<option>這是一個待選項</option>
<option selected>設置本項爲選中項</selected>或者
<option selected=”selected”>設置本項爲選中項</selected>(推薦)
如何實現”不選擇” 添加一個<option value=”-1”>不選擇</option>然後編程判斷select 選中的值如果是-1 就認爲是不選擇
Select分組選項,可以使用optgroup 對數據進行分組,分組本身不會被選擇,無論對於下拉列表還是列表框都使用
分組演示:
<select size=”3”>
<optgrouplabel=”亞洲”>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label=”歐洲”>
<option>法國</option>
<option>德國</option>
<option>英國</option>
</optgroup>
</select>
<textarea cols=”100” rows=”10”> 多行文本</textarea>
Image或者img圖像圖片標籤: 一些屬性 alt提示文字 Border邊框 hspace 水 平間距 vspace垂直間距 align對齊方式(多種) lowsrc 設置低分 辨率圖片 usemap 印象地圖
embed播放流媒體文件: <embed src="音頻視頻地址" width="400px" height="400px" autostart="true(是否自動播放)" loop="true(是否循環)" hidden="false(是否隱藏面板)">播放器需要一個播放插件</embed>
marquee滾動,圖片滾動,文字滾動
<marquee direction="right" behavior="scroll" loop="-1" scrollamount="3" scrolldelay="3" bgcolor="#FF0000" width="500" height="50">這是設置滾動效果的文字</marquee>
一些屬性: direction 設置滾動方向 behavior 滾動方式----循環滾動 ;滾動一次就停; 來回交替滾動 loop循環次數 scrollamount 滾動速度 scrolldelay 滾動延遲