a:link,a:visited { text-decoration: none; color: pink } a:hover { text-decoration: underline } .bold { font-weight: bold } .altbg1 { background: #303030; font: 12px Tahoma, Verdana; } .altbg2 { background: #393939; font: 12px Tahoma, Verdana; } blockquote { margin-left:10px; margin-right:5px; border:#000000 dashed 1px; padding:5px; background-color:#393939} //blockquote { margin-left:20px; margin-right:20px; border:#000000 dashed 1px; padding:5px; background-color:#393939} .code { margin-left:20px; margin-right:20px; padding:5px; background-color:#393939} .clsResult { margin: 0; padding: 2px; } .clsResultTitle { font-size: 16px; font-weight: normal; text-decoration: underline; line-height:25px; margi:2px 0; color: YELLOW} .clsResultTitleNoBold { font-size: 12px; font-weight: bold; text-decoration: underline; line-height:normal; margi:2px 0; color: YELLOW} .clsResultDescription { font-size: 12px; line-height:normal; color: } .clsURL { font-size: 12px; line-height:25px; color: RED; text-decoration: underline; } .clsCell { padding: 2px; background: ; border: 1px solid RED; cursor:pointer; cursor:hand } .clsResultTitle a:hover {color:#f00} .clsResultTitleNoBold a:hover {color:#f00}
游客:   注冊 | 登錄 | 權限 | 幫助 | 萬年曆 | 捐助論壇 | 購物車
各位注意：為方便管理，由即日起，所有做廣告者即時刪號，亂開主題及灌水者重扣分，絕不手軟，請自重。
數據正在加載中...
YY行動版 | YY是我家，努力靠大家。

 YyHero18Net 首頁 » ※【 大名素材Arts → ( 名 Art 妳你您祢袮囉 新版區 ) 】※  移到頁底
作者:
標題: [分享] 手機版的網頁佈局div+iframe示範} 上一主題 | 下一主題
會員: yyhero18net
編號: 0000002
頭銜: 壇主
帳號: VIP永久會員
積分: 926070670
貢獻: 1032
發帖: 65535
注冊: 2005-4-27
狀態: 在線
性別: ( 男 Male )
贊助網站載入中...
#1 本貼發表於 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>

贊助網站載入中...
※ 所有言論不代表本站立場與本站立場無關，本站不對其內容負上任何責任。※
※ [注意公告] 已進行 統一發表主題的格式，謝謝合作！※
※ [注意公告] 原創貼的發貼要求，謝謝合作！※
2020-9-19 12:01 PM
資料 主頁 消息 本貼子捷徑 編輯帖子
會員: hukanjun
編號: 0050120
頭銜: 正式會員
帳號: 沒有 (查詢升級/捐款)
積分: 501
貢獻: 0
發帖: 231
注冊: 2006-2-17
狀態: 离線
性別: ( 不男不女 (人妖) )

#2 本貼發表於 2020-10-8 01:49 AM


学习了，很不错哟！！！！

※ 請勿惡意灌水，本文為 hukanjun 個人意見，與本站立場無關！※
※ 本論壇壇規 (請各位管理人員&會員 進來看看) 謝謝！※
2020-10-8 01:49 AM
資料 消息 本貼子捷徑 編輯帖子
可打印版本 | 推荐給朋友 | 訂閱主題 | 收藏主題

論壇跳轉:  
贊助網站載入中...
[ 聯系我們 - YyHero18Net 歪歪英雄十八叻 主首頁 ] 將本站加入最愛 ∼ 將本站設為首頁 ∼ 清除Cookies
Powered by Discuz! 2.5 F SP1 © 2001-2005 Comsenz Technology Ltd.  移到頁頂
2016-2-14日起新增微信捐助本站
2020-8-2 Yy行動版，正式上線測試，有關Flash小遊戲/下載種子的問題詳情。
2016-2-14日起新增微信捐助本站
各位內地/香港/海外朋友：Donation