很多時候,我們需要讓圖片在網頁中對齊。比如把圖片往右邊移動就是一種對齊方式。而實現這一效果,CSS的應用是不可或缺的。
img{ float: right; }
這段CSS代碼就是讓圖片向右浮動的方式,實現移動的效果。float屬性可以讓元素浮動在它父元素的左邊或右邊。在這個例子中,我們給img這個標簽添加了float:right的樣式,這樣圖片就會被浮動到右側。
通常,對于一個網頁而言,涉及到多個元素時,我們需要給每個元素添加class才能進行樣式設置。下面是一個實際應用的例子。
這是一個標題
這是一段文字
.content { width: 800px; margin: 0 auto; } .content img { float: right; }
上述代碼中,我們先給整個區域添加了一個class為content的樣式,設置了它的寬度和居中對齊。接著,我們再給img添加了一個浮動到右側的樣式,就完成了整個頁面的布局。
CSS技巧非常豐富,通過不斷學習和實踐,我們能夠實現網頁設計的各種需求,同時提升自己的能力。
上一篇css 圖片平面圖
下一篇vue報文html顯示