設(shè)計(jì)網(wǎng)頁(yè)正文樣式

  • 2019-08-02 12:45:35
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.iy5y368.cn

本例著重介紹在網(wǎng)頁(yè)設(shè)計(jì)時(shí)對(duì)正文文本樣式的設(shè)置,并進(jìn)一步制作網(wǎng)頁(yè)時(shí)講述CSS文字和段落的排版方法。

【操作步驟】

第1步,構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。

使用<h1>標(biāo)簽定義文章的標(biāo)題,同時(shí)增加了3個(gè)<p>標(biāo)簽,添加段落文本。

<h1><img    src="images/logo.gif" >春</h1>

<p>盼望著,盼望著,東風(fēng)來(lái)了,春天的腳步近了。一切都像剛睡醒的樣子,欣欣然張開(kāi)了眼。山朗潤(rùn)起來(lái)了,水漲起來(lái)了,太陽(yáng)的臉紅起來(lái)了。小草偷偷地從土地里鉆出來(lái),嫩嫩的,綠綠的。園子里,田野里,瞧去,一大片一大片滿是的。坐著,躺著,打兩個(gè)滾,踢幾腳球,賽幾趟跑,捉幾回迷藏。風(fēng)輕悄悄的,草軟綿綿的。</p> 

<p>桃樹(shù),杏樹(shù),梨樹(shù),你不讓我,我不讓你,都開(kāi)滿了花趕趟兒。紅的像火,粉的像霞,白的像雪?;ɡ飵е鹞叮婚]了眼,樹(shù)上仿佛已經(jīng)滿是桃兒,杏兒,梨兒?;ㄏ鲁汕С砂俚拿鄯湮宋说聂[著,大小的蝴蝶飛來(lái)飛去。野花遍地是:雜樣兒,有名字的,沒(méi)名字的,散在草叢里像眼睛像星星,還眨呀眨的?!按得娌缓畻盍L(fēng)”,不錯(cuò)的,像母親的手撫摸著你,風(fēng)里帶著些新翻的泥土的氣息,混著青草味兒,還有各種花的香,都在微微潤(rùn)濕的空氣里醞釀。鳥(niǎo)兒將巢安在繁花嫩葉當(dāng)中,高興起來(lái)了,呼朋引伴的賣弄清脆的歌喉,唱出婉轉(zhuǎn)的曲子,跟清風(fēng)流水應(yīng)和著。牛背上牧童的短笛,這時(shí)候也成天嘹亮的響著。 雨是最尋常的,一下就是三兩天??蓜e惱???,像牛毛,像花針,像細(xì)絲,密密地斜織著,人家屋頂上全籠著一層薄煙。樹(shù)葉卻綠得發(fā)亮,小草也青得逼你的眼。傍晚時(shí)候,上燈了,一點(diǎn)點(diǎn)黃暈的光,烘托出一片安靜而和平的夜。在鄉(xiāng)下,小路上,石橋邊,有撐著傘慢慢走著的人,地里還有工作的農(nóng)民,披著蓑戴著笠。他們的房屋稀稀疏疏的,在雨里靜默著。 天上的風(fēng)箏漸漸多了,地上的孩子也多了。城里鄉(xiāng)下,家家戶戶,老老小小,也趕趟似的,一個(gè)個(gè)都出來(lái)了。舒活舒活筋骨,抖擻抖擻精神,各做各的一份事兒去?!耙荒曛?jì)在于春”,剛起頭兒,有的是功夫,有的是希望。春天像剛落地的娃娃,從頭到腳都是新的,它生長(zhǎng)著。</p>

<p>春天像小姑娘,花枝招展的,笑著走著。</p>

<p>春天像健壯的青年,有鐵一般的胳膊和腰腳,領(lǐng)著我們向前去。</p>

此時(shí)的顯示效果極其簡(jiǎn)單,僅僅是簡(jiǎn)單的文字和標(biāo)題。

第2步,定義網(wǎng)頁(yè)基本屬性、標(biāo)題屬性,與上一節(jié)示例基本相同。

body {    

margin:20px;                                          /*邊界*/    

background:url(images/bg.jpg);                        /*背景圖片*/

font-size:14px;                                       /*網(wǎng)頁(yè)字體大小*/    

font-family:"宋體", Arial, Helvetica, sans-serif;     /*網(wǎng)頁(yè)字體默認(rèn)類型*/}h1{   

font-family:"黑體";   

color:#086916;   

padding-bottom:24px;   

text-align:center;      

border-bottom:2px solid #cecaca;}img{   

position:relative;    

bottom:-24px;

有讀者可能會(huì)產(chǎn)生這樣的疑問(wèn),在<body>標(biāo)簽中設(shè)置了字體為宋體,為什么在<h1>標(biāo)簽中又設(shè)置為黑體呢?到底頁(yè)面會(huì)顯示出哪種字體呢?

CSS是這樣規(guī)定的,在網(wǎng)站建設(shè)中,下級(jí)標(biāo)簽的屬性可以繼承其父級(jí)的屬性,在<.body>標(biāo)簽中定義了字體為宋體,如果<h1>標(biāo)簽中沒(méi)有再定義字體屬性,那么<h1>標(biāo)簽的字體屬性會(huì)繼承<body>中的屬性,其內(nèi)容將會(huì)以宋體顯示,在此例中<h1>標(biāo)簽又重新定義了字體為黑體,那么標(biāo)題將會(huì)以黑體顯示。第3步,設(shè)置正文樣式,即<p>標(biāo)簽中的段落內(nèi)容。

p{   

line-height:1.6em;             /*行間距*/   

font-size:13px;                /*字體大小*/  

color:#000;                   /*字體顏色*/   

text-indent:2em;              /*定義首行縮進(jìn)2個(gè)字*/   margin:0;                     /*四周補(bǔ)白為0*/

此時(shí)<p>標(biāo)簽加入了CSS設(shè)置,包括字體大小和字體顏色和行間距等,但是并沒(méi)有設(shè)置字體類型,所以<p>將會(huì)繼承其父級(jí)屬性,顯示為宋體。

當(dāng)前文章標(biāo)題:設(shè)計(jì)網(wǎng)頁(yè)正文樣式

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3066.html

上一篇:如何在網(wǎng)頁(yè)制作時(shí)使用CSS定義文本樣式(四)

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中的段落版式

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))