按照慣例~第一堂嘛
div
外部
div
外部
之前初階的網站不管了
重新開始做!
新增html~然後按照慣例設定一大堆雜七雜八
不過這次必須全程使用css~並且存成樣式表檔
重新開始做!
新增html~然後按照慣例設定一大堆雜七雜八
不過這次必須全程使用css~並且存成樣式表檔
記得先開一個css資料夾放~然後就存檔
接下來要設定的東西通通都跟之前一樣~body設好還要利用標籤<p>設行距
大致原始碼(當然是css的)會長這樣(其中把margin全設為0的意義是不想留空白應該這次全用divq排版)
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.875em;
color: #437877;
background-color: #589E9C;
margin: 0px;
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
大致原始碼(當然是css的)會長這樣(其中把margin全設為0的意義是不想留空白應該這次全用divq排版)
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.875em;
color: #437877;
background-color: #589E9C;
margin: 0px;
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
剛剛設body時會發現~找不到之前頁面屬性時要設定的連結部份
很遺憾~這必須一個一個新增 複合(共要四個順序必須正確)
分別為a:link(連結) a:visited (已瀏覽) a:hover(滑鼠滑入) a:active(動作中)
最後程式碼如下(其中text-decoration為是否顯示底線)
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
color: #800080;
text-decoration: none;
}
a:hover {
color: #C00;
text-decoration: underline;
}
a:active {
}
很遺憾~這必須一個一個新增 複合(共要四個順序必須正確)
分別為a:link(連結) a:visited (已瀏覽) a:hover(滑鼠滑入) a:active(動作中)
最後程式碼如下(其中text-decoration為是否顯示底線)
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
color: #800080;
text-decoration: none;
}
a:hover {
color: #C00;
text-decoration: underline;
}
a:active {
}
接下來開始算新東西勒~要使用div排版那個版塊畫面要有差異一樣必須先設定css
新增 ID #wrapper(主畫面)
新增 ID #wrapper(主畫面)
接下來一樣開始設定~(BODY一樣的部份當然就不用在調了)
這邊要讓內容永遠顯示在中央text-align必須選擇: justify
ps.這只是第一個打底板所以到時候各個欄位間留的間距顏色要在這邊設定背景
這邊要讓內容永遠顯示在中央text-align必須選擇: justify
ps.這只是第一個打底板所以到時候各個欄位間留的間距顏色要在這邊設定背景
再來設定總寬度~為了好看要把內距全設定
為外距要讓它自動補齊~所以左右都選auto
(高就不用管了)
為外距要讓它自動補齊~所以左右都選auto
(高就不用管了)
設定完成就插入--版面物件---div
接下來就挺重要了~這個區域要放在哪裡
第一塊當然沒的選一定在body裡面
而接下來的就要注意是否有放在底板裡面~跟其他區域得位置
有沒有要製作巢狀等等
錯了也無所謂建議用分割畫面直接移動程式碼就好了(也可以試試看放在各處的差異)
第一塊當然沒的選一定在body裡面
而接下來的就要注意是否有放在底板裡面~跟其他區域得位置
有沒有要製作巢狀等等
錯了也無所謂建議用分割畫面直接移動程式碼就好了(也可以試試看放在各處的差異)
底板完全現在先來做第一塊banner(橫幅)
一樣新增id #banner調一調該調的(當然橫幅的字體大小不會跟內文一樣所以要在這邊設定)
還有內距啊外距啊寬度字要不要置中啊~等等等....這些初階就講過勒
設好就插入div把它放在#warpper裡面
一樣新增id #banner調一調該調的(當然橫幅的字體大小不會跟內文一樣所以要在這邊設定)
還有內距啊外距啊寬度字要不要置中啊~等等等....這些初階就講過勒
設好就插入div把它放在#warpper裡面
接下來是要設定有些網站最上面會有的設為首頁.......
還是新增id #top東設西設~調到滿意後結案
設這個的重點是
position: absolute;(固定)
z-index: 500;(優先順位~也就是排到最上層啦)
還是新增id #top東設西設~調到滿意後結案
設這個的重點是
position: absolute;(固定)
z-index: 500;(優先順位~也就是排到最上層啦)
最後結果預覽一下~畫面滿意即可
另外這次是另外有個css檔~可以直接用記事本開啟
程式碼 id部份
#navi {
background-color: #66AAA8;
width: 145px;
margin-right: 5px;
}
#wrapper {
background-color: #FFF;
text-align: justify;
padding: 5px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
color: #3F7271;
text-align: center;
width: 900px;
margin-bottom: 5px;
background-color: #BBD9D8;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 15px;
}
#top {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: left;
width: 300px;
margin-top: -30px;
margin-left: 5px;
position: absolute;
z-index: 500;
}
另外這次是另外有個css檔~可以直接用記事本開啟
程式碼 id部份
#navi {
background-color: #66AAA8;
width: 145px;
margin-right: 5px;
}
#wrapper {
background-color: #FFF;
text-align: justify;
padding: 5px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
color: #3F7271;
text-align: center;
width: 900px;
margin-bottom: 5px;
background-color: #BBD9D8;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 15px;
}
#top {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: left;
width: 300px;
margin-top: -30px;
margin-left: 5px;
position: absolute;
z-index: 500;
}
本堂完~~
果然第一堂課的東西都不難
不過這次步調大幅加快上課人員也削減大半,還是一步一步會示範著做
其實已經有另外弄一個範例把版排好了(用來教內距外距留邊界寬度等)
但我覺得這自己去實際調調看數據不就好了~所以略過
反正原始碼都貼了~看一下就知道
題外話:
看3days看到凌晨四點(進真理之門後變好燃喔魔法大戰耶!)
結果居然早上6點半就醒來~強迫躺到8點~
之後把剩下的看完到16:00........開始想睡覺了囧
結果後來邊上課邊打瞌睡.......喂
果然第一堂課的東西都不難
不過這次步調大幅加快上課人員也削減大半,還是一步一步會示範著做
其實已經有另外弄一個範例把版排好了(用來教內距外距留邊界寬度等)
但我覺得這自己去實際調調看數據不就好了~所以略過
反正原始碼都貼了~看一下就知道
題外話:
看3days看到凌晨四點(進真理之門後變好燃喔魔法大戰耶!)
結果居然早上6點半就醒來~強迫躺到8點~
之後把剩下的看完到16:00........開始想睡覺了囧
結果後來邊上課邊打瞌睡.......喂
真是自虐.....