HTML佈局排版2 div的和圖片平鋪方便管理

時間 2020-06-07

標籤 html 佈局排版 div 圖片平鋪方便管理欄目 HTML 简体版

原文原文鏈接

在HTML裏，因爲瀏覽器顯示器等差別，瀏覽器的寬度也會有變化，爲了適應不一樣的寬度，須要用到平鋪。
例如頁面前面的固定的條等，若是是純色，能夠用背景色，若是不是純色，是漸變等，能夠用條狀圖平鋪。
常見的佈局方式通常有table和div，若是須要單個圖片和漸變平鋪都須要，則不能放到一個td裏，或一個div裏。
能夠的形式：
圖片是固定大小的：
div(固定寬高，盛放圖片）div(盛放條狀平鋪）兩個div並排float。
div(固定寬高，背景圖）div(盛放條狀平鋪）兩個div並排float。
div(盛放條狀平鋪），div(固定寬高，背景圖）嵌套進前的div。html

例如前面博文（相關博文：），頁面上面的條狀，爲了方便管理，上面的元素統一放到大分區里名字叫header的div裏，能夠給header平鋪漸變的條狀圖，該大div設置爲100%，而後裏面嵌套一個小div盛放圖片，這裏盛放的是背景圖。
這樣header的div裏就有了自己平鋪的條狀背景圖，和嵌套在裏面的小div的背景圖。
代碼：瀏覽器

</head>
<body>
<div id="header" style="background-image:url(images/topb2.jpg);width:100%;height:200px;">
<div style="background-image:url(images/topb1.jpg);width:176px;height:200px;"></div>
</div>

省略。。。。。

<div id="footer" style="background-image:url(images/bom2.jpg);width:100%;height:200px;clear:both;">
<div style="background-image:url(images/bom1.jpg);width:176px;height:200px;"></div>
</div>
</body>

圖示：佈局

可是這種切片方式，若是後期須要改的話，而前面的圖片沒有分層的狀況下，很差改。
若是有分層圖備份的話，直接替換背景漸變再切兩個也比較麻煩，可是比沒有分層圖備份要容易。
若是是用上訴方式，要改漸變，就要改兩張圖，切條和圖片都要改，沒有分層還有把圖片選區處理，但圖片一旦合成，由前面的博文（相關博文：PS弧形邊緣的去黑色背景色）可知，越複雜的圖片越難分層還原回去，再選區回分層圖就有偏差。
因此還能夠這樣作，漸變和圖片分開，這樣改圖就改圖，不動漸變，改漸變就改漸變，不須要改圖，二者分開，就更容易修改了。
須要改漸變，只須要作個漸變，切個條，須要改圖，就能夠把透明圖改掉。url

這種狀況下，能夠嵌套div，也能夠分兩個div，一個背景圖漸變平鋪而且盛放那個透明圖，可是這樣修改漸變平鋪要修改兩個div的背景。
嵌套能夠只修改一次，大div盛放背景漸變，內部小div盛放透明圖（或把透明圖設置成背景圖）
簡單點說，就是背景平鋪和圖片分開，這樣改哪一個只改一個就行。spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。