網(wǎng)頁(yè)CSS布局與設(shè)計(jì)教材_第1頁(yè)
網(wǎng)頁(yè)CSS布局與設(shè)計(jì)教材_第2頁(yè)
網(wǎng)頁(yè)CSS布局與設(shè)計(jì)教材_第3頁(yè)
網(wǎng)頁(yè)CSS布局與設(shè)計(jì)教材_第4頁(yè)
網(wǎng)頁(yè)CSS布局與設(shè)計(jì)教材_第5頁(yè)
已閱讀5頁(yè)，還剩58頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)頁(yè)CSS布局與設(shè)計(jì)什么是Web標(biāo)準(zhǔn)web表現(xiàn)層技術(shù)，結(jié)構(gòu)，表現(xiàn)，行為CSS布局與table布局的區(qū)別傳統(tǒng)的table布局VS.CSS布局css+div編寫(xiě)工具選擇第1章Web標(biāo)準(zhǔn)與css布局概述使用CSS編輯器如Dreamweaver、Frontpage等都會(huì)自帶CSS編輯器。使用超文本編輯器如Dreamweaver、Frontpage等超文本編輯器均可編輯樣式表；記事本CSS+div編寫(xiě)工具選擇HTML基礎(chǔ)，選擇合適的doctype，選擇合適的標(biāo)簽Css的概念使用css控制頁(yè)面體驗(yàn)css第2章HTML與CSS基礎(chǔ)CSS(cascadingstylesheet)，層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)分離的一種標(biāo)識(shí)性語(yǔ)言。CSS是1996由W3C審核通過(guò)，并且推薦使用的。CSS的引入就是為了使HTML語(yǔ)言更好的適應(yīng)頁(yè)面的美工設(shè)計(jì)。它以HTML語(yǔ)言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁(yè)設(shè)計(jì)者可以針對(duì)各種可視化瀏覽器（包括顯示器、打印機(jī)、打字機(jī)、投影儀和PDA等）來(lái)設(shè)置不同的樣式風(fēng)格。CSS的引入引發(fā)了網(wǎng)頁(yè)設(shè)計(jì)一個(gè)又一個(gè)的新高潮。使用CSS設(shè)計(jì)的優(yōu)秀頁(yè)面層出不窮。和HTML類(lèi)似，CSS也是由W3C組織負(fù)責(zé)制定和發(fā)布的。1996年12月發(fā)布了CSS1.0規(guī)范，1998年發(fā)5月布了2.0規(guī)范。目前的有兩個(gè)新版本正處于工作狀態(tài)，即2.1版和3.0版。CSS的概念行內(nèi)樣式對(duì)標(biāo)記使用style屬性<pstyle="color:#ff0000;font-size:20px;text-decoration:underline;">正文內(nèi)容1</p><pstyle="color:#000000;font-style:italic;">正文內(nèi)容2</p><pstyle="color:#ff00ff;font-size:25px;font-weight:bold;">正文內(nèi)容3</p>使用css控制頁(yè)面內(nèi)嵌樣式用<style></style>聲明，寫(xiě)在<head></head>中<style>p{color:#ff00ff;text-decoration:underline;font-weight:bold;font-size:25px;}</style><p>紫色、粗體、下劃線(xiàn)、25px的效果1</p><p>紫色、粗體、下劃線(xiàn)、25px的效果2</p>使用CSS控制頁(yè)面鏈接樣式獨(dú)立css代碼文件頁(yè)面：<h2>css標(biāo)題1</h2><p>紫色、粗體、下劃線(xiàn)、25px的效果1</p><h2>css標(biāo)題2</h2><p>紫色、粗體、下劃線(xiàn)、25px的效果2</p>使用css控制頁(yè)面Css文件：h2{color:#0000ff;}p{color:#ff00ff;text-decoration:underline;font-weight:bold;font-size:20px;}使用css控制頁(yè)面導(dǎo)入樣式<styletype="text/css">@importurl(1.2.css);</style>使用CSS控制頁(yè)面從高到低：行內(nèi)樣式、鏈接式、內(nèi)嵌式、導(dǎo)入式各種優(yōu)先級(jí)問(wèn)題Css選擇器選擇器聲明css的繼承第3章Css的基本語(yǔ)法CSS選擇器CSS選擇器CSS選擇器子類(lèi)選擇器p.one{color:red}實(shí)例：

<style>.one{color:red;}p.two{color:green;}</style>.one可以用于各種標(biāo)簽；而.two只能用于p標(biāo)簽。后代選擇器divp{color:#00FF00}例子：<div><p>我是一個(gè)兵。</p></div>高級(jí)選擇器p,h1,.one{color:red}偽類(lèi)選擇器a:link;hover;visited;active或者：a.one:link;a#two:link高級(jí)選擇器集體聲明嵌套選擇器選擇器聲明所有的CSS語(yǔ)句都是基于各個(gè)標(biāo)簽之間的繼承關(guān)系的，為了更好的理解繼承關(guān)系，首先從html文件的組織結(jié)構(gòu)入手CSS的繼承Css文字樣式css段落文字圖片樣式圖片的對(duì)齊圖片的混排第4章用Css設(shè)置豐富的文字和圖片效果字體：p{font-family:黑體,Arial,"TimesNewRoman",Helvetica,sans-serif}文字大?。篺ont-size文字顏色：color文字粗細(xì)：HTML:<b><strong>;CSS:font-weight斜體：font-style:italic；下劃線(xiàn)、頂劃線(xiàn)、刪除線(xiàn)：text-decoration:line-through英文字母大小寫(xiě)：text-transform:capitalizeCss文字樣式水平對(duì)齊：text-align:left;right;center;justify;垂直對(duì)齊：vertical-align:top;bottom;middle;(注：對(duì)塊級(jí)元素<p><div>等不起作用)行間距：line-height:8pt;(絕對(duì)數(shù)值)1.5em;(相對(duì)數(shù)值）字間距：letter-spacing:2pt;1.5em;css段落文字圖片邊框HTML:<imgsrc="hehua.gif"border="0">例4.1img{border-style:dotted;dashed;solid;double;groove;ridge;……border-color:#ff9900;border-width:5px;}圖片樣式圖片縮放圖片的對(duì)齊橫向?qū)R：不能直接設(shè)置圖片的text-align，而是通過(guò)設(shè)置其父元素的該屬性實(shí)現(xiàn)。豎直對(duì)齊：Vertical-align屬性圖文混排圖片樣式5.1用背景色給頁(yè)面分塊5.2背景圖片重復(fù)

background-repeat5.3背景圖片位置background-position:30px(em%)5.4固定背景圖片background-attachment:fixed注：writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。第5章用Css設(shè)置網(wǎng)頁(yè)中的背景控制表格隔行變色日歷CSS與表單文字一樣的按鈕第6章用Css設(shè)置表格與表單的樣式豐富的超鏈接特效鼠標(biāo)特效第7章用Css設(shè)置頁(yè)面和瀏覽器的元素項(xiàng)目列表無(wú)需表格的菜單第8章用Css制作實(shí)用的菜單<div>標(biāo)記與<span>標(biāo)記盒子模型元素定位第9章理解css定位與div布局<div>塊級(jí)元素，其包圍元素自動(dòng)換行。中間可包含<span><span>行內(nèi)元素，他的前后不會(huì)換行。中間不能包含<div><div>標(biāo)記與<span>標(biāo)記所有頁(yè)面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間可以通過(guò)調(diào)整盒子的邊框和距離等參數(shù)，來(lái)調(diào)節(jié)盒子的位置一個(gè)盒子模型由content(內(nèi)容)、padding(間隙)、border(邊框)、margin(間隔)這四個(gè)部分組成一個(gè)盒子的實(shí)際寬度（高度）是由content+padding+border+margin組成的在CSS中可以通過(guò)設(shè)定width和height的值來(lái)控制content的大小技術(shù)背景：在瀏覽器中，width和height的值都是width+padding或者h(yuǎn)eight+padding的值，因此在實(shí)際做網(wǎng)頁(yè)時(shí)需要特別注意。另外在頁(yè)面具體排版時(shí)，如果<div>塊中包含子<div>塊，情況會(huì)比較復(fù)雜。盒子模型一般用于分離元素，border的外圍即為元素的最外圍，因此計(jì)算元素的實(shí)際的寬和高時(shí)，將border納入border屬性：color、width、stylewidth即border的粗細(xì)程度，可以設(shè)定為thin、medium、thick和具體值。默認(rèn)值為medium，一般的瀏覽器都將其解析為2px寬style屬性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等注：對(duì)于groove、inset、outset和ridge這幾種值，IE支持不理想，不推薦使用border如果希望在某段文字結(jié)束后加上虛線(xiàn)用于分割，而不是用border將這段話(huà)框起來(lái)，可以通過(guò)單獨(dú)設(shè)置border-bottom來(lái)完成注意：在特定情況下給元素設(shè)置background-color背景色時(shí)，IE作用的區(qū)域?yàn)閏ontent+padding，而firefox則是content+padding+borderborder<pstyle="border-bottom:8pxdottedblue;">.cell{ border:10pxdashed#000000; text-align:center;

background-color:#e799f8;}padding用于控制content與border之間的距離技術(shù)背景：在瀏覽器中如果使用width或是height屬性指定了父塊的寬或高，由于width或height值中包含padding，content會(huì)受到padding的擠壓。在網(wǎng)頁(yè)設(shè)計(jì)中，也可以利用這一點(diǎn)實(shí)現(xiàn)許多效果。在CSS排版中需要同時(shí)設(shè)置4個(gè)方向的padding值時(shí)，可以將4個(gè)語(yǔ)句合成到一起Padding<pstyle="border-bottom:8pxdottedblue;padding-bottom:30px;">.outside{padding:10px30px50px100px/*同時(shí)設(shè)置，順時(shí)針*/}margin：指元素與元素之間的距離兩個(gè)塊并排(行內(nèi)元素)Margin<pstyle="border-bottom:8pxdottedblue;padding-bottom:30px;margin-bottom:60px;">span1span2margin-rightmargin-leftmargin-right+margin-left兩個(gè)塊并排（塊級(jí)元素）Margindiv1div2div1的margin-bottomdiv2的margin-top兩者中較大者margin-bottom父子關(guān)系：當(dāng)一個(gè)<div>塊包含在另一個(gè)<div>塊中間時(shí)，將形成典型的父子關(guān)系。其中子塊的margin將以父塊的content為參考Margin父div

子divmargin子div父divcontent當(dāng)將margin設(shè)置為負(fù)數(shù)時(shí)，會(huì)使得被設(shè)為負(fù)數(shù)的塊向相反的方向移動(dòng)，甚至覆蓋在另外的塊上行內(nèi)元素Marginspan.left{ margin-right:30px; background-color:#a9d6ff;}span.right{

margin-left:-53px;

/*設(shè)置為負(fù)數(shù)*/ background-color:#eeb0b0;}用CSS方法對(duì)頁(yè)面中塊元素進(jìn)行定位float、position、z-indexfloat：left、right、none（默認(rèn)值）。當(dāng)設(shè)置了元素向左或者向右浮動(dòng)時(shí)，元素會(huì)向其父元素的左側(cè)或右側(cè)靠緊。塊son1浮動(dòng)到最左端的位置是父塊的padding-left加上自己的margin-left，而不是父塊的邊界border元素的定位.son1{ padding:10px; /*子塊son1的padding*/ margin:5px; /*子塊son1的margin*/ background-color:#70baff; border:1pxdashed#111111;

float:left; /*塊son1左浮動(dòng)*/ }將son1的margin設(shè)置為負(fù)數(shù)，子塊能浮動(dòng)到的最左端依然是父塊的padding-left加上這個(gè)負(fù)數(shù)元素的定位.son1{ padding:10px; /*子塊son1的padding*/ margin:5px0px0px-35px; /*負(fù)數(shù)margin*/ background-color:#70baff; border:1pxdashed#111111;

float:left; /*塊son1左浮動(dòng)*/ }父塊的padding

子塊的margin子塊float:left經(jīng)驗(yàn)之談：除了margin-left和margin-right，margin-top與margin-bottom也都可以設(shè)置為負(fù)數(shù)。類(lèi)似將margin設(shè)置為負(fù)數(shù)的方法在實(shí)際排版中十分常見(jiàn)，也可以很好的利用，制作出各式各樣的頁(yè)面版式元素的定位position：指定塊的位置，即塊相對(duì)于父塊的位置和相對(duì)于它自身應(yīng)該在的位置position:static(默認(rèn))、absolute、relative和fixedstatic:表示塊保持在原本應(yīng)該在的位置，即該值沒(méi)有任何移動(dòng)效果absolute:表示絕對(duì)位置，設(shè)置為absolute時(shí)，子塊已經(jīng)不再?gòu)膶儆诟笁K，其左邊框相對(duì)于頁(yè)面<body>左邊的距離為20px，這個(gè)距離已經(jīng)不是相對(duì)父塊的左邊框的距離了技術(shù)背景：top、right、bottom和left這4個(gè)CSS屬性，它們都是配合pasition屬性使用的，表示的是塊的各個(gè)邊界離頁(yè)面邊框（當(dāng)position設(shè)置為absolute）的距離，或各個(gè)邊界離原來(lái)位置（當(dāng)position設(shè)為relative）的距離PositionPosition#block{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px;

position:absolute;/*absolute絕對(duì)定位*/ left:20px; /*塊的左邊框離頁(yè)面左邊界20px*/ top:40px; /*塊的上邊框離頁(yè)面上邊界40px*/}top、right、bottom和left這4個(gè)屬性不但可以設(shè)置為絕對(duì)像素，還可以設(shè)置為百分?jǐn)?shù)經(jīng)驗(yàn)之談：鑒于瀏覽器之間的差異，建議在設(shè)計(jì)時(shí)只設(shè)置left和right這兩個(gè)屬性中的一個(gè)，以及top和bottom這兩個(gè)屬性中的一個(gè)Position一個(gè)父塊包含兩個(gè)子塊的情況，首先將其中一個(gè)子塊的position屬性設(shè)置為absolute，此時(shí)塊1不再屬于父塊#father，子塊2稱(chēng)為父塊中的第1個(gè)子塊Position#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px; position:absolute; /*absolute絕對(duì)定位*/ left:30px; top:35px; }如果將兩個(gè)子塊的position同時(shí)設(shè)置為absolute，這時(shí)兩個(gè)子塊都不再?gòu)膶儆诟笁K，都相對(duì)于頁(yè)面定位技術(shù)背景：之所以塊2位于塊1上方，是因?yàn)镃SS默認(rèn)后加入到頁(yè)面中的元素會(huì)覆蓋之前的元素，在頁(yè)面中一層層往上寫(xiě)PositionPosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px;

position:absolute; /*absolute絕對(duì)定位*/ left:30px; top:35px; }#block2{ background-color:#ffbd76; border:1pxdashed#000000; padding:10px;

position:absolute; /*absolute絕對(duì)定位*/ left:50px; top:60px; }position設(shè)置為relative時(shí)，子塊是相對(duì)于其父塊來(lái)進(jìn)行定位的，同樣配合top、right、bottom和left這4個(gè)屬性如果希望子塊的寬度僅僅為其內(nèi)容加上自己的padding值，可以將它的float屬性設(shè)置為left，或者指定其寬度widthPosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px;

position:relative; /*relative相對(duì)定位*/ left:15px; /*子塊的左邊框距離它原來(lái)的位置15px*/ top:10%;}將其中一個(gè)塊的position設(shè)置為relativePosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px;

position:relative; /*relative相對(duì)定位*/ left:15px; /*子塊的左邊框距離它原來(lái)的位置15px*/ top:10%;}同時(shí)設(shè)置兩個(gè)子塊的position屬性為relativePosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px; position:relative; /*relative相對(duì)定位*/ left:15px; /*子塊1的左邊框距離它原來(lái)的位置15px*/ top:30px; /*子塊1的左邊框距離它原來(lái)的位置30px*/}#block2{ background-color:#ffc24c; border:1pxdashed#000000; padding:10px; position:relative; /*relative相對(duì)定位*/ left:10px; /*子塊2的左邊框距離它原來(lái)的位置10px*/ top:20px; /*子塊2的上邊框距離它原來(lái)的位置15px*/}z-index屬性用于調(diào)整定位時(shí)重疊塊的上下位置，垂直于頁(yè)面方向?yàn)閦軸，z-index值大的頁(yè)面位于其值小的上方當(dāng)塊被設(shè)置了position屬性時(shí)，該值便可設(shè)置各塊之間的重疊高低關(guān)系。默認(rèn)z-index值為0，當(dāng)兩個(gè)塊的z-index值一樣時(shí)，將保持原有的高低覆蓋關(guān)系Z-index空間位置#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px; position:absolute; left:20px; top:30px; z-index:1; /*高低值1*/}#block2{ background-color:#ffc24c; border:1pxdashed#000000; padding:10px; position:absolute; left:40px; top:50px; z-index:0; /*高低值0*/}#block3{

溫馨提示

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

評(píng)論

0/150

提交評(píng)論