會員:
yyhero18net
編號: 0000002
頭銜: 壇主
帳號: VIP永久會員
積分: 1950173998
貢獻: 1032
發帖: 65535
注冊: 2005-4-27 狀態: 离線
性別: (
男 Male
)
贊助網站載入中...
|
#1
本貼發表於 2020-9-19 12:01 PM |
標題: [分享] 手機版的網頁佈局div+iframe示範 |
贊助網站載入中...
贊助網站載入中...
手機版的網頁佈局div+iframe示範
|
手機版的網頁佈局大多數都以直向編排
由於直向編排 令頁面左右空間有限 所以左右側欄就算了吧
而且現在越來越多電腦版的網頁佈局都以直向編排 左右留空
目的似乎是同時迎合手機版網頁的需要
沒錯吖 由於手機版的直向編排和電腦版的橫向編排 頁面闊度不一樣
例如電腦版的橫向編排 能并排數個單元
手機版就需縮排為 一個起 兩個止 三個就可能會令當中的文字縮得細小 影響觀看
另外 其實在頁頂加上以option做的選單 就能當成簡單的導航列
別看以option做的選單較粗糙 經css修飾後一樣能美觀的呢
最重要還是不需複雜編寫導航列 更不需擔心瀏覽器兼容問題
演示中 由於語法不支持 所以令導航列跳轉http://www.yy18.info/首貢失效
直接將以下參數放進html 就能運作正常跳轉首貢了。CODE: [Copy to clipboard]
<div style="height:300;border: 3px solid yellow;">
<div style="width:100%;border: 3px solid red;">
<div style="float:right;">
<select onchange="if(this.options[this.selectedIndex].value != ’’) {
window.location=(this.options[this.selectedIndex].value) }" align="absmiddle">
<option value="">Menu</option>
<option value="http://www.yy18.info/">首貢</option>
<option value="">Menu1</option>
<option value="">Menu2</option>
<option value="">Menu3</option>
<option value="">Menu4</option>
<option value="">Menu5</option>
<option value="">Menu6</option>
<option value="">Menu7</option>
<option value="">Menu8</option>
<option value="">Menu9</option>
</select>
</div>
<div style="float:left;"><IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=100% HEIGHT=20 SRC="head.html"></IFRAME></div>
</div>
<div style="float:center;height:100%;border: 3px solid red;">index.html<br>主首貢內容</div>
<div style="width:100%;border: 3px solid red;"><IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=100% HEIGHT=20 SRC="foot.html"></IFRAME></div>
</div>
贊助網站載入中...
※ 所有言論不代表本站立場與本站立場無關,本站不對其內容負上任何責任。※
※ [注意公告] 已進行 統一發表主題的格式,謝謝合作!※
※ [注意公告] 原創貼的發貼要求,謝謝合作!※
|
|