網頁文字排版處理的技巧
海南中立科技 | 2011-12-02 00:03:32 | 閱讀:12136
1、段落首行自動縮進每個段落的首行要縮進兩個漢字大小是眾人皆知的常識,我們通常在每個段落首行加上多個“”標簽來實現縮進,這樣雖然能夠達到目的,但是卻過于麻煩。其實我們只要運用一些簡單的CSS語法就可以一勞永逸地在一個頁面中實現首行縮進。<styletype="text/css">p{text-indent:2em}</style>通過上面的樣式,頁面中每段包含在標簽<p>和</p>之間的段落都會自動縮進兩個漢字字符大小。2、段落首字下沉我們閱讀傳統媒體時,經?吹饺鐖D1的效果,通過使用樣式,我們也可以很輕松地實現類似效果。圖1很常見的段落首字下沉效果<style>#chr:first-letter{font-size:24pt;left:0px;float:left;position:absolute}</style>上面這段代碼定義了一個首字大小為24pt的縮進,使用時我們只要在某個段落的標簽中添上一個“id=chr”就可以了,例如下面的段落:<pid=chr>柳永(987?-1053?)字耆卿,福建崇安人!/p>3、文字豎排效果如下面的一段詩文,在網頁上顯示時文字呈豎直排布,非常適合詩詞的文字編排。<divstyle="line-height:18px;text-align:center;writing-mode:tb-rl"><pre>長恨歌(片段)<br>白居易<br>漢皇重色思傾國,御宇多年求不得。楊家有女初長成,養在深閨人未識。天生麗質難自棄,一朝選在君王側!/pre></div>代碼標簽中的樣式規定了文字的豎直排布,并且每行的間距為18像素,文字為中間對齊。網頁讀取時都會自動將空格去除后才顯示,在詩文內容開始和結束部分分別加上標簽<per>和</per>,可以使詩文內容按照自己的意愿精確顯示,其效果如圖2。圖2文字豎排效果4、文字從右讀起古文的文字編排也通常用到從右讀起的效果,下面的代碼就可以實現這個效果(如圖3):圖3文字從右讀起<divstyle="width:260px;direction:rtl;unicode-bidi:bidi-override">長恨歌(片段)<br>白居易<br>漢皇重色思傾國,御宇多年求不得。楊家有女初長成,養在深閨人未識。天生麗質難自棄,一朝選在君王側!/div><div>標簽中的樣式規定了一塊260像素寬的區域,其中的文字從右邊開始。樣式中寬度的設置非常重要,必須設置剛好的寬度來容納內容,否則詩文的顯示效果可能就不是一行一段了。5、文字強制對齊我們來比較一下圖4和圖5兩種文字編排方式,圖4是使用了文字強制對齊的效果,圖5只是普通的編排。圖4的文字首尾很整齊,而圖5的文字行落則參差不齊,有長有段。顯然,圖4的效果更加美觀,特別是對于英文的段落。通過如下的代碼,我們就可以輕松實現文字的強制對齊:圖4使用文字強制對齊的效果圖5普通的編排顯得參差不齊<divstyle="font-size:12px;width:300;text-align:justify">TheUnitedStatesisanindustrialcountry……</div>代碼標簽中的樣式規定了一個300像素寬的區域,“text-align:justify”規定了其中的文字行落強制對齊。通過以上的一些技巧,我們就可以很靈活的根據需要進行網頁文字的編排!
