在 HTML 基礎教學中, 有介紹到設定標籤寬度與高度的方法, 而在 CSS 屬性中, 也能夠設定寬度與高度, 語法如下
預設值是 auto, 表示由瀏覽器自動決定該標籤的寬度或高度
length 可以用 px, cm, in 這幾個長度單位
percentage 是指要佔上層標籤範圍多少百分比的寬度或高度
例如
在上例中, 我們設定了 DIV 的寬度為整個頁面寬度的 50%, 高度為整個頁面高度的 100% , 也許你會發現, 邊邊還有一些空隙, 這是因為 BODY 標籤預設有外邊界的關係, 一般來說, 寬度與高度若設為百分比, 是以它上層標籤的可使用範圍來計算, 也就是要扣掉內外邊界, 但有時又有例外, 而且 IE 與 Firefox 的算法可能又不同, 我在排這個 Blog 的版型時, 常為了這個而困擾不以, 不過這個就牽扯到另一個議題了, 我們之後再談
這兩個屬性也可以用來設定表格的欄寬列高, 以及整個表格的寬高, 其實原理是一樣的
例如
當 HTML 的寬高屬性, 以及 CSS 的寬高屬性都有設定時, 那麼會以 CSS 的設定為優先
例如我們在上例中的 TABLE 標籤上, 加上 HTML 的寬高屬性
在 HTML 的寬高屬性上, 我們都設為 50%, 而 CSS 則設為 100%, 我們可以發現, 最後呈現時, 還是為 100% 的效果
--gs--
{CSS基礎教學}{HTML 寬度|高度}
預設值是 auto, 表示由瀏覽器自動決定該標籤的寬度或高度
length 可以用 px, cm, in 這幾個長度單位
percentage 是指要佔上層標籤範圍多少百分比的寬度或高度
例如
在上例中, 我們設定了 DIV 的寬度為整個頁面寬度的 50%, 高度為整個頁面高度的 100% , 也許你會發現, 邊邊還有一些空隙, 這是因為 BODY 標籤預設有外邊界的關係, 一般來說, 寬度與高度若設為百分比, 是以它上層標籤的可使用範圍來計算, 也就是要扣掉內外邊界, 但有時又有例外, 而且 IE 與 Firefox 的算法可能又不同, 我在排這個 Blog 的版型時, 常為了這個而困擾不以, 不過這個就牽扯到另一個議題了, 我們之後再談
這兩個屬性也可以用來設定表格的欄寬列高, 以及整個表格的寬高, 其實原理是一樣的
例如
當 HTML 的寬高屬性, 以及 CSS 的寬高屬性都有設定時, 那麼會以 CSS 的設定為優先
例如我們在上例中的 TABLE 標籤上, 加上 HTML 的寬高屬性
在 HTML 的寬高屬性上, 我們都設為 50%, 而 CSS 則設為 100%, 我們可以發現, 最後呈現時, 還是為 100% 的效果
--gs--
{CSS基礎教學}{HTML 寬度|高度}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
21 意見:
想請問用什麼html可以令文章的左右拉闊一些.像下圖的紅色.我想左右各加15cm.請問可以怎辦.我不可以給你blogsport.因為我的bolg有廣告成份.需要我的html可以e-mail我 popopo09@ymail.com
http://cg-love.com/s1/4_1jxqc.jpg
你可以到版面配置中的修改HTML功能調整 css
要修改 HTML 前建議最好先備份
一般來說都是調整各 #xxxxxx-wrapper 內的寬度設定，並實際上要以各版型為準
比較簡單的方式就是在 html 搜尋各"width:"，然後調整各 width 的值看看效果，調到滿意為止
例如以這個版型來說，要調整
#outer-wrapper
#main-top
#main-bot
#wrap2
#main
#sidebar
這幾個樣式的寬度設定
我大概說一下各樣式用在哪裡
#outer-wrapper ：主區，也就是中間底色較淡的地方，下面各區都包在這裡面
#main-top ：標題區
#main-bot ：最下方那一區(不知該叫什麼^^")
#wrap2 ：中間區(內含主文區及側欄區)
#main ：主文區
#sidebar ：側欄區
所以你的需求應該是調上述除了 #sidebar 之外的那五個，但你說要加 15cm ，嗯…不知你的單位有沒有打錯，因為它預設是用 px(像素)，建議你還是用像素為單位(不要問我 15cm是多少px ^^")，你就隨意加一點試試，例如 #outer-wrapper 的寬度設為 730px，其他同理，慢慢調到你滿意的寬度
另外要注意，因為這個版型的
#main-top、#main-bot、#wrap2這三區有用背景圖，加大寬度後背景圖的效果會不整齊，所以你可能要把背景圖的設定拿掉，或自行改用其他適合的背景圖
以上希望有幫到你 ^__^
謝謝你的回覆和提點!
但我還有少少問題.
你上我的blog可以見到.(背景圖不整齊)..
你可以幫我想辦法嗎?我很愛這個背景圖.
還有我想請問可以加入投影片.有什麼好介紹.
謝謝
泛黃紙張的這個背景圖，除非你自己重新製作符合版面寬度的圖，否則沒有辦法，其實我建議可以拿掉這個背景(#main-top、#main-bot、#wrap2這三區)，因為它與淡黃的底色差異不大，其實不太明顯，相對來說，深褐色小花的背景圖就有明顯的效果(這是設在body)
投影片的部份，建議你可上傳圖片到 google 的相簿服務
http://picasaweb.google.com.tw/
然後在版面配置中的網頁元素中新增一個投影片元素，就可簡單的做出投影片了
若是影片檔，則可利用 YouTube
謝謝你的回覆和提點!
(這是設在body).???不太明.bobdy???
你在你的 html 中，應該可以找到這一段
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:#000000;
line-height:1.3em;
background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;
}
這裡是設整個網頁的樣式，而其中
background:#483521 url("http://www2.blogblog.com/scribe/bg.gif")
就是設定深褐色小花為背景圖，若不知道我指的圖是哪一個，可以在網址列上打
http://www2.blogblog.com/scribe/bg.gif
就可以看到
這一段不用改
而我建議你拿掉的是下面這三個
#main-top {
width:900px;
height:49px;
background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
margin:0px;
padding:0px;
display:block;
}
#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top left;
margin:0;
padding:0;
display:block;
}
#wrap2 {
width:900px;
background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align:left;
display:block;
}
把它改成
#main-top {
width:900px;
height:49px;
background:#FFF3DB;
margin:0px;
padding:0px;
display:block;
}
#main-bot {
width:900px;
height:81px;
background:#FFF3DB;
margin:0;
padding:0;
display:block;
}
#wrap2 {
width:900px;
background:#FFF3DB;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align:left;
display:block;
}
拿掉的三個背景圖即是下面這三個泛黃紙張的背景圖
http://www2.blogblog.com/scribe/bg_paper_top.jpg
http://www.blogblog.com/scribe/bg_paper_bot.jpg
http://www1.blogblog.com/scribe/bg_paper_mid.jpg
你好..我的背景圖ok了.你可以看看
還有想請你給一些意見.
怎可以令blog更受歡迎.更美觀??
考倒我了 Orz
如何讓 blog 更受歡迎…這我也很想知道 ^__^"
目前我這裡的人氣也不旺，所以我無法給你什麼意見
如何讓 blog 更美觀，這也要專業人員才有辦法自己做出漂亮的版面，不過網路上也是有人在免費提供版面給人家使用，你可以搜尋看看是否合意
你好.
可不可給下以下的html
客人次: 14,209 瀏覽頁次:
今日 20, 總數 29861
昨天:42 本週:495 本月:1816
前天:46 上週:478 上月:1837
訪客人次可參考這篇文章
http://enjoywebtech.blogspot.com/2008/01/statcounter.html
而其他的是部落格觀察的貼紙
http://look.urs.tw/
到首頁上新增你的網址，它就會開始統計你網站的資訊
詳細說明你可以參考這篇文章
http://blog.kengao.tw/2007/08/bloglook.html
或搜尋一下「部落格觀察 貼紙 教學」就有很多文章了 ^_^
你好.
請問怎樣更改分隔線???
你是說部落格觀察貼紙的表格框線嗎？請參考 http://enjoywebtech.blogspot.com/2009/06/blog-post.html
不..是文章的分隔線..
可否再說清楚一點，你指的分隔線是什麼
我看了一下你的 blog，好像只有在文章內文與張貼者中間有線，是指這個嗎？
PS. 你的人氣比我的還旺，居然來問我增加人氣的方法，真是讓我汗顏啊 @@"
是阿..就是這一條.(文章內文與張貼者的中間線)
請問這分隔線是怎更改的..
哈哈..我的人氣還在努力中. 你覺得多嗎?
可惜還是不到我的目標..
我的人氣是你的幫忙.多謝你的提點和耐心地解答我的提問.謝.
請問懂QOOZ.和XANG的 HTML嗎?
請問有可以給我你的電郵嗎?最好MSN.QQ也可
因我正在編排美麗的板面中.會有很多問題。
我的電郵: cytang1023@hotmail.com
我想應該是調整下面這個樣式中的 border-top 吧
.post-footer {
font-family: Verdana, sans-serif;
font-size:74%;
border-top:1px solid #BFB186;
padding-top:6px;
text-align:right;
}
我的人氣每日平均不到 100 頁次，算是很少的 >"<
至於 QOOZ.和XANG ，我沒聽過耶 ^_^"
但我想如果也是 HTML，那應該還是差不多吧
有問題還是到這個站來留言吧，我沒在用 MSN QQ，你有留言時 blogger 自動就會 mail 給我了，只是我沒辦法馬上來回你而已
而且這樣也可以幫我加點人氣 ^__^
可不可給我.
您對本站內容的評價
的html.
你的人氣加油吧!
還有你懂編排美麗的板面嗎?
到版面配置中新增小工具，選「意見調查」工具
問題欄輸入 您對本站內容的評價
答案欄輸入你想要的選項
再調整意見調查結束日期及時間即可
至於版面美編，我真的幫不上忙 ^_^"
PS.好奇問一下，你是老闆還是員工？
好的.謝謝.
至於老闆還是員工.我在這方便回答你.
你可以加我的mail.我會說給你知.
popopo09@ymail.com
問2個問題
1.
我設定一個div(wrapper)，再裡面設定一個div(div_01)。
清除div_01裡的內容，div_01往上縮成一直線。
設定duv_01 css的margin-top：50
結果如圖
http://i1199.photobucket.com/albums/aa471/citcitcit2002/A1_zps98a1783e.jpg
怎麼會這樣？
2.
我在wrapper中設定兩個div(2-b 3-c)
2-b設定高度30px
此時2-b內容超過所設定的高度。
我以為下方的div(3-c)會往下順移，可是事實上卻是重疊到下方div(3-c)
如圖
http://i1199.photobucket.com/albums/aa471/citcitcit2002/w1_zpsfe885c39.jpg
是正常情形嘛？
1. 不好意思，目前我也不清楚為何它會造成 div wapper 往下移
不過，若依我的習慣，我會改在 wapper 上設 padding
因為以前的經驗讓我覺得 padding 比較不會有意想不到的結果
例如
<html>
<head>
</head>
<body>
<div style="height:300px;padding-top:50px;background:yellow;">
<div style="border:1px solid red;">
</div>
</div>
<body>
</html>
2.可否將可重現此問題的 HTML 放上來？
張貼留言
廣告訊息會被我刪除