第1章利用CSS設(shè)計頁面排版_第1頁
第1章利用CSS設(shè)計頁面排版_第2頁
第1章利用CSS設(shè)計頁面排版_第3頁
第1章利用CSS設(shè)計頁面排版_第4頁
第1章利用CSS設(shè)計頁面排版_第5頁
已閱讀5頁，還剩67頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

主講教師：CSS+DIV網(wǎng)頁布局技術(shù)教程項目一：利用CSS設(shè)計頁面排版引言HTML語言是所有網(wǎng)頁制作的基礎(chǔ)。CSS可以讓頁面變得更簡潔，更容易保護(hù)。在本項目中，通過1個項目導(dǎo)入、3個工作任務(wù)實踐、1個上機實訓(xùn)，向讀者傳遞網(wǎng)頁中字體樣式、顏色、段落格式的重要性，展示出CSS字體和文字屬性設(shè)計出精美的網(wǎng)頁正文版式。任務(wù)一：使用繼承制作網(wǎng)頁本節(jié)內(nèi)容CSS基本語法CSS的概念CSS選擇器繼承1.土的固體顆粒CSS的概念CSS（CascadingStyleSheet），中文譯為層疊樣式表，它用于控制網(wǎng)頁式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS是1996年由W3C審核通過，并且推薦使用的。簡單地說，CSS的引入就是為了使得HTML語言能夠更好地適應(yīng)頁面的美工設(shè)計。它以HTML語言為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景和整體排版等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格，包括顯示器、打印機、打字機、投影儀和PDA等。CSS的引入隨即引發(fā)了網(wǎng)頁設(shè)計一個又一個新高潮，使用CSS設(shè)計的優(yōu)秀頁面層出不窮。2.

CSS基本語法1．土的三相比例指標(biāo)換算公式CSS代碼可以放在HTML文件的<style>標(biāo)簽內(nèi)，也可以放在網(wǎng)頁標(biāo)簽的style屬性中，但推薦用法是放在單獨的樣式表文件中，然后通過<link>標(biāo)簽或者@import命令導(dǎo)入網(wǎng)頁文檔。CSS樣式表文件是一個文件文件，擴展名為.css，可以使用任何文本編輯器打開，并進(jìn)行編輯。CSS代碼被分割為一個個樣式，它也是CSS代碼的最小單元。每一個CSS樣式都必須由兩部分組成：選擇器（selector）和聲明（declaration）。聲明又包括屬性（prperty）和屬性值（value）。在每個聲明之后要用分號表示一個聲明的結(jié)束。其中，在樣式的最后一條聲明中可以省略分號。但建議使用分號結(jié)束聲明?；菊Z法如下。Selector{Propery:value;}例如：body{padding:0px;}上面的樣式定義了body元素的兩個屬性，即設(shè)置頁面字體大小和顏色，如圖1-7所示。圖1-7CSS樣式構(gòu)成一個或多個樣式就構(gòu)成了一個樣式表，如一個樣式表文件所包含的所有樣式就可以稱為一個樣式表，即上部樣式表，一個<style>標(biāo)簽包含的所有樣式也可以稱一個樣式表，即內(nèi)部樣式表。一個網(wǎng)頁文檔中可以定義或者綁定多個樣式表，上部樣式表和內(nèi)部樣式表可以同時存在于一個網(wǎng)頁文檔中，它們之間通過一定的優(yōu)先級作用于匹配對象。其中，body是選擇器，表示元素本身，即<body>標(biāo)簽；padding是屬性，表示補白（也稱內(nèi)邊距），0px表示屬性值。這條件樣式所呈現(xiàn)的效果是清除頁面與瀏覽器邊框之間的距離，實現(xiàn)頁面與瀏覽器邊框無縫顯示。一個樣式不是僅可以包含一個聲明，而是可以包含無限個聲明。聲明之間使用分號隔開，例如：body{font:14px;color:#000;}body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}每一條css樣式定義由兩部分組成，形式如下：[code]選擇器{樣式}[/code]在{}之前的部分就是“選擇器”?！斑x擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。CSS包括的選擇器分別有標(biāo)簽選擇器、ID選擇器、類型選擇器、偽類選擇器、后類選擇器、子選擇器、通用選擇器、相鄰選擇器及屬性選擇器。3.CSS選擇器標(biāo)簽選擇器一個完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽。采用相應(yīng)的CSS樣式，在style.css文件中對p標(biāo)簽樣式的聲明如下：p{font-size:12px;background:#900;color:090;}復(fù)制代碼則頁面中所有p標(biāo)簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護(hù)中，如果想改變整個網(wǎng)站中p標(biāo)簽背景的顏色，只需要修改background屬性就可以。CSSID選擇器ID選擇器使用“#”前綴標(biāo)識符進(jìn)行標(biāo)識，后面緊跟著指定元素的ID名稱。語法如下：*#intro{font-weight:bold;}與類選擇器一樣，ID選擇器中可以忽略通配選擇器。前面的例子也可以寫作：#intro{font-weight:bold;}這個選擇器的效果將是一樣的。第二個區(qū)別是ID選擇器不引用class屬性的值，毫無疑問，它要引用id屬性中的值。以下是一個實際ID選擇器的例子：<pid="intro">Thisisaparagraphofintroduction.</p>類選擇器類選擇器允許以一種獨立于文檔元素的方式來指定樣式。使用以下語法向這些歸類的元素應(yīng)用樣式，即類名前有一個點號（.），然后結(jié)合通配選擇器：*.important{color:red;}如果用戶只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響：.important{color:red;}該選擇器可以單獨使用，也可以與其他元素結(jié)合使用。要應(yīng)用樣式而不考慮具體設(shè)計的元素，最常用的方法就是使用類選擇器。在使用類選擇器之前，需要修改具體的文檔標(biāo)記，以便類選擇器正常工作。為了將類選擇器的樣式與元素關(guān)聯(lián)，必須將class指定為一個適當(dāng)?shù)闹怠Ｕ埧聪旅娴腍TML代碼：<h1class="important">Thisheadingisveryimportant.</h1><pclass="important">Thisparagraphisveryimportant.</p>在上面的代碼中，兩個元素的class都指定為important：第一個標(biāo)題（h1元素），第二個段落（p元素）。偽類選擇器偽類選擇器包括偽類選擇器和偽類對象選擇器，以冒號（:）作為前綴，冒號后緊跟偽類或偽對象名稱，冒號前后沒有空格，否則將解析為包含選擇器。偽類的語法如下：selector:pseudo-class{property:value}CSS類也可與偽類搭配使用。selector.class:pseudo-class{property:value}1）錨偽類在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。a:link{color:#FF0000} /*未訪問的鏈接*/a:visited{color:#00FF00} /*已訪問的鏈接*/a:hover{color:#FF00FF} /*鼠標(biāo)移動到鏈接上*/a:active{color:#0000FF} /*選定的鏈接*/2）偽類與CSS類偽類可以與CSS類配合使用：a.red:visited{color:#FF0000}<aclass="red"href="css_syntax.asp">CSSSyntax</a>假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。CSS2-:first-child偽類用戶可以使用:first-child偽類來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解，所以有必要舉例來說明?？紤]以下標(biāo)記：<div><p>Thesearethenecessarysteps:</p><ul><li>IntertKey</li><li>Turnkey<strong>clockwise</strong></li><li>Pushaccelerator</li></ul><p>Do<em>not</em>pushthebrakeatthesametimeastheaccelerator.</p></div>在上面的例子中，作為第一個元素的元素包括第一個p、第一個li和strong和em元素。指定以下規(guī)則：p:first-child{font-weight:bold;}li:first-child{text-transform:uppercase;}第一個規(guī)則將作為某元素第一個子元素的所有p元素設(shè)置為粗體。第二個規(guī)則將作為某個元素（在HTML中，這肯定是ol或ul元素）第一個子元素的所有l(wèi)i元素變成大寫。請訪問該鏈接，來查看這個

:first-child實例的效果。3）CSS2-:lang偽類:lang偽類使你有能力為不同的語言定義特殊的規(guī)則。后代選擇器后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個常用選擇器，中間加一個空格表示。其中前面的常用選擇器選擇父元素，后面的常用選擇器選擇子元素，樣式最終會應(yīng)用于子元素中。如：<style>.father.child{color:#0000CC;}</style><pclass="father">黑色<labelclass="child">藍(lán)色<b>也是藍(lán)色</b></label></p>這里定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍(lán)色。后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。子選擇器請注意這個選擇器與后代選擇器的區(qū)別，子選擇器（childselector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇，我們看下面的代碼：ExampleSourceCodeCSS：#linksa{color:red;}#links>a{color:blue;}HTML：<pid="links"><ahref="#">Div+CSS教程</a>><span><ahref="#">CSS布局實例</a></span><span><ahref="#">CSS2.0教程</a></span></p>將會看到第一個鏈接元素“Div+CSS教程”會顯示成藍(lán)色，而其它兩個元素會顯示成紅色。當(dāng)然，或許瀏覽器并不支持這樣的CSS選擇符。通用選擇器通用選擇器用*來表示。例如：*{font-size:12px;}表示所有的元素的字體大小都是12px；同時通用選擇器還可以和后代選擇器組合。例如：p*{……}表示所有p元素后代的所有元素都應(yīng)用這個樣式。但是與后代選擇器的搭配容易出現(xiàn)瀏覽器不能解析的情況，比如像這樣子：<p>所有的文本都被定義成紅色<b>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</b><p>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</p><b>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</b><em>所有這個段落里面的子標(biāo)簽都會被定義成藍(lán)色</em></p>這個例子里面p標(biāo)簽里面嵌套了一個p標(biāo)簽，這個時候樣式可能會出現(xiàn)與預(yù)期結(jié)果不相同的結(jié)果。群組選擇器當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔。如：p,td,li{line-height:20px;color:#c00;}#mainp,#siderspan{color:#000;line-height:26px;}.www_52css_com,#mainpspan{color:#f60;}.text1h1,#siderh3,.art_titleh2{font-weight:100;}相鄰?fù)x擇器除了上面的子選擇器與后代選擇器，用戶可能還希望找到兄弟兩個當(dāng)中的一個，如一個標(biāo)題h1元素后面緊跟了兩個段落p元素，我們想定位第一個段落p元素，對它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器。下面的代碼：ExampleSourceCodeCSSh1+p{color:blue}HTML<h1>一個非常專業(yè)的CSS站點</h1><p>Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。</p><p>CSS布局實例中，有很多與CSS布局有關(guān)的案例。</p>用戶將會看到第一個段落Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。文字顏色將會是藍(lán)色。而第二段則不受此CSS樣式的影響。屬性選擇器您可以用判斷html標(biāo)簽的某個屬性是否存在的方法來定義css屬性選擇器，是根據(jù)元素的屬性來匹配的，其屬性可以是標(biāo)準(zhǔn)屬性也可以是自定義屬性；!ie6，0010當(dāng)然，也可以同時匹配多個屬性；[attr][title]{margin-left:10px}//選擇具有title屬性的所有元素；[attr=val][title='this']{margin-right:10px}//選擇屬性title的值等于this的所有元素[attr^=val][title^='this']{margin-left:15px}//選擇屬性title的值以this開頭的所有元素[attr$=val][title$='this']{margin-right:15px}//選擇屬性title的值以this結(jié)尾的所有元素[attr*=val][title*='this']{margin:10px}//選擇屬性title的值包含this的所有元素[attr~=val][title~='this']{margin-top:10px}//選擇屬性title的值包含一個以空格分隔的詞為this的所有元素，即title的值里必須要有this這個單詞并且this要與其他單詞之間有空格分隔[attr|=val][title|='this']{margin-bottom:10px}//選擇屬性title的值等于this，或值以this-開頭的所有元素在CSS語言中中的繼續(xù)并沒有像C++和Java等語言中的那么復(fù)雜，簡單地說就是將各個HTML標(biāo)記看作一個個容器，其中被包含的小容器會繼承所包含它的大容器的風(fēng)格樣式。1）父子關(guān)系所有的CSS語句都是基于各個標(biāo)訊之間的父子關(guān)系的，為了更好地理解父子關(guān)系，首先從HTML文件的組織結(jié)構(gòu)入手。4.繼承2）CSS繼續(xù)的運用通過上面講解，已經(jīng)對各個標(biāo)記之間的父子關(guān)系有所了解。下面進(jìn)一步了解CSS繼承的運用。CSS繼承指的是子標(biāo)民會繼續(xù)父標(biāo)記的所有樣式風(fēng)格，并可以在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標(biāo)記的樣式風(fēng)格完全不會影響父標(biāo)記。任務(wù)實踐范琳啟動Dreamweaver，在主頁中新建一個網(wǎng)頁，使用CSS的繼承，加入嵌套選擇器，在不修改源代碼的情況，對深層的<li>進(jìn)行控制，顯示效果如圖1-11所示。圖1-11合理利用CSS的繼承任務(wù)二：設(shè)計百度Logo….本節(jié)內(nèi)容定義字體大小字體定義英文大小寫1.字體在HTML語言中，文字的字體通過<fontface="字體名稱">來設(shè)置，而在CSS中了體則是通過font-family屬性來控制的，下面是該屬性的語句。P{Font-family:黑體,Arial,宋體,sans-serift;}以上語句聲明了HTML頁面中<p>標(biāo)記的字體名稱，并且同時聲明了3個字體名稱，分別是黑體、Arial和宋體。整名代碼告訴瀏覽器首先在用戶的計算機中尋找“黑體”，如果該用戶計算中沒有黑體，則接著尋找“Arial”字體，如果黑體與Arail都沒有，再尋找“宋體”。如果font-famil中所聲明的所有字體都沒有，則使用瀏覽器的默認(rèn)字體顯示。font-famil屬性可以同時聲明任意種字體，字體之間用逗號隔開。另外，一些字體的名稱中間會出現(xiàn)空格，例如TimesNewRoman，這時需要用雙引號將其引起來，如“TimesNewRoman”。通常在正文中使用的是易讀性較強的serif字體，用戶長時間閱讀下不容易疲勞。而標(biāo)題和表格則采用較醒目的sans-serif字體，它們需要顯著和醒目，但不必長時間盯著這些文字來閱讀。Web設(shè)計及瀏覽器設(shè)置中也推薦遵循些原則。CSS使用font-size屬性來定義字體大小，該屬性用法如下。font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length其中xx-small（最小）、x-small（較小）、small（?。?、medium（正常）large（大）、x-large（較大）、xx-large（最大）表示絕對字體尺寸，這些特殊值將根據(jù)對象字體進(jìn)行調(diào)整。Larger（增大）和smaller（減少）這對特殊值能夠根據(jù)父對象中的字體尺寸進(jìn)行相對增大或者縮小處理，使用成比例的en單位進(jìn)行計算。Length可以是百分?jǐn)?shù)，或者浮點數(shù)字和單位標(biāo)識符組成的長度值，但不可為負(fù)值。其百分經(jīng)取值是基于父對象中字體的尺寸來計算，與em單位計算方法相同。2.定義字體大小CSS提供他很多單們，它閃都可被歸為兩大類：絕對單位和相對單位。相對單位所定義的字體是固定的，大小顯示效果不會受外界因素影響，例如in（imch，英寸）、cm（centimerter，厘米）、mm（millimeter，毫米）、pt（point，印刷的點數(shù)）、pc（pica，1pc=12pt）。此外，xx-small、x-small、small、medium、large、x-large、xx-large這些關(guān)鍵字也是絕對單位。文字的各種顏色配合其他頁面元素組成了整個五彩繽紛的頁面，在CSS中文字顏色是通過color屬性來定義的字體顏色，該屬性用法如下。color:color在設(shè)置某一段落文字的顏色時，通常可以用<span>標(biāo)記，將需要的部分進(jìn)行單獨標(biāo)注，然后再設(shè)置<span>標(biāo)記的顏色屬性。3.定義字體顏色CSS使用font-weight屬性來定義字體粗細(xì)，該屬性用法如下。font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900font-weight屬性取值比較特殊，其中normal關(guān)鍵字表示默認(rèn)值，即正常字體，相當(dāng)于取值為400。bold關(guān)鍵字表示粗體，相當(dāng)于取值700，或者使用<b>標(biāo)簽定義的字體效果。Bolder（較粗）和lighter（較細(xì)）相對于normal字體粗細(xì)而言。另外也可以設(shè)置值為100、200、300、400、500、600、700、800、900，它們分別表示字體的粗細(xì)，是對字體粗細(xì)的一種量化方式。值越大就表示越粗，越小就表示越細(xì)。4.定義字體粗細(xì)CSS使用font-style屬性來定義字體傾斜效果，該屬性用法如下。font-style:normal|italic|obliue其中，normal表示默認(rèn)值，即正常的字體，italic表示斜體，oblique表示傾斜的字體。Italic和oblique兩個取值只能在英文等西方文字中有效。5.定義斜體字體CSS使用text-decoration屬性來定義字體下劃線、刪除線和頂劃線效果，該屬性用法如下。text-decoration:none||underline||overline||line-through||blink其中，none表示默認(rèn)值，即無裝飾字體，underline表示下劃線效果，line-through表示刪除線效果，overline表示頂劃線效果，blink表示閃爍效果。6.定義下劃線、刪除線和頂劃線CSS使用font-variant屬性來定義字體大小效果，該屬性用法如下。font-variant:normal|small-caps其中，normal表示默認(rèn)值，即正常字體，small-caps表示小型的大寫字母字體。CSS還定義了一個text-transform屬性，該屬性也能夠定義字體大小寫效果，不過該屬性主要定義單詞大小寫樣式，用法格式如下。text-transform:none|capitalize|uppercase|lowercase其中，none表示默認(rèn)值，無轉(zhuǎn)換發(fā)生。capitalize表示將每個單詞的第一個字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生，uppercase表示把所有字母都轉(zhuǎn)換成大寫，lowercase表示把所有字母都轉(zhuǎn)換成小寫。7.定義英文大小寫傅云青使用CSS設(shè)置字體設(shè)計百度Logo，如圖1-24所示。任務(wù)實踐圖1-24百度Logo效果圖任務(wù)三：排版新聞文稿…本節(jié)內(nèi)容定義文本垂直對齊方式定義文本對齊方式首字母放大1.定義文本對齊方式在傳統(tǒng)布局中，一般使用HTML的align屬性來定義對象水平對齊，這種用法在過渡型文檔類型中依然可以使用。CSS使用text-algn屬性來定義文本的水平對齊方式，該屬性的用法如下。text-align:left|right|center|justify該屬性取值包括4個，其中l(wèi)eft表示默認(rèn)值，左對齊，right表示右對齊，center表示居中對齊，justify表示兩端對齊。2.定義文本垂直對齊方式在傳統(tǒng)的布局中，一般元素不支持垂直對齊效果，不過在表格中可以實現(xiàn)。CSS使用verical-align屬性來定義文本垂直對齊問題，該屬性垂直居中顯示。verical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length其中，auto屬性值將根據(jù)layout-flow屬性的值對齊對象內(nèi)容；baseline表示默認(rèn)值，表示將支持valign特性的對象內(nèi)容與基線齊；sub表示垂直對齊文本的下標(biāo)；supper表示垂直對齊文本的上標(biāo)；top表示將支持valign特性的對象的內(nèi)容與對象頂端對齊；text-top表示將支持valign特性的對象的文本與對象頂端對齊；middle表示將支持valign特性的對象內(nèi)容與對象中部對齊；bottom表示將支持valign特性的對象的內(nèi)容與對象底端的對齊；text-bottom表示將支持valign特性的對象的文本與對象頂端對對齊；length表示由浮點數(shù)字和單位標(biāo)識符組成的長度值或者百分?jǐn)?shù)，可為負(fù)數(shù)，定義由基線算起的偏移量，基線對于數(shù)值來說為0，對于百分?jǐn)?shù)來說就是0%。3.定義行間距行間距是段落文本行之間的距離。CSS使用line-height屬性定義行高，該屬性的用法如下。line-height:normal|length其中，normal表示默認(rèn)值，一般為1.2em，length表示百分比數(shù)字，或者由浮點數(shù)字和單位標(biāo)識符組成的長度值，允許為負(fù)值。4.定義字間距CSS使用letter-spacing屬性定義字間距，使用word-spacing屬性定義詞間距。這兩個屬性的取值都是長度值，由浮點數(shù)字和單位標(biāo)識符組成，既可以是絕對數(shù)值又可以是相對數(shù)值，默認(rèn)值為normal，表示默認(rèn)間隔。定義詞間距時，以空格為基準(zhǔn)進(jìn)行高節(jié)，如果多個單詞被連在一起，則被word-spacing視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing屬性此時有效。5.定義縮進(jìn)CSS使用text-indent屬性定義首行縮進(jìn)，該屬性用法如下。text:indent:lengthlength表示百分比數(shù)字，或者由浮點數(shù)字和單位標(biāo)識符組成的長度值，允許為負(fù)值。建議在設(shè)置縮進(jìn)單位時，以em為設(shè)置單位，它表示一個字距，這樣比較精確確定首行縮進(jìn)效果。6.首字母放大在許多報刊或雜志文章中，開篇第1個字都很大，這種首字放大的效果往往能在第一時間就吸引讀者的眼球。在CSS中首字放大的效果是通過第1個字進(jìn)行單獨設(shè)置樣式來實現(xiàn)的。任務(wù)實踐李露使用CSS文本設(shè)置樣式、段落排版功能，編輯網(wǎng)頁新聞稿件，如圖1-35所示。圖1-35新聞網(wǎng)頁最終顯示效果上機實訓(xùn)：制作百度搜索粘性土的稠度本節(jié)內(nèi)容無粘性土的密實度土的物理力學(xué)基本指標(biāo)土的擊實原理實訓(xùn)步驟本節(jié)內(nèi)容實訓(xùn)內(nèi)容和要求實訓(xùn)背景實訓(xùn)素材李露是某網(wǎng)站的編輯，接到主管任務(wù)制作百度搜索，并進(jìn)行段落排版。要示調(diào)整段落格式以及設(shè)置標(biāo)題、正文文本字體，如圖1-36所示。圖1-36百度搜索界面實訓(xùn)背景

搜索引擎一直是網(wǎng)上沖浪必不可少的工具，而搜索引擎在顯示搜索結(jié)果時如何能讓用戶一目了解找到關(guān)鍵字，是每一個搜索網(wǎng)站在排版時必須考慮的，而各種搜索結(jié)果恰恰都是以文字段落為主。作為國內(nèi)搜索引擎之一的百度一直保持著友好的用戶界面。由于CSS提供了段落排版功能，如文本對齊、行間中、字間距、縮進(jìn)等。利用這些功能，用戶可以對網(wǎng)頁中的新聞文檔進(jìn)行排版，方便、快捷。因此，李露決定使用CSS的排版功能來模擬百度搜索顯示界面。實訓(xùn)內(nèi)容和要求（1）首先建立段落HTML結(jié)構(gòu)，考慮到標(biāo)題、正文和百度快照分別在不同的行，因此每個顯示結(jié)果分為3段，并分別加上CSS標(biāo)記，代碼如下所示。<pclass="title">中國春節(jié)網(wǎng)</p><pclass="content">歡迎光臨中國春節(jié)網(wǎng),您現(xiàn)在的位置是中國春節(jié)網(wǎng)首頁!"年"獸的傳說熬年的傳說萬年創(chuàng)建歷法說中國古代歷法發(fā)展春節(jié)傳統(tǒng)和現(xiàn)代元宵燈節(jié)源于何時?猜燈謎的來由十二生肖的源流、排列與信仰祭灶掃塵貼春聯(lián)年畫倒貼福字除夕夜...</p><pclass="link">/46K2016-12-18-百度快照</p>實訓(xùn)步驟另外考慮到標(biāo)題部分有鏈接，因此需要HTML語言<a>標(biāo)記，并且顯示關(guān)鍵字的樣式必須區(qū)別于其他文字，因此，“春節(jié)”單獨用<span>標(biāo)記分離，“百度快照”也同樣進(jìn)行分離，并標(biāo)上各自的標(biāo)記類型，代碼如下所示。<pclass="title"><ahref="#">中國<spanclass="search">春節(jié)</span>網(wǎng)</a></p><pclass="content">歡迎光臨中國<spanclass="search">春節(jié)</span>網(wǎng),您現(xiàn)在的位置是中國<spanclass="search">春節(jié)</span>網(wǎng)首頁!"年"獸的傳說熬年的傳說萬年創(chuàng)建歷法說中國古代歷法發(fā)展<spanclass="search">春節(jié)</span>:傳統(tǒng)和現(xiàn)代元宵燈節(jié)源于何時?猜燈謎的來由十二生肖的源流、排列與信仰祭灶掃塵貼春聯(lián)年畫倒貼福字除夕夜...</p><pclass="link">/46K2016-12-18-<spanclass="quick">百度快照</span></p>此時的顯示效果如圖1-37所示，僅僅區(qū)分出了各個段落，并沒有美觀的界面。圖1-37段落基本結(jié)構(gòu)（2）定義各個段落的字體和文字大小、段落與段落間的距離和標(biāo)題與內(nèi)容之間的距離等，代碼如下所示。p{ margin:0px; font-family:Arial; /*定義所有字體*/}p.title{ padding-bottom:0px; font-size:16px;}p.content{ padding-top:3px; /*標(biāo)題與內(nèi)容的距離*/ font-size:13px; /*內(nèi)容的字體大小*/ line-height:18px;}p.link{ font-size:13px; padding-bottom:25px;}在以上代碼中，第1個p標(biāo)記定義了所有段落的字體以及各個段落之間的距離（margin）為0像素，接著用不同的類別分別定義標(biāo)題、內(nèi)容和百度快照的字體大小、間距等樣式風(fēng)格，顯示效果如圖1-38所示。圖1-38各段落調(diào)整（3）在調(diào)整好段落內(nèi)部的結(jié)構(gòu)以及段落與段落之間的距離后，下面設(shè)置文字顏色，主要是關(guān)鍵字的顏色與網(wǎng)址鏈接的顏色，另外還要給“百度快照”單獨設(shè)置顏色和下劃線，代碼如下所示。p.link{ font-size:13px; c

溫馨提示

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

評論

0/150

提交評論