web網(wǎng)頁界面設(shè)計(jì)_第1頁
web網(wǎng)頁界面設(shè)計(jì)_第2頁
web網(wǎng)頁界面設(shè)計(jì)_第3頁
web網(wǎng)頁界面設(shè)計(jì)_第4頁
web網(wǎng)頁界面設(shè)計(jì)_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

主講人：洪小平《網(wǎng)頁設(shè)計(jì)》

CSS樣式設(shè)計(jì)與使用〔5〕《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院學(xué)習(xí)內(nèi)容1.CSS定位與DIV布局的根本概念2.CSS定位與DIV布局的應(yīng)用Part2:CSS定位與DIV布局的根本概念1.<div>標(biāo)記與<span>標(biāo)記<div>〔division〕簡單而言就是一個(gè)區(qū)塊容器標(biāo)記，即<div>與</div>之間相當(dāng)于一個(gè)容器。可以容納各類HTML元素。聲明時(shí)只要對(duì)<div>進(jìn)行相應(yīng)的控制，其中的各標(biāo)記元素都會(huì)因此而改變。例10-1.html一般情況下，<span>作用與<div>類似《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院兩者的區(qū)別：〔1〕<div>是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。而<span>僅僅是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。<span>沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不適宜時(shí)，就可以使用<span>元素?！?〕<span>標(biāo)記可以包含于<div>標(biāo)記之中，成為它的子元素，而反過來那么不成立，即<span>標(biāo)記不能包含<div>標(biāo)記。例10-2.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院2.盒子模型〔1〕盒子模型的概念一個(gè)盒子模型由content〔內(nèi)容〕\padding〔間隙〕\border〔邊框〕\margin〔間隔〕這四個(gè)局部組成。一個(gè)盒子的寬度或高度是由content+padding+border+margin組成?！毒W(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔2〕BORDER屬性一般用于別離元素，border的外圍即為元素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將border納入。border的屬性主要有三個(gè):color〔顏色〕:#FFFFFFwidth〔寬度〕:thin\medium\thick和〔length:具體的數(shù)值〕，默認(rèn)情況下是medium，數(shù)值大約是2px寬。style〔樣式〕:none\hidden\dotted\dashed\solid\double\groove\ridge\inset\outset等。其中，none和hidden都是不顯示border。實(shí)例10-3.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔3〕paddingpadding用于控制content與border之間的距離，在10-4.html中參加padding-bottom的語句，即可查看效果不同。例10-4.html例10-6.html備注說明：可以看到內(nèi)<div>塊與外<div>塊之間的padding，從上方開始按照順時(shí)針方向，依次為10px、30px、50px、100px。因此，可以在需要設(shè)置padding四個(gè)方向的值時(shí)，可以將4個(gè)語句合并一起，用padding語法統(tǒng)一書寫。《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔4〕marginmargin指的是元素與元素之間的距離通過修改10-4.html來了解margin的含義。在其中參加margin-bottom語句。效果見例10-8.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院3.元素的定位PositionFloatz-index《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔1〕Float其值很簡單，可設(shè)置為left\right\默認(rèn)值none。當(dāng)設(shè)置了元素向左或向右浮動(dòng)時(shí)，元素會(huì)向其父元素的左側(cè)或右側(cè)靠緊。例10-14.html10-14.html上例定義了三個(gè)<div>塊，其中一個(gè)父塊，兩外兩個(gè)是它的子塊?！毒W(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院Float屬性值的設(shè)定實(shí)例當(dāng)沒有設(shè)置塊son1向左浮動(dòng)前，頁面效果當(dāng)設(shè)置塊son1的float的值為left時(shí)，頁面效果《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院分析如下在設(shè)置float為left之前，它的寬度撐滿了整個(gè)父塊，空隙僅僅為父塊的padding和它自己的margin，而設(shè)置了float為left后，塊son1的寬度僅僅為它的內(nèi)容本身加上自己的margin。例10-15.html。在例10-14.html中子塊son1向左移動(dòng)，對(duì)于父塊而言它的內(nèi)容就已經(jīng)不屬于父塊了，因此父塊的高度變短，同時(shí)子塊son2向上移動(dòng)。盡管子塊son2的邊框撐滿了整個(gè)父塊，但是其具體內(nèi)容沒有與son1重疊，而是圍繞在son1的周圍，并且保持著son1塊設(shè)置的margin距離。因此，如果son2不設(shè)置邊框和背景，那么效果上就是環(huán)繞著son1塊。例如首字放大的實(shí)例將子塊son1不動(dòng)，而將子塊son2設(shè)置為向右浮動(dòng)，其效果可以發(fā)現(xiàn)son2向右浮動(dòng)到了父塊的右邊，父塊的高度也相應(yīng)的變短了，但是塊son1卻沒有受到任何影響。例10-16.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院案例練習(xí)10-18-0.html、10-18.html10-19-0.html、10-19.html知識(shí)點(diǎn)：在css中可以通過設(shè)置塊元素的clear屬性，去除對(duì)float的影響，修改<h3>標(biāo)記的css屬性。Clear:left；去除float對(duì)左側(cè)的影響。Clear:both；去除float對(duì)兩側(cè)的影響。《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔2〕PositionPosition從字面上看就是指定塊的位置，即塊相對(duì)于其父塊的位置和相對(duì)于它自身應(yīng)該所在的位置。Position屬性總共有四個(gè)值，分別為static\absolute\relative\fixed。默認(rèn)的為static。Absolute表示絕對(duì)位置，例10-20.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院代碼解讀<styletype="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;width:100%;height:100%;}#block{background-color:#fff0ac;border:1pxdashed#000000;padding:10px;position:absolute;/*absolute絕對(duì)定位*/

left:20px;/*塊的左邊框離頁面左邊界20px*/top:40px;/*塊的上邊框離頁面上邊界40px*/}--></style>《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院當(dāng)設(shè)置為Absolute時(shí)，子塊已經(jīng)不再附屬于父塊，其左邊框相對(duì)頁面<body>左邊的距離為20px,這個(gè)距離已經(jīng)不是相對(duì)父塊的左邊框的距離了。子塊的上邊框相對(duì)于頁面<body>上邊的距離為40px，這個(gè)距離也不是相對(duì)于父塊的上邊的距離了。補(bǔ)充知識(shí)點(diǎn)TOP、right、bottom、left這四個(gè)css屬性，它們都是配合position屬性使用的，表示的是塊的各個(gè)邊界離頁面邊框的距離，或各個(gè)邊界離原來位置的距離。只有當(dāng)position屬性設(shè)置為absolute或者relative時(shí)才能生效。這四個(gè)值不但可以設(shè)置為像素，也可以設(shè)置為百分?jǐn)?shù)。10-21.Html、、、10-22.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院操作實(shí)例技巧：有時(shí)一個(gè)父塊包含兩個(gè)子塊的情況將一個(gè)子塊的position屬性設(shè)置為absolute后的效果。例：10-23.html假設(shè)將兩個(gè)子塊的position都設(shè)置為Absolute，這時(shí)兩個(gè)子塊都將不再屬于其父塊，都相對(duì)于頁面定位。例：10-24.html當(dāng)兩個(gè)的position屬性都設(shè)置為absolute時(shí)，他們都按照各自的屬性進(jìn)行了定位，都不再屬于其父塊。兩個(gè)子塊重疊的局部，塊2位于塊1的上方。當(dāng)將塊的position參數(shù)設(shè)置為relative時(shí)，與將其設(shè)置為absolute時(shí)完全不同，這時(shí)子塊是相對(duì)于其父塊來進(jìn)行定位的。同樣配合top\right\bottom\left四個(gè)屬性來使用。例：10-25.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院〔3〕Z-index《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院定位實(shí)例：文字陰影效果操作分析：首先建立兩個(gè)<div>塊，內(nèi)容都是文字本身，然后將其中一個(gè)<div>塊設(shè)置為陰影的顏色，用CSS定位移動(dòng)到適宜的位置。最后再用z-index調(diào)整重疊關(guān)系即可。10-28.html《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院代碼分析：#block1{ position:relative; z-index:1;}#block2{ color:#AAAAAA;/*陰影顏色*/

position:relative; top:-1.06em; /*移動(dòng)陰影*/

left:0.1em;

z-index:0; /*陰影重疊關(guān)系*/

}《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院網(wǎng)頁常用布局之CSS代碼body{ font-family:"Arial"; font-size:13px; margin-top:0px;}《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院#container{ position:relative; width:100%; }#banner{ height:80px; border:1pxsolid#000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; }《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院#content{ float:left; }#links{ float:right; width:200px; text-align:center; border:1pxsolid#000000; margin-left:-200px; }《網(wǎng)頁設(shè)計(jì)》浙江金融職業(yè)學(xué)院#footer{ clear:both; text-align:center; height:30px; bord

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論