前段時間在做公司的一個英語的Web項目，遇到了個小問題，問題描述如下：網頁上有一個層(div)，層里面的內容后臺是可以修改的，有點類似于網站的公告或者通知的形式。這里的內容是由客服MM修改的，她們習慣性的直接從word文檔里面復制過去，這樣復制過去問題就來了，由于后臺是使用的FCK編輯器，直接復制過去那個編輯器就會添加很多樣式，前臺界面這下可就亂套了，亂七八糟的。用Firefox選中后臺添加的公告內容查看其源代碼，居然還有中文的：font-family:"@宋體"這種代碼，這樣子對于我們的網站是絕對不允許的，而且這段文本的格式也不是很好控制，搞得這個層里面的文字內容左右都對不齊。后來把多余的樣式刪除掉了，但文本內容在這個層里面的左右還是對不齊，沒有辦法，求助于公司的美工，美工幫我調了下樣式，但還是沒有完美的解決文本在這個層里面左右對齊并且首行縮進，因為調了樣式之后在IE下OK了，但firefox下文本內容還是沒有左右對齊并首行縮進。這樣也不行，因為我們不以IE為標準，以Firefox為標準，且是面向國外客戶的站點。這個問題我就暫時先放了一陣子，趕快把網站上線再說，一點小問題就沒有去管它了。 關于這個小問題呢，我也想到了 精通CSS與HTML設計模式 這本書的第11章介紹的分割這一節的文章有介紹，但這本書我也沒有放在公司，也就不管它了；今天翻起這本書也正好看到了，特把原來沒有解決的問題給解決掉了。 先看效果圖吧: 查看原圖（大圖） 其源代碼就比較干凈了,源碼如下: p Our online order form allows you to order directly in the internet, saving your time and offering you convenience. Here’s how you do it. /p p When you want to buy our commodities, please register first. After you create your account successfully, you can directly order our products and pay for them. Next time you just click “log in”, you can enter your account, then shopping simply and conveniently. /p 最重要的就是CSS了,代碼如下: style type="text/css" *.elegant { margin-left: 40px; margin-right: 80px; letter-spacing: 1px; word-spacing: 2px; line-height: 1.7em; text-indent: 40px; text-align: justify; } /style 上面簡單的html' target='_blank'>CSS樣式就實現了文本的左右對齊,并且段落的首行是縮進的html教程
