PCDVD數位科技討論區
第1頁 共2頁 1 2 下一頁
每頁顯示此主題的 10 個文章

PCDVD數位科技討論區 (https://www.pcdvd.com.tw/index.php)
-   七嘴八舌異言堂 (https://www.pcdvd.com.tw/forumdisplay.php?f=12)
-   -   一個超新手的CSS問題 (https://www.pcdvd.com.tw/showthread.php?t=823999)

tzoyiing 2008-11-05 01:53 AM
一個超新手的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>

實在是困擾很久了，又一直找不到該如何解決
只好在這裡發問，還請老手們幫忙解惑一下…感恩 :)

E.A.G.Y.O.O. 2008-11-05 02:18 AM
絕對武力2代 ?

asurada1982 2008-11-05 02:29 AM
引用:
作者E.A.G.Y.O.O.
絕對武力2代 ?

應該是指網頁編輯之類？
**********
CS：S絕對武力：次世代。
打個小廣告：惡靈勢力快要上市。

edjc 2008-11-05 02:46 AM
建議你到這網站看看

http://www.pcnet.idv.tw/pcnet/css/css14.HTM

bestbuy 2008-11-05 03:17 AM
答案是不行 你不可能把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,憑印象打的 所以可能有錯 :stupefy:

iorlvskyo 2008-11-05 03:28 AM
是指使用外部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>...等等之類的

yumi 2008-11-05 04:09 AM
<!-- 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給你做參考

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

xx123 2008-11-05 02:08 PM
http://www.hsiu28.net/style/index.php
http://www.chinaue.com/tool/css/

iorlvskyo 2008-11-05 03:45 PM
引用:
作者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拿掉試試看~~


所有的時間均為GMT +8。 現在的時間是06:45 AM.
第1頁 共2頁 1 2 下一頁
每頁顯示此主題的 10 個文章

vBulletin Version 3.0.1
powered_by_vbulletin 2026。