CSS是前端開發不可缺少的一部分,在頁面設計中有很多需要使用CSS來實現的功能。其中之一就是在一個元素中加入兩個不同的圖片,這可以使用CSS來實現。
img { float: left; margin-right: 10px; } img.second { float: right; margin-left: 10px; }
我們可以先給第一個圖片元素添加一個float:left;,這樣它就會在父元素的左側浮動,并且添加一個右邊距離為10px來和下一個元素隔開。
接下來,我們再為第二個圖片元素添加一個class屬性名為second,并為其添加float:right;和一個左邊距離為10px即可,這樣第二個圖片元素就會在父元素的右側浮動,并且與第一個圖片元素隔開。
<div class="image-container"> <img src="first-image.jpg"> <img src="second-image.jpg" class="second"> </div>
最后只需要在父元素中添加兩個帶有src屬性的img元素即可,其中第二個img元素需要添加一個class屬性名為second,這樣就可以讓第二個圖片元素與第一個圖片元素產生不同的樣式效果了。
上一篇html5圖畫板代碼
下一篇html5圓形時鐘代碼