html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理
生活随笔
收集整理的這篇文章主要介紹了
html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在HTML里,由于瀏覽器顯示器等差異,瀏覽器的寬度也會(huì)有變化,為了適應(yīng)不同的寬度,需要用到平鋪。
例如頁(yè)面前面的固定的條等,如果是純色,可以用背景色,如果不是純色,是漸變等,可以用條狀圖平鋪。
常見(jiàn)的布局方式一般有table和div,如果需要單個(gè)圖片和漸變平鋪都需要,則不能放到一個(gè)td里,或一個(gè)div里。
可以的形式:
圖片是固定大小的:
div(固定寬高,盛放圖片)div(盛放條狀平鋪)兩個(gè)div并排float。
div(固定寬高,背景圖)div(盛放條狀平鋪)兩個(gè)div并排float。
div(盛放條狀平鋪),div(固定寬高,背景圖)嵌套進(jìn)前的div。
例如前面博文(相關(guān)博文:),頁(yè)面上面的條狀,為了方便管理,上面的元素統(tǒng)一放到大分區(qū)里名字叫header的div里,可以給header平鋪漸變的條狀圖,該大div設(shè)置為100%,然后里面嵌套一個(gè)小div盛放圖片,這里盛放的是背景圖。
這樣header的div里就有了本身平鋪的條狀背景圖,和嵌套在里面的小div的背景圖。
代碼:
總結(jié)
以上是生活随笔為你收集整理的html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 简账(开源记账软件)-功能介绍
- 下一篇: layui 前端计算