※ 引述《ohmygod160 ( )》之銘言：
: 我想問一下
: 像是這樣子
: http://www2.nkfust.edu.tw/~u9524304/web/index-13.html
: 如果每個區塊想要做無限延伸，可以一直往下加資料 又不會跑掉
: 那我該怎麼切呢
: 我怎麼切都切不好
: 可以請大家教我嗎
: 謝謝
切三塊，分別叫頭、中、尾。
例如 html 為
<div>
<h1>xxx</h1>
<ul>
<li>yyy</li>
<li>zzz</li>
</ul>
</div>
也因為要切三塊，所以必需要有三個容器。
最外層 div 的 background 可以是 repeat-y 的一張 1px 高的底，
其中圖只是負責二端的線和右側的影子。
h1 的 background 可以是 header 和 div 一開始的漸層，
靠上且 no-repeat。
至於 ul 的 background 就是 div 下端的圓角曲線和影子，
靠下且 no-repeat。
記得，該給的 padding 就要給夠，不然字不夠把圖拉出來。
因為有漸層，所以頭要包括所有的漸層。
但是你給的例子中，漸層的高度實在很大。
這要全部包在 h1 中，一定不夠。
如果取消漸層，會好做很多就是了。
如果不要取消漸層，就可能：
1. 再多用一個 div 來包漸層的部份
2. 針對 ul 進行 position 或 z-index 的調整
（直覺 IE6 必死）
感想文：要用文字來說明這件事，還真不容易。
一定沒幾個人明白我在說哪國話吧。囧。
--
http://apansharing.blogspot.com/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.128.117.83
※ 編輯: andrew43 來自: 140.128.117.83 (10/07 02:01)
※ 編輯: andrew43 來自: 140.128.117.83 (10/07 02:01)