Board logo

標題: [分享] 手機版的網頁佈局div+iframe示範 [打印本頁]

作者: yyhero18net     時間: 2020-9-19 12:01 PM    標題: [分享] 手機版的網頁佈局div+iframe示範

手機版的網頁佈局div+iframe示範

演示:屏幕 180 x 300。注意:黃框是主素材div。
head.html 頁頂
index.html
主首貢內容
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
foot.html 頁底版權聲明


手機版的網頁佈局大多數都以直向編排
由於直向編排 令頁面左右空間有限 所以左右側欄就算了吧
而且現在越來越多電腦版的網頁佈局都以直向編排 左右留空
目的似乎是同時迎合手機版網頁的需要
沒錯吖 由於手機版的直向編排和電腦版的橫向編排 頁面闊度不一樣
例如電腦版的橫向編排 能并排數個單元
手機版就需縮排為 一個起 兩個止 三個就可能會令當中的文字縮得細小 影響觀看
另外 其實在頁頂加上以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>

作者: hukanjun     時間: 2020-10-8 01:49 AM
学习了,很不错哟!!!!




歡迎光臨 YyHero18Net 首頁 (http://yyhero18net.com/yyhero18net/) Powered by Discuz! 2.5