3.4、邊框?qū)傩?/a>
3.5、鼠標(biāo)光標(biāo)屬性
3.6、定位屬性
3.7、區(qū)塊屬性
3.8、列表屬性
3.3.4、邊框?qū)傩?a id="030304" name="030304">
不同方向的邊框?qū)傩匀绫硭荆?br />
| 邊框?qū)傩?/th>
| 描述 |
| border |
邊框 |
| border-top |
上邊框 |
| border-left |
左邊框 |
| border-right |
右邊框 |
| border-bottom |
下邊框 |
對(duì)于邊框的樣式，可以按照下表中所示進(jìn)行設(shè)置：
| 邊框樣式屬性值 |
描述 |
| none |
無(wú)邊框 |
| dotted |
邊框由點(diǎn)組成 |
| dash |
邊框由短線組成 |
| solid |
邊框是實(shí)線 |
| double |
邊框是雙實(shí)線 |
| groove |
邊框帶有立體感的溝槽 |
| ridge |
邊框成脊型 |
| inset |
邊框內(nèi)嵌一個(gè)立體邊框 |
| outset |
邊框外嵌一個(gè)立體邊框 |
范例文件：13-18.htm
1 <!-- ------------------------------ -->
2 <!-- 文件范例：13-18.htm -->
3 <!-- 文件說(shuō)明：CSS邊框 -->
4 <!-- ------------------------------ -->
5 <HTML>
6 <HEAD>
7 <TITLE>CSS背景圖像位置</TITLE>
8 <Style Type="text/css">
9 <!--
10 P{
11 border-top: 2px solid #990000;
12 border-right: 2px solid #3399FF;
13 border-bottom: 2px solid #00FF33;
14 border-left: 2px solid #CC33FF;
15 }
16 -->
17 </Style>
18 </HEAD>
19 <BODY>
20 <H1>主流的網(wǎng)頁(yè)設(shè)計(jì)軟件</H1>
21 <p>目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現(xiàn)在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁(yè)設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
22 </BODY>
23 </HTML>
文件說(shuō)明：
第10～15行分別設(shè)定了上、右、下、左4個(gè)邊框的寬度、邊框樣式和顏色。
顯示結(jié)果：
3.4.5、鼠標(biāo)光標(biāo)屬性
| 鼠標(biāo)光標(biāo)屬性值 |
描述 |
| hand |
手 |
| crosshair |
交叉十字 |
| text |
文本選擇符號(hào) |
| wait |
Windows 的沙漏形狀 |
| default |
默認(rèn)的鼠標(biāo)形狀 |
| help |
帶問(wèn)號(hào)的鼠標(biāo) |
| e-resize |
向東的箭頭 |
| ne-resize |
指向東北方的箭頭 |
| n-resize |
向北的箭頭 |
| nw-resize |
指向西北方的箭頭 |
| w-resize |
向西的箭頭 |
| sw-resize |
指向西南方的箭頭 |
| s-resize |
向南的箭頭 |
| se-resize |
指向東南方的箭頭 |
范例文件：13-19.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-19.htm -->
<!-- 文件說(shuō)明：CSS鼠標(biāo)光標(biāo)屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS鼠標(biāo)光標(biāo)屬性</TITLE>
<Style Type="text/css">
<!--
Body{
CURSOR:CROSSHAIR
}
IMG{
Cursor:help
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁(yè)設(shè)計(jì)軟件</H1>
<img src=13-19.jpg align=left>
<P>目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現(xiàn)在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁(yè)設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</P>
</BODY>
</HTML>
顯示結(jié)果：
3.4.6、定位屬性
| 定位屬性 |
描述 |
| position |
“absolute”（絕對(duì)定位）、“relative”（相對(duì)定位） |
| top |
層距離頂點(diǎn)縱坐標(biāo)的距離 |
| left |
層距離頂點(diǎn)橫坐標(biāo)的距離 |
| width |
層的寬度 |
| height |
層的高度 |
| z-index |
決定層的先后順序和覆蓋關(guān)系，值高的元素會(huì)覆蓋值比較低的元素 |
| clip |
限定只顯示裁切出來(lái)的區(qū)域，裁切出的區(qū)域?yàn)榫匦巍Ｖ灰O(shè)定兩個(gè)點(diǎn)即可，一個(gè)是矩形左上角的頂點(diǎn)，由top和right兩項(xiàng)的設(shè)置完成，另一個(gè)是右下角的頂點(diǎn)，由bottom和 right 兩項(xiàng)設(shè)置完成 |
| overflow |
當(dāng)層內(nèi)的內(nèi)容超出層所能容納的范圍時(shí)：
visible：層的大小、內(nèi)容都會(huì)顯示出來(lái)
hidden：會(huì)隱藏超出層大小的內(nèi)容
scrol：不管內(nèi)容是否超出層的范圍，選中此項(xiàng)都會(huì)為層添加滾動(dòng)條
auto：只在內(nèi)容超出層的范圍時(shí)才顯示滾動(dòng)條
|
| visibility |
這一項(xiàng)是針對(duì)嵌套層的設(shè)置，嵌套層是插入在其他層中的層，分為嵌套的層（子層）和被嵌套的層（父層）
inherit：子層繼承父層的可見(jiàn)性，父層可見(jiàn)，子層也可見(jiàn)；父層不可見(jiàn)，子層也不可見(jiàn)
visible：無(wú)論父層可見(jiàn)與否，子層都可見(jiàn)
hidden：無(wú)論父層可見(jiàn)與否，子層都隱藏
|
范例文件：13-20.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-20.htm -->
<!-- 文件說(shuō)明：CSS定位屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS定位屬性</TITLE>
<Style Type="text/css">
<!--
.self{
position:absolute;
top:80px;
left:50px;
width:300px;
height:100px;
overflow:auto;
background-color:#336699;
color:#FFFFFF;
z-index:1;
visibility:visible;
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁(yè)設(shè)計(jì)軟件</H1>
<div class="self">目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現(xiàn)在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁(yè)設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</div>
</BODY>
</HTML>
顯示結(jié)果：
3.4.7、區(qū)塊屬性
| 區(qū)塊屬性 |
描述 |
| width |
設(shè)定對(duì)象的寬度 |
| height |
設(shè)定對(duì)象的高度 |
| float |
讓文字環(huán)繞在一個(gè)元素的四周 |
| clear |
指定在某一個(gè)元素的某一邊是否允許有環(huán)繞的文字或?qū)ο?/td>
|
| padding |
決定了究竟在邊框與內(nèi)容之間應(yīng)該插入多少空間距離，它有4個(gè)屬性，分別是：top、bottom、left、right，分別用于設(shè)定上下左右的填充距離 |
| margin |
設(shè)置一個(gè)元素在4個(gè)方向上與瀏覽器窗口邊界或上一級(jí)元素的邊界的距離。與“padding”類(lèi)似，它也有上下左右4個(gè)屬性，分別控制4個(gè)方向 |
范例文件：13-21.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-21.htm -->
<!-- 文件說(shuō)明：CSS區(qū)塊屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS區(qū)塊屬性</TITLE>
<Style Type="text/css">
<!--
.self{
width:300px;
height:100px;
MARGIN-TOP: 20PX;
MARGIN-RIGHT: 30PX;
MARGIN-BOTTOM: 20PX;
MARGIN-LEFT: 30PX
}
-->
</Style>
</HEAD>
<BODY>
<H1>主流的網(wǎng)頁(yè)設(shè)計(jì)軟件</H1>
<div class=self>目前，網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段，現(xiàn)在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了，人們現(xiàn)在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性。而Macromedia公司的網(wǎng)頁(yè)設(shè)計(jì)三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設(shè)計(jì)的杰出代表，其最新版本MX繼承了前期版本的優(yōu)點(diǎn)，進(jìn)行了功能的進(jìn)一步整合，非常適合于網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)的需要。</div>
</BODY>
</HTML>
顯示結(jié)果：
3.4.8、列表屬性
| 列表屬性 |
描述 |
| list-style-type |
設(shè)定引導(dǎo)列表選項(xiàng)的符號(hào)類(lèi)型 |
| bullet |
選擇圖像作為項(xiàng)目的引導(dǎo)符號(hào) |
| position |
決定列表項(xiàng)目縮進(jìn)的程度，outside：列表貼近左側(cè)邊框；inside：列表縮進(jìn) |
| 列表符號(hào)類(lèi)型屬性值 |
描述 |
| disc |
在文本行前面加“●”實(shí)心園 |
| circle |
在文本行前面加“○”空心園 |
| square |
在文本行前面加“■”實(shí)心方塊 |
| decimal |
在文本行前面加普通的阿拉伯?dāng)?shù)字 |
| lower-roman |
在文本行前面加小寫(xiě)羅馬數(shù)字 |
| upper-roman |
在文本行前面加大寫(xiě)羅馬數(shù)字 |
| lower-alpha |
在文本行前面加小寫(xiě)英文字母 |
| upper-alpha |
在文本行前面加大寫(xiě)英文字母 |
| none |
不顯示任何項(xiàng)目符號(hào)或編號(hào) |
范例文件：13-22.htm
<!-- ------------------------------ -->
<!-- 文件范例：13-22.htm -->
<!-- 文件說(shuō)明：CSS列表屬性 -->
<!-- ------------------------------ -->
<HTML>
<HEAD>
<TITLE>CSS列表屬性</TITLE>
<Style Type="text/css">
<!--
li{
list-style-type:upper-roman;
}
-->
</Style>
</HEAD>
<BODY>
<H2>圖像設(shè)計(jì)軟件</H2>
<OL>
<LI>Photoshop</LI>
<LI>Illustrator</LI>
<LI>Freehand</LI>
<LI>CorelDraw</LI>
</OL>
</BODY>
</HTML>
顯示結(jié)果：
posted on 2007-10-08 17:18
CoderDream 閱讀(4217)
評(píng)論(2) 編輯 收藏 所屬分類(lèi):
CSS