PCDVD數位科技討論區
PCDVD數位科技討論區   註冊 常見問題 標記討論區為已讀

回到   PCDVD數位科技討論區 > 其他群組 > 七嘴八舌異言堂
重新載入此頁 一個超新手的CSS問題
帳戶
密碼
 

 
第1頁 共2頁 1 2 下一頁
回應
 
主題工具
tzoyiing
Basic Member
 
tzoyiing的大頭照
 

加入日期: May 2004
您的住址: ROC
文章: 26
一個超新手的CSS問題
之前都是直接套用現成的模組，頂多美化一下版面而已
因為想深入學習CSS,所以買了兩本書回來參考
可在設計版型部份卻遇到一個大問題
像我依照書中的教學，要修改成如下圖的版型時



書中的語法卻分成HTML和CSS兩個部份！
像CSS可以直接加入部落格的樣式編輯區內，那HTML的DIV部份該如何添加進去呢？？

<body>
<div id="container">
<div id="contentWrap">
<div id="content">
</div>
</div>
<div id="links">
</div>
</div>
</body>

實在是困擾很久了，又一直找不到該如何解決
只好在這裡發問，還請老手們幫忙解惑一下…感恩
     
      
舊 2008-11-05, 01:53 AM #1
回應時引用此文章
tzoyiing離線中  
E.A.G.Y.O.O.
*停權中*
 

加入日期: Aug 2006
文章: 120
絕對武力2代 ?
 
舊 2008-11-05, 02:18 AM #2
回應時引用此文章
E.A.G.Y.O.O.離線中  
asurada1982
Major Member
 
asurada1982的大頭照
 

加入日期: Nov 2005
您的住址: UP-FRONT AGENCY
文章: 116
引用:
作者E.A.G.Y.O.O.
絕對武力2代 ?

應該是指網頁編輯之類？
**********
CS：S絕對武力：次世代。
打個小廣告：惡靈勢力快要上市。
__________________
牧野真莉愛(from wiki)
舊 2008-11-05, 02:29 AM #3
回應時引用此文章
asurada1982離線中  
edjc
Junior Member
 
edjc的大頭照
 

加入日期: Jul 2004
您的住址: Verthandi的懷裡
文章: 766
舊 2008-11-05, 02:46 AM #4
回應時引用此文章
edjc離線中  
bestbuy
Junior Member
 
bestbuy的大頭照
 

加入日期: Jul 2002
您的住址: Calgary, Canada
文章: 931
答案是不行 你不可能把HTML寫進CSS裡面

假如你無法修改HTML 那你只能去看那個網頁HTML裡面的架構然後照那個架構去寫CSS

for example-
你想要改blog旁邊sidebar的樣式 結果你在HTML裡面找到他是在 div id=container 下面的一個div下面的一個table class=side
那CSS就寫成 div#container div .side{border:2px dashed #FF0000}
這樣sidebar就會多一個紅色虛線的框.

有時候網頁很複雜可以用 firefox 的 DOM inspector 來分析 HTML 架構

以上沒看reference,憑印象打的 所以可能有錯
__________________
舊 2008-11-05, 03:17 AM #5
回應時引用此文章
bestbuy離線中  
iorlvskyo
Major Member
 
iorlvskyo的大頭照
 

加入日期: Feb 2005
文章: 101
是指使用外部CSS檔，來變更HTML的樣式，還是直接在標籤內做改變？

一般標籤內可用id與class來區別：
id應避免重複，雖然一般的html不會有錯誤訊息，但id盡可能是獨一無二的，寫程式時更應嚴謹的遵守，避免出錯。
class用在相同的樣式類別，可重複。

若要設置特定id的樣式
#id名稱 {
屬性: 值;
}

若要設置特定class的樣式
.class名稱 {
屬性: 值;
}

若要設置某一標籤的樣式(如：body、a、img、div、span、table、tr、td...)
tag {
屬性: 值;
}
這樣整份網頁的該標籤都會跟著變更！

如要在標籤內直接做樣式的變更就在標籤內加個style屬性
如：<div style="border: 1px solid #000;"></div>...等等之類的
__________________

ZARD - 坂井泉水 - 一位我最尊敬的藝人也是在我心中代表著一個無法取代的地位！
此文章於 2008-11-05 03:35 AM 被 iorlvskyo 編輯.
舊 2008-11-05, 03:28 AM #6
回應時引用此文章
iorlvskyo離線中  
yumi
*停權中*
 
yumi的大頭照
 

加入日期: Oct 2001
文章: 2,765
<!-- CSS Stylesheet -->
<style type="text/css">
<!--
/* vBulletin 3 CSS For Style 'VBB2 Classic' (styleid: 6) */
body
{
background-color: #00428C;
color: #FFFFFF;
font: 17px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
a:link
{
color: #FFFF00;
text-decoration: none;
}
a:visited
{
color: #FFF788;
text-decoration: none;
}
a:hover, a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.page
{
background-color: #0F559A;
}
td, th, p, li
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background-color: #3A6EA5;
}
.tcat
{
background-color: #024380;
color: #FFFFFF;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link
{
color: #FFFFFF;
text-decoration: none;
}
.tcat a:visited
{
color: #FFF788;
text-decoration: none;
}
.tcat a:hover, .tcat a:active
{
color: #FFF788;
text-decoration: underline;
}
.thead
{
background-color: #1E1E1E;
color: #EEEEFF;
font: bold 14px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link
{
color: #EEEEFF;
}
.thead a:visited
{
color: #EEEEFF;
}
.thead a:hover, .thead a:active
{
color: #EEEEFF;
}
.tfoot
{
background-color: #024380;
color: #EEEEFF;
}
.tfoot a:link
{
color: #EEEEFF;
}
.tfoot a:visited
{
color: #EEEEFF;
}
.tfoot a:hover, .tfoot a:active
{
color: #EEEEFF;
}
.alt1, .alt1Active
{
background-color: #014990;
}
.alt2, .alt2Active
{
background-color: #0F559A;
}
.alt3
{
background-color: #E6E6E6;
}
.wysiwyg
{
background-color: #0F559A;
color: #FFFFFF;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
background-color: #CFCFCF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
background-color: #CFCFCF;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
background-color: #CFCFCF;
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.time
{
color: #FFFFFF;
}
.navbar
{
font-weight: bold;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjdpth0
{
background-color: #F7F7F7;
color: #000000;
}
.panelsurround
{
background-color: #0F559A;
color: #FFFFFF;
}
legend
{
color: #FFFFFF;
font: bold 12px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_popup
{
background-color: #3A6EA5;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background-color: #014990;
}
-->
</style>

<!-- / CSS Stylesheet -->

===================================================
以上為pcvdv的CSS Stylesheet給你做參考
舊 2008-11-05, 04:09 AM #7
回應時引用此文章
yumi離線中  
tzoyiing
Basic Member
 
tzoyiing的大頭照
 

加入日期: May 2004
您的住址: ROC
文章: 26
先多謝上面幾位高手的幫忙 ^^
中午的時候又去買了一本書
不過現在遇到最大的問題還是在版型的設定方面
像圖裡的大盒子包小盒子方式的改進浮動式欄位設定就一直搞不出來∼暈
可否請大家再幫忙介紹幾本講解的比較淺顯的,對這方面著墨較多的書籍…謝謝 ^^
舊 2008-11-05, 01:27 PM #8
回應時引用此文章
tzoyiing離線中  
xx123
Power Member
 

加入日期: Mar 2006
文章: 634
舊 2008-11-05, 02:08 PM #9
回應時引用此文章
xx123離線中  
iorlvskyo
Major Member
 
iorlvskyo的大頭照
 

加入日期: Feb 2005
文章: 101
引用:
作者tzoyiing
先多謝上面幾位高手的幫忙 ^^
中午的時候又去買了一本書
不過現在遇到最大的問題還是在版型的設定方面
像圖裡的大盒子包小盒子方式的改進浮動式欄位設定就一直搞不出來∼暈
可否請大家再幫忙介紹幾本講解的比較淺顯的,對這方面著墨較多的書籍…謝謝 ^^



多寫多參考網路覺得比較實在，偶爾到書局翻翻書就好~~
從事寫網頁的工作一段時間了，還沒買過相關的半本書...
這些東西比較死，網路資料就非常多了！
將錢花在其他更有用的書籍似乎比較實在些~

<div id="container" style="width: 1000px; margin: 0 auto; background-color: #CCC">
<div id="contentWrap" style="float: left; background: #666; height: 500px; width: 580px; margin: 0 10px;">
<div id="content">
123
</div>
</div>
<div id="side" style="float: left; background: #999; height: 500px; width: 390px; margin-right: 10px;">
456
</div>

<div style="clear: both"></div>
</div>

記得當使用float後，要清除float，不然外框的高不會被撐開！
可以把clear: both拿掉試試看~~
__________________

ZARD - 坂井泉水 - 一位我最尊敬的藝人也是在我心中代表著一個無法取代的地位！
舊 2008-11-05, 03:45 PM #10
回應時引用此文章
iorlvskyo離線中  


 
第1頁 共2頁 1 2 下一頁
  回應

« 上一主題 | 下一主題 »

POPIN
主題工具

發表文章規則
您不可以發起新主題
您不可以回應主題
您不可以上傳附加檔案
您不可以編輯您的文章
vB 代碼打開
[IMG]代碼打開
HTML代碼關閉



所有的時間均為GMT +8。 現在的時間是06:45 AM.

聯絡我們 - PCDVD數位科技討論區 - 回到頂端

vBulletin Version 3.0.1
powered_by_vbulletin 2026。