張鑫旭是一位來自中國的CSS名人。在CSS設計上,他一直保持著極高的水平,并創造出了許多令人驚嘆的樣式效果。
其中,他的CSS文字環繞效果是非常引人注目的一種,許多網頁設計師都很喜歡使用。通過簡單的代碼,我們就可以將文本和圖片美觀地處理。
.wrap { width: 600px; margin: 0 auto; position: relative; } .img-box { position: absolute; top: 0; right: 0; width: 300px; } .img-box img { width: 100%; height: auto; } .text-box { width: 280px; margin: 20px 0 0 0; padding: 20px; background-color: #f2f2f2; } .text-box p:first-child { margin-top: 0; } .text-box p:last-child { margin-bottom: 0; } .text-box span { font-weight: bold; } .text-box:before { content: ""; display: block; height: 100%; float: left; } .text-box:after { content: ""; display: table; clear: both; }
上面是CSS代碼。我們首先在一個包含著塊元素(例如div)中創建兩個子元素:一個放置文本,一個放置圖片。我們使用position和z-index屬性定位它們,同時設置一些通用樣式和背景顏色。
我們還使用:before和:after偽元素來放置一些額外的樣式。在樣式方面,我們使用了許多元素定位和盒子模型屬性,以及一些基本的字體和顏色屬性。
如果您想要嘗試一下編寫CSS文字環繞模塊的代碼,請務必牢記關于定位,寬度和高度的規則。當您的代碼完美地應用到您的網站或應用程序上時,您一定會對自己的設計結果感到非常滿意。
上一篇jquery 屏幕高度
下一篇彌散陰影 css