整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
定義字體系列，大小，粗細(xì)和文字樣式
p {
font: font-style font-weight font-size/line-height font-family;
}
不能更換順序，必須保留font-size和font-family
定義文本外觀，如：文本顏色，對(duì)齊文本，裝飾文本，文本縮進(jìn)，行間距等
節(jié)課將網(wǎng)頁(yè)的排版框架大致寫(xiě)好。
這節(jié)課就來(lái)進(jìn)行更具體的修改和增加所有元素的細(xì)節(jié)，完成整個(gè)網(wǎng)頁(yè)的編寫(xiě)。
按照上節(jié)課的方法，用調(diào)試工具分析代碼之后，可以下載好必須的圖片文件。
關(guān)于當(dāng)中專題的圖片，這里只下載了3個(gè)，更多的圖和文字留給大家自己去完成。
給table加上邊框線的目的是為了方便在開(kāi)發(fā)編寫(xiě)完成之前能夠隨時(shí)觀察排版的情況，方便進(jìn)行調(diào)整。
在排版樣式基本調(diào)整到位之后，就可以刪除table的邊框了。
來(lái)給下面2行的左右分別增加內(nèi)邊距為140px和120px。
修改css代碼如下：
刷新頁(yè)面：
可以看到，下面2行的左右留白出現(xiàn)了，同時(shí)第2行和第3行之間有間距，第3行的左右2個(gè)td之間也有間距。
雖然第3行的2個(gè)td的寬度比例不對(duì)，但是先不著急，下面按照次序一個(gè)一個(gè)元素來(lái)調(diào)整。
最上面一排左邊4個(gè)元素，右邊4個(gè)元素，當(dāng)中留白，因此一共9個(gè)td。
將左邊4個(gè)td和右邊4個(gè)td的寬度固定，剩余當(dāng)中的一個(gè)td不設(shè)置，那么瀏覽器窗口變化的時(shí)候，就不影響到左右的8個(gè)td的寬度。
僅僅影響到當(dāng)中留白的那個(gè)td。這是經(jīng)常使用的一種適應(yīng)不同瀏覽器在不同屏幕上不同寬度的一種方法。
修改css代碼，增加tda1到tda9的樣式。
刷新頁(yè)面：
可以看到，基本的按鈕位置已經(jīng)到位，可以不需要table的邊框了。
刪除掉table的邊框樣式，同時(shí)針對(duì)最上面一排的整個(gè)table的樣式table2增加一個(gè)下邊框的樣式，做出一條灰色的分割線出來(lái)。
修改css代碼如下：
刷新頁(yè)面：
接下來(lái)，逐步添加圖片或者按鈕。
第一步，添加第一個(gè)圖片，logo圖片。然后增加后面的2個(gè)icon圖標(biāo)，這里icon圖標(biāo)要用到一個(gè)新的技術(shù)，就是css3的content屬性。
并且通過(guò)自定義字體文件，來(lái)顯示圖標(biāo)類型的文字。具體內(nèi)容這里不深入講解，大家只要了解，通過(guò)引入自定義字體文件的方式就可以將字體文件里面的特殊符號(hào)圖標(biāo)形狀的文字顯示在網(wǎng)頁(yè)上。它看起來(lái)是一個(gè)圖標(biāo)，但其本質(zhì)是一個(gè)文字。這是這個(gè)文字做成圖標(biāo)樣子了。比如很多網(wǎng)頁(yè)中出現(xiàn)的各種箭頭圖標(biāo)，很多都是文字。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
可以看到，前面3個(gè)圖標(biāo)都模仿編寫(xiě)完成了。
接下來(lái)模仿搜索框部分。
搜索框可以用外面套一個(gè)div，div的背景色是灰色，然后邊角做成圓角的。
當(dāng)中放一個(gè)input標(biāo)簽可以用于輸入,input標(biāo)簽是一個(gè)新的標(biāo)簽，具體的作用就是讓用戶可以輸入文本的。
后面的課程中會(huì)詳細(xì)講解的，這里不深入講解。
然后右邊放一個(gè)類似前面的圖標(biāo)用i標(biāo)簽并設(shè)置content自定義文字編碼來(lái)實(shí)現(xiàn)。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
接下來(lái)，修改右側(cè)的4個(gè)圖標(biāo)和按鈕。
第1個(gè)很簡(jiǎn)單，也是一個(gè)文字圖標(biāo)，和前面的下載圖標(biāo)一樣。
第2個(gè)是一個(gè)文字a鏈接，樣式為灰色文字。
第3個(gè)也是一個(gè)文字a鏈接，注意邊框?yàn)閳A角邊框，顏色為紅色。
第4個(gè)也是一個(gè)文字a鏈接，底色為紅色，邊框?yàn)閳A角，里面包含一個(gè)i標(biāo)簽和文字，其中i標(biāo)簽也是一個(gè)羽毛筆的圖標(biāo)文字。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
可以看到，通過(guò)分析原始網(wǎng)頁(yè)的相關(guān)CSS樣式的值，然后模仿寫(xiě)到自己的css文件里面，就能很方便的將網(wǎng)頁(yè)元素模仿編寫(xiě)出同樣類似的效果。當(dāng)然，模仿后和原來(lái)的不是百分之百一樣的，這很難做到，因?yàn)楫吘姑總€(gè)網(wǎng)頁(yè)的排版布局是不一樣的實(shí)現(xiàn)方式。只要掌握了這個(gè)方法，通過(guò)學(xué)習(xí)不同的網(wǎng)頁(yè)的實(shí)現(xiàn)方式，很快就能掌握如何編寫(xiě)出自己的網(wǎng)站效果了。
接下來(lái)的實(shí)現(xiàn)過(guò)程，學(xué)哥就不再逐個(gè)元素的講解了，直接將修改好的代碼呈現(xiàn)給大家。
大家也可以先不要往下看學(xué)哥的實(shí)現(xiàn)結(jié)果，可以自己先嘗試將網(wǎng)頁(yè)剩余的元素全部編寫(xiě)出來(lái)。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
可以看到關(guān)于專題這部分已經(jīng)都做好了。由于專題太多了，而且都是重復(fù)的樣式，這里就不做出所有的專題了，做出3個(gè)作為代表性的例子就足夠了。
現(xiàn)在可以調(diào)整下面一行的左右td的寬度了，將右側(cè)的td的寬度固定為218px，左側(cè)的td不固定寬度。
修改css代碼如下：
刷新頁(yè)面：
可以看到右側(cè)td的寬度變大了，左側(cè)的td的寬度變小了。
如果瀏覽器窗口拉大或者縮小會(huì)發(fā)生什么情況呢？
如果瀏覽器窗口放大的話，左側(cè)td的寬度也會(huì)自動(dòng)變大，是由于將table的寬度設(shè)置為100%了。
一個(gè)table設(shè)置為100%，也就是根據(jù)瀏覽器寬度變化而變化，同時(shí)一個(gè)tr里面的td如果設(shè)置了絕對(duì)寬度則寬度就不跟隨瀏覽器變化而變化，如果td沒(méi)有設(shè)置寬度，則這些td會(huì)根據(jù)內(nèi)容的比例進(jìn)行分配寬度。
假如一行里面只有一個(gè)td沒(méi)有設(shè)置寬度，則剩余的寬度都會(huì)分配給這個(gè)td，那么瀏覽器寬度變化的話就只有這個(gè)td會(huì)改變寬度。
將瀏覽器窗口拉大一些，效果如下：
可以看到，右側(cè)的td的寬度不變，而左側(cè)的td的寬度變大了。
同時(shí)可以看到最上面一排按鈕，只有當(dāng)中留白的那個(gè)td也變大了。其它按鈕的td并沒(méi)有變化。
這個(gè)設(shè)置table寬度自適應(yīng)瀏覽器寬度的方法，是一個(gè)比較好的控制瀏覽器寬度變化的方法。大家在編寫(xiě)網(wǎng)頁(yè)時(shí)候要考慮到瀏覽器寬度的因素。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
可以看見(jiàn)第3行的左邊部分，關(guān)于文章的內(nèi)容全部做好了。
主要是css代碼部分增加比較多。
首先將第3行的左右2個(gè)td的垂直方向都靠上對(duì)齊：
修改css代碼如下：
然后，修改右側(cè)的大圖標(biāo)和作者排行內(nèi)容。
修改css代碼如下：
修改html代碼如下：
刷新頁(yè)面：
可以看到，所有的頁(yè)面代表性元素全部樣式都做成了。
到這里，完成了模仿一個(gè)真實(shí)的網(wǎng)頁(yè)的全部工作，按照這種模式，可以模仿出各種各樣的網(wǎng)頁(yè)編碼。
接下來(lái)，要將代碼部署到本地服務(wù)器上。
然后通過(guò)安裝不同的瀏覽器軟件，例如IE瀏覽器，Chrome瀏覽器，Safari瀏覽器，F(xiàn)irefox瀏覽器進(jìn)行不同瀏覽器的兼容性測(cè)試。
保證在不同的瀏覽器上看到的網(wǎng)頁(yè)效果大致都一樣，不要出現(xiàn)明顯的不協(xié)調(diào)或不美觀之處。
然后還要在不同的設(shè)備和操作系統(tǒng)上針對(duì)不同的瀏覽器做更大范圍的兼容性測(cè)試，這樣才能盡最大可能讓我們編寫(xiě)的網(wǎng)頁(yè)程序能夠適應(yīng)更多的計(jì)算機(jī)環(huán)境，呈現(xiàn)最好的效果。
前面通過(guò)15小節(jié)的內(nèi)容，講解了如何編寫(xiě)靜態(tài)內(nèi)容網(wǎng)站，如何部署到本地服務(wù)器，如何運(yùn)用瀏覽器調(diào)試工具來(lái)學(xué)習(xí)和模仿編寫(xiě)網(wǎng)站，如何將網(wǎng)站程序部署到云服務(wù)器，如何購(gòu)買一個(gè)域名并解析到云服務(wù)器，完整的通過(guò)2個(gè)實(shí)例演示了整個(gè)網(wǎng)站實(shí)現(xiàn)的過(guò)程。
下面來(lái)回顧一下每節(jié)課的內(nèi)容，并說(shuō)明重點(diǎn)以及自學(xué)是需要注意的地方。
第2.1節(jié)，主要是講解關(guān)于網(wǎng)站的技術(shù)原理和要做的大概內(nèi)容。
第2.2節(jié)，主要講一個(gè)最最簡(jiǎn)單的網(wǎng)頁(yè)代碼是什么樣子的，讓大家有一個(gè)最直觀的感受，從最簡(jiǎn)單的開(kāi)始，html標(biāo)簽，head標(biāo)簽，title標(biāo)簽，body標(biāo)簽，和使用文本編輯器。
第2.3節(jié)，從一個(gè)網(wǎng)站的設(shè)計(jì)開(kāi)始，然后講解了br標(biāo)簽，b標(biāo)簽，設(shè)置網(wǎng)頁(yè)網(wǎng)頁(yè)的背景色，關(guān)于CSS樣式定義以及顏色定義。
第2.4節(jié)，開(kāi)始學(xué)習(xí)最重要的一個(gè)div標(biāo)簽，包括設(shè)置背景色，文字顏色，文字大小，尺寸單位，文字字體，文字斜體和加粗。
第2.5節(jié)，學(xué)習(xí)基本的CSS樣式之后，學(xué)習(xí)將CSS樣式和網(wǎng)頁(yè)內(nèi)容進(jìn)行分離，更方便開(kāi)發(fā)。
第2.6節(jié)，網(wǎng)頁(yè)顯示中很重要的寬度，高度，內(nèi)邊距，外邊距，邊框，可以將網(wǎng)頁(yè)元素修飾的更美觀大氣。
第2.7節(jié)，在學(xué)會(huì)使用div進(jìn)行頁(yè)面排版布局之后，再學(xué)習(xí)使用table表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行排版，掌握td的用法，包括設(shè)置內(nèi)邊距和字體，以及邊框。
第2.8節(jié)，學(xué)習(xí)對(duì)table表格進(jìn)行td合并以及設(shè)置排版樣式，說(shuō)明特定元素通過(guò)id設(shè)置樣式，以及說(shuō)明元素標(biāo)簽嵌套關(guān)系和順序關(guān)系。
第2.9節(jié)，學(xué)習(xí)設(shè)置背景圖片，以及img標(biāo)簽顯示圖片的方法，以及一些HTML和CSS代碼注釋以及縮進(jìn)的格式。
第2.10節(jié)，學(xué)習(xí)如何讓網(wǎng)頁(yè)進(jìn)行遷移，包括文字鏈接和圖片鏈接，以及類似按鈕的鏈接。
第2.11節(jié)，網(wǎng)頁(yè)基本編寫(xiě)完成之后，將網(wǎng)頁(yè)部署到本地一個(gè)Web服務(wù)器，通過(guò)局域網(wǎng)可以訪問(wèn)。
第2.12節(jié)，將網(wǎng)站部署到云服務(wù)器上，這樣可以通過(guò)互聯(lián)網(wǎng)訪問(wèn)網(wǎng)站頁(yè)面。
第2.13節(jié)，創(chuàng)建好域名之后，將域名解析到云服務(wù)器，這樣通過(guò)互聯(lián)網(wǎng)可以訪問(wèn)域名就能看到網(wǎng)站頁(yè)面了。
第2.14節(jié)，學(xué)習(xí)分析一個(gè)已經(jīng)存在的網(wǎng)站，并進(jìn)行設(shè)計(jì)規(guī)劃，進(jìn)行模仿編寫(xiě)網(wǎng)頁(yè)。
第2.15節(jié)，一邊分析網(wǎng)頁(yè)，一邊開(kāi)始模仿編寫(xiě)網(wǎng)頁(yè)，一個(gè)元素一個(gè)元素的編寫(xiě)，最終完整模仿整個(gè)網(wǎng)頁(yè)。
通過(guò)整個(gè)15節(jié)課程，一步一步實(shí)現(xiàn)2個(gè)代表性網(wǎng)站頁(yè)面，掌握如果使用HTML加CSS代碼來(lái)編寫(xiě)實(shí)現(xiàn)靜態(tài)內(nèi)容網(wǎng)站。
為將來(lái)實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容網(wǎng)站打下一個(gè)堅(jiān)實(shí)的基礎(chǔ)。
第2章的內(nèi)容是很多互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)。同樣的，第3章的內(nèi)容也是互聯(lián)網(wǎng)編程技術(shù)的基礎(chǔ)。
第3章開(kāi)始講解JavaScript編程技術(shù)，學(xué)習(xí)掌握如何通過(guò)代碼實(shí)現(xiàn)改變網(wǎng)頁(yè)顯示元素的技術(shù)。
第3章以實(shí)現(xiàn)一個(gè)連連看網(wǎng)頁(yè)游戲作為主線，穿插講解關(guān)于JavaScript技術(shù)的方方面面，讓大家在第3章結(jié)束之后，掌握好使用JavaScript技術(shù)進(jìn)行交互式網(wǎng)頁(yè)開(kāi)發(fā)的技能。
由于學(xué)哥的教程是系列教程，前后關(guān)聯(lián)極強(qiáng)，請(qǐng)大家查看歷史消息。
text-decoration
text-decoration屬性指定文本將如何裝飾
常用的值有:
●none-默認(rèn)值,這定義了一個(gè)正常的文本
●inherit-從其父元素繼承此屬性
●overline-在文本上方繪制水平線
●underline-在文本下方繪制水平線
●line-through-在文本中繪制水平線(替換html<s>標(biāo)記)
html代碼:
<p class="none">人生只有創(chuàng)造才能前進(jìn),只有適應(yīng)才能生存</p>
<p class="inherit">不必因昨天的眼淚,濕了今天的太陽(yáng)</p>
<p class="overline">逼著你往前走的,不是前方夢(mèng)想的微弱光芒,而是身后現(xiàn)實(shí)的萬(wàn)丈深淵</p>
<p class="underline">你真誠(chéng)地愛(ài)自己,才能真誠(chéng)地愛(ài)別人</p>
<p class="line-through">眾人拾柴火焰高</p>
css代碼:
p.none{text-decoration:none;}
p.inherit{text-decoration:inherit;}
p.overline{text-decoration:overline;}
p.underline{text-decoration:underline; }
p.line-through{ text-decoration:line-through; }
效果如下:
你可以將underline,overline或line-through組合起來(lái),以添加多條裝飾線.
text-decoration的另一個(gè)值是blink,這可以使文本閃爍.
text-decoration:blink;
這個(gè)值是有效的,但是被棄用,大多數(shù)瀏覽器忽略它.
二 文本縮進(jìn)
text-indent屬性指定在文本的第一行開(kāi)始之前應(yīng)該留下多少水平空間.屬性值是長(zhǎng)度(px,pt,cm,em等),%和inherit
html代碼:
<p class="text-indent">使用<strong>text-indent</strong>讓文本向右縮進(jìn)了60px.</p>
css代碼:
p.text-indent{text-indent: 60px;}
效果如下:
負(fù)值是允許的.如果值為負(fù)值,則第一行將向左縮進(jìn).
三 text-shadow
text-shadow為文本添加陰影
它有四個(gè)值:
●第一個(gè)值:定義陰影在x(水平)方向的距離
●第二個(gè)值:定義y(垂直)方向的距離
●第三個(gè)值:定義陰影的模糊半徑
●地四個(gè)值:設(shè)置顏色
html代碼:
<p class="text-shadow">實(shí)踐是思想的真理</p>
css代碼:
p.text-shadow{color:blue;font-size:30pt;text-shadow:5px 2px 4px grey; }
效果如下:
在上面的例子中.
●5px :x坐標(biāo)
●2px: y坐標(biāo)
●4px: 模糊半徑
●grey: 陰影的顏色
要向文本添加多個(gè)陰影,請(qǐng)使用逗號(hào)來(lái)分隔陰影列表
處理陰影時(shí),可以使用任何css支持的顏色樣式
對(duì)于x和y偏移,可以使用各種類型的單位(如px,cm,mm,in,pc,pt等)
負(fù)值也被支持
下面的一個(gè)例子創(chuàng)建一個(gè)藍(lán)色的陰影,比主文本向上高出2px,向左多1px,并且用0.5em模糊:
html代碼:
<p class="text-shadow1">愛(ài)情不過(guò)是一場(chǎng)瘋病</p>
css代碼:
p.text-shadow1{ font-size:20pt;text-shadow:rgba(0,0,255,1) -1px -2px 0.5em;}
效果如下:
Internet Explorer9和更早版本不支持text-shadow屬性.
四 text-transform
text-transform屬性可以實(shí)現(xiàn)文本的首字母大寫(xiě)效果
html代碼:
<p class="capitalize">The value capitalize transforms the first character in each word to uppercase;
all other characters remain unaffected. </p>
css代碼:
p.capitalize{text-transform:capitalize;}
效果如下:
使用text-transform可以使文本顯示為全部大寫(xiě)或全部小寫(xiě)
屬性值:uppercase(全部大寫(xiě)) lowercase(全部小寫(xiě)) none(不會(huì)產(chǎn)生任何效果)
五 letter-spacing
letter-spacing屬性指定文本中字符之間的空格.
值可以設(shè)置為:
●normal定義了默認(rèn)樣式,字符之間沒(méi)有額外的空間
●length用px,pt,cm,mm等測(cè)量單位定義字符之間的額外空間
●inherit繼承其父元素的屬性
html代碼:
<p class="normal">愛(ài)是一種甜蜜的痛苦</p>
<p class="positive">人世間,除了生死,哪一件事不是閑事</p>
css代碼:
p.normal{ letter-spacing:normal; }
p.positive{letter-spacing:4px; }
效果如下:
letter-spacing使用負(fù)值可以減少字符之間的間距
設(shè)置間距后請(qǐng)測(cè)試效果,避免影響文本的閱讀性
六 word-spacing
word-spacing屬性指定文本中單詞之間的空格.就像letter-spacing屬性一樣,可以將word-spacing的值設(shè)置為normal,length和inherit
當(dāng)段落需要使用正常的單詞間距展示時(shí),通常會(huì)使用normal
要使用word-spacing定義單詞之間的間距,可以使用像px,pt,pc,cm,mm,inches,em,ex這樣的測(cè)量值
負(fù)值也是允許的
七 white-spacing
white-spacing可以處理元素內(nèi)的換行符
參數(shù)可以是normal,inherit,nowrap等
nowrap會(huì)屏蔽該元素中的所有換行符和空格,把整個(gè)文本放在一行中
html代碼:
<p class="nowrap">This paragraph has multiple spaces and
a line break,but it will be ignored,as we used the nowrap value.</p>
css代碼:
p.nowrap{ white-space:nowrap; }
效果如下:
注意:white-spacing 和white-space 大家可以測(cè)試下有何不同
文本將繼續(xù)在同一行,直到遇到一個(gè)<br/>標(biāo)記
white-space也支持其他值:
●pre:文本支持所有的換行和空格
●pre-line:文本支持換行,忽略額外的空格
●pre-wrap:文本將在必要的時(shí)候或者行的結(jié)尾進(jìn)行換行
pre-wrap值的行為與pre值相同,只是它增加了額外的換行符以防止文本突破元素的框.
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
