頁:
[1]
設計網頁版面問題
請問各位大大
小弟
用%來設計想說隨視窗調整大小
結果發現在chrome/firefox一開始正常
但還是始終沒辦法照視窗大小縮放
在IE甚至是整個版面跑掉
請問這怎樣解決呢?
附程式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/redmond/jquery-ui-1.10.3.custom.css"/>
<!--CSS樣式 下載網址 http://jqueryui.com/download/ -->
<script>
$(document).ready(function (){
$("#tabs").tabs();
});
</script>
<title> </title>
</head>
<body>
<table width="100%" border="1">
<tr>
<th width="10.5%" height="100" rowspan="2" align="left" valign="top" scope="col"> </th>
<th width="87.5%" height="60" colspan="2" scope="col"> </th>
</tr>
<tr>
<td width="87.5%" height="40" colspan="2" align="center" valign="middle">
<marquee direction="up" height="40" bgcolor="#FFFF00" scrollamount="1"> </marquee>
</td>
</tr>
<tr>
<th width="88.5%" height="580" colspan="2" align="center" valign="top" scope="row">
<div id="tabs"> <!-- 列表連結 位置須與下面id內容相同 -->
<ul>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
<li><div class='locked'>下載: <em>訪客無法瀏覽下載點，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div></li>
</ul>
<div id="tab1" style="overflow: scroll; width:1190px ; height: 495px;">
<table width="1180" border="1" align="center">
<tr>
<th width="160" scope="row">公告日期</th>
<td width="680" align="center">消息內容</td>
<td width="160" align="center">公告組別</td>
<td width="180" align="center">備註</td>
</tr>
</table>
</div>
<div id="tab2" style="overflow: scroll; width:1190px ; height: 495px;">
<table width="840" border="1" align="center">
<tr>
<th width="70" align="center" scope="row">行政組</th>
<td width="70" align="center">照相組</td>
<td width="70" align="center">錄影組</td>
<td width="70" align="center">文字記者組</td>
<td width="70" align="center">競賽組</td>
<td width="70" align="center">總務組</td>
<td width="70" align="center">裁判組</td>
<td width="70" align="center">教練組</td>
<td width="70" align="center">場地組</td>
<td width="70" align="center">記錄組</td>
<td width="70" align="center">計時組</td>
<td width="70" align="center">公關組</td>
</tr>
<table width="840" border="1" align="center">
<tr>
<th width="160" scope="row">開會日期</th>
<td width="520" align="center">會議記錄</td>
<td width="160" align="center">備註</td>
</tr>
</table>
</div>
<div id="tab3" style="overflow: scroll; width:1190px ; height: 495px;">
<table width="840" border="1" align="center">
<tr>
<th width="140" scope="row">公告日期</th>
<td width="455" align="center">公告內容</td>
<td width="105" align="center">公告組別</td>
<td width="140" align="center">備註</td>
</tr>
</div>
<div id="tab4" style="overflow: scroll; width:1190px ; height: 495px;">
</div>
<div id="tab5" style="overflow: scroll; width:1190px ; height: 495px;">
</div>
<div id="tab6" style="overflow: scroll; width:1190px ; height: 495px;">
<table width="660" border="0">
</table>
</div>
<div id="tab7" style="overflow: scroll; width:1190px ; height: 495px;">
</div>
<div id="tab8" style="overflow: scroll; width:1190px ; height: 495px;">
</div>
<div id="tab9" style="overflow: scroll; width:1190px ; height: 495px;">
</div>
</th>
<td width="9.5%" rowspan="2" align="center" valign="top">
<table width="150" border="0">
</table>
</td>
</tr>
<tr>
<th width="89.3%" height="60" colspan="2" align="center" valign="middle" scope="row">
<table width="880" border="0">
</table>
</th>
</tr>
</table>
</body>
</html>
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div> 要看瀏覽器版本ㄝ 不然妳可搜尋HTML瀏覽器相容語法之類的關鍵字 9548979 發表於 2013-11-8 12:23 PM static/image/common/back.gif
要看瀏覽器版本ㄝ 不然妳可搜尋HTML瀏覽器相容語法之類的關鍵字
大大建議用什麼瀏覽器開發比較好?
我習慣用chrome
但其他瀏覽器就變成沒辦法 這麼說好了~~不是以"設計師"的角度去做網頁設計，而是以"使用者"的角度去設計，前一段待在資訊公司，是要跨瀏覽器去做設計，也就是說，設計出來的頁面，要能夠在不同瀏覽器看都是正常的，當然啦，這就是考驗設計師的能力與經驗囉。建議你先搜尋解決跨瀏覽器的CSS語法，這樣應該可以解決你目前的瓶頸 開發的話當然要用chrome或者safri了，調試模式很好用，當然firefox也不錯<br><br><br><br><br><div></div> 恩....我用 DW 看了一下...
基本建議
1.不要用 table 去包整個網頁 很難控制的
Table 比較適合 固定寬度.
2.網頁設計 請視覺化之後 再來考慮怎樣編排 DIV
速度與介面發展會比較純熟.
3.你可以捨棄 table 直接用 DIV 進行編排 反而會比較快.
4.先用一個最大的 div 把整個網頁包起來 進行控制寬度 往後的發展 只需要設定 % 數即可
我講得很不清楚也請見諒~ 建議多翻翻 css 的書籍或是網站 你會受益良多...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> 9548979 發表於 2013-11-10 11:52 AM static/image/common/back.gif
這麼說好了~~不是以"設計師"的角度去做網頁設計，而是以"使用者"的角度去設計，前一段待在資訊公司，是要跨 ...
好的
謝謝大大
寶貴的意見及看法 gbluefox617 發表於 2013-11-13 02:16 PM static/image/common/back.gif
開發的話當然要用chrome或者safri了，調試模式很好用，當然firefox也不錯
謝謝大大
寶貴的意見
我會試試看的 askasb 發表於 2013-11-25 10:04 PM static/image/common/back.gif
恩....我用 DW 看了一下...
基本建議
1.不要用 table 去包整個網頁 很難控制的
謝謝大大的講解
所以大大的意思是
表格的話要用div配合table嗎?
還是div就可以做到了?
我切版的原則是 簡單事情 就簡單的做... 我的手法是 表格元件 就直接用表格
很明顯有 row/cell 就用表格處理掉就好.
所以會用到 DIV
例:
<!-- Css -->
最外層的 控制 整個 DIV 的寬度
div#body div.width420 {
float: left;
width: 420px;
margin: 0 10px;
}
內層 DIV 控制定位 ...
div.table {
position: relative;
margin: 20px 0 0 0;
_zoom: 1;
}
.mt10 {
margin-top: 10px !important;
<!-- CSS -->
實體表現方式
<div class="width420">
<div class="table mt10">
<table class="stripeB noBorder">
<tbody>
<tr class="bg">
<th>內容量</th>
<td>125mL</td>
</tr>
<tr>
<th>商品分類</th>
<td>＜スキンケア／化粧水＞</td>
</tr>
<tr class="bg">
<th>使用期間</th>
<td>約５週間 （使用方法にそった使い方での目安）</td>
</tr>
<tr>
<th>香り</th>
<td>無香料</td>
</tr>
<tr class="bg">
<th>使用感</th>
<td>さっぱり</td>
</tr>
<tr>
<td>醫薬部外品</td>
<td></td>
</tr>
<tr class="bg">
<th>発売日</th>
<td>2008/10/21</td>
</tr>
</tbody>
</table>
</div>
</div>
以上....當然這只是包含一部分...
有時候實做可以快速進步.
.
但是我會建議多看看別人的原始碼 利用chrome ->檢查元素 一層層 觀看
可以讓你更加速去瞭解整個編排方式的變化..
以上
補充內容 (2013-11-28 09:32 AM):
只要外層的 DIV 寬控制好 內部的元件 就不用去特地控制寬度了...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><br><br><br><br><br><div></div> askasb 發表於 2013-11-28 09:26 AM static/image/common/back.gif
我切版的原則是 簡單事情 就簡單的做... 我的手法是 表格元件 就直接用表格
很明顯有 row/cell 就用表格處 ...
感謝大大
我再來研究研究
非常感謝 :) 不要用table，要用div 來排版，再配合css.
CSS也有 browser 問題，可以再用LESS來解決。
http://www.lesscss.net/article/home.html puper 發表於 2013-12-16 03:56 PM static/image/common/back.gif
不要用table，要用div 來排版，再配合css.
CSS也有 browser 問題，可以再用LESS來解決。
感謝大大
提供相關資訊
我再來研究研究
非常感謝 :D responsive web design
推薦你去看看Bootstrap
裡面的css grid system應該可以輕鬆實踐你的需求 siva54088 發表於 2014-2-3 07:44 PM static/image/common/back.gif
responsive web design
推薦你去看看Bootstrap
裡面的css grid system應該可以輕鬆實踐你的需求 ...
感謝大大
提供相關資訊
我再來研究研究
非常感謝 :)<br><br><br><br><br><div></div>
頁:
[1]