css實現(xiàn)一個寫信的格式_html/css_WEB-ITnose

目標(biāo)實現(xiàn)如下效果：

1、分析

這個效果看起來很簡單，實際上可能并不那么容易實現(xiàn)。

首先是全部東西都居中顯示，除了“親愛的starof”這個稱呼的地方。這也是難點，也是本文要重點說的地方。

開始我嘗試將“ 親愛的starof:” 和下面那段文字分別獨(dú)立成兩個段落，一個居左，一個居左。結(jié)果當(dāng)然是不理想的，因為“親愛的starof”部分其實并不是真正意義上的居左，而是以下面這段文字作為參考的一個居左?，F(xiàn)在說說我的實現(xiàn)方法。首先全部文字都用

包裹，inline-block顯示，然后絕對定位。具體過程如下，各位如有不同見解或?qū)崿F(xiàn)方式歡迎指點討論。

2、實現(xiàn)

第一步，代碼基礎(chǔ)框架如下

全部文字都放在一個

標(biāo)簽內(nèi)。

 
 親愛的starof:
 恭喜您獲得快速升級年費(fèi)資格，您僅需開通4個月會員，即可自動升級為尊貴的年費(fèi)會員，差額部分享受8折優(yōu)惠哦! 
 

此時效果：

下圖為了方便后面對比。

第二步，設(shè)在

的display為inline-block,實現(xiàn)居中。

因為p本身是個塊級元素，我們下一步要以它為參照實現(xiàn)定位。所以需要設(shè)在display屬性讓它大小根據(jù)內(nèi)容而定，同時實現(xiàn)居中。

增加下面css樣式。

.top .first{display:inline-block;position:relative;}

效果如下

看起來和上面很像，實際上已經(jīng)發(fā)生了本質(zhì)變化。

第三步，通過絕對定位實現(xiàn)目標(biāo)效果。

增加下面css樣式。

相對定位作為參照，第一個絕對定位。

.top .first{...position:relative;}.first span:first-child{position:absolute;}

此時效果如下：

如果覺得效果不理想，可通過left，top稍微調(diào)整一下。

.first span:first-child{position:absolute;left:0;top:-5px;}

這就是我要的效果

第四步，完成其他部分

剩下的就都很簡單了，完整代碼如下：

 
 親愛的starof:
 恭喜您獲得快速升級年費(fèi)資格，您僅需開通4個月會員，即可自動升級為尊貴的年費(fèi)會員，差額部分享受8折優(yōu)惠哦! 
  
已有23919人享此優(yōu)惠
 

本文作者starof,因知識本身在變化，作者也在不斷學(xué)習(xí)成長，文章內(nèi)容也不定時更新，為避免誤導(dǎo)讀者，方便追根溯源，請諸位轉(zhuǎn)載注明出處：有問題歡迎與我討論，共同進(jìn)步。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com