網頁CSS布局與設計教材_第1頁
網頁CSS布局與設計教材_第2頁
網頁CSS布局與設計教材_第3頁
網頁CSS布局與設計教材_第4頁
網頁CSS布局與設計教材_第5頁
已閱讀5頁，還剩58頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

<style>.one{color:red;}p.two{color:green;}</style>.one可以用于各種標簽；而.two只能用于p標簽。后代選擇器divp{color:#00FF00}例子：<div><p>我是一個兵。</p></div>高級選擇器p,h1,.one{color:red}偽類選擇器a:link;hover;visited;active或者：a.one:link;a#two:link高級選擇器集體聲明嵌套選擇器選擇器聲明所有的CSS語句都是基于各個標簽之間的繼承關系的，為了更好的理解繼承關系，首先從html文件的組織結構入手CSS的繼承Css文字樣式css段落文字圖片樣式圖片的對齊圖片的混排第4章用Css設置豐富的文字和圖片效果字體：p{font-family:黑體,Arial,"TimesNewRoman",Helvetica,sans-serif}文字大?。篺ont-size文字顏色：color文字粗細：HTML:<b><strong>;CSS:font-weight斜體：font-style:italic；下劃線、頂劃線、刪除線：text-decoration:line-through英文字母大小寫：text-transform:capitalizeCss文字樣式水平對齊：text-align:left;right;center;justify;垂直對齊：vertical-align:top;bottom;middle;(注：對塊級元素<p><div>等不起作用)行間距：line-height:8pt;(絕對數值)1.5em;(相對數值）字間距：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;}圖片樣式圖片縮放圖片的對齊橫向對齊：不能直接設置圖片的text-align，而是通過設置其父元素的該屬性實現。豎直對齊：Vertical-align屬性圖文混排圖片樣式5.1用背景色給頁面分塊5.2背景圖片重復

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

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

子divmargin子div父divcontent當將margin設置為負數時，會使得被設為負數的塊向相反的方向移動，甚至覆蓋在另外的塊上行內元素Marginspan.left{ margin-right:30px; background-color:#a9d6ff;}span.right{

margin-left:-53px;

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

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

float:left; /*塊son1左浮動*/ }父塊的padding

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

position:absolute;/*absolute絕對定位*/ left:20px; /*塊的左邊框離頁面左邊界20px*/ top:40px; /*塊的上邊框離頁面上邊界40px*/}top、right、bottom和left這4個屬性不但可以設置為絕對像素，還可以設置為百分數經驗之談：鑒于瀏覽器之間的差異，建議在設計時只設置left和right這兩個屬性中的一個，以及top和bottom這兩個屬性中的一個Position一個父塊包含兩個子塊的情況，首先將其中一個子塊的position屬性設置為absolute，此時塊1不再屬于父塊#father，子塊2稱為父塊中的第1個子塊Position#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px; position:absolute; /*absolute絕對定位*/ left:30px; top:35px; }如果將兩個子塊的position同時設置為absolute，這時兩個子塊都不再從屬于父塊，都相對于頁面定位技術背景：之所以塊2位于塊1上方，是因為CSS默認后加入到頁面中的元素會覆蓋之前的元素，在頁面中一層層往上寫PositionPosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px;

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

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

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

position:relative; /*relative相對定位*/ left:15px; /*子塊的左邊框距離它原來的位置15px*/ top:10%;}同時設置兩個子塊的position屬性為relativePosition#block1{ background-color:#fff0ac; border:1pxdashed#000000; padding:10px; position:relative; /*relative相對定位*/ left:15px; /*子塊1的左邊框距離它原來的位置15px*/ top:30px; /*子塊1的左邊框距離它原來的位置30px*/}#block2{ background-color:#ffc24c; border:1pxdashed#000000; padding:10px; position:relative; /*relative相對定位*/ left:10px; /*子塊2的左邊框距離它原來的位置10px*/ top:20px; /*子塊2的上邊框距離它原來的位置15px*/}z-index屬性用于調整定位時重疊塊的上下位置，垂直于頁面方向為z軸，z-index值大的頁面位于其值小的上方當塊被設置了position屬性時，該值便可設置各塊之間的重疊高低關系。默認z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關系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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論