CSS-教學資料

[cajhbb]

CSS-教學資料

範例網站 http://172.20.2.3/~learn/web/15/demo/index.html
備份網站 http://172.20.2.4/~learn/web/15/demo/index.html
-----------------------------------------------------------------------------------------------
作業網站 http://172.20.2.3/~learn/web/15/ex15/index.html
備份網站 http://172.20.2.4/~learn/web/15/ex15/index.html

[cajhbb]

下載CSS教學範例

css.zip

(2.06 MiB) 已下載 287 次

------------------------------------------------------
解壓縮至css


------------------------------------------------------
上傳

[cajhbb]

打開樣式表 style.css

2016-02-25_162558.jpg (231.63 KiB) 已瀏覽 2136 次

-----------------------------------------------------------------

body {
margin: auto; /*緊貼頂部(上下左右)，沒有空隙*/
background-color:#212663; /*背景色設定*/
}


/*--------------- 定義上幅樣式 -------------*/
#wrapper-top {
width: 950px; /*寬度設定為900px*/
margin:0 auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #3366CC; /*文字顏色設定*/
border: 2px solid #CC0000; /*網頁做外框的設定*/
background-image: url(images/Taiping.png);
background-repeat: no-repeat;
}


/*--------------- 定義下幅(上半部)樣式 -------------*/
#wrapper-main {
width: 950px; /*寬度設定為900px*/
margin:0 auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
border: 2px solid #3366cc; /*網頁做外框的設定*/
}


#top-header{
background-color:#069;
height: 112px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/
padding:20px; /*內距設定*/
font-size:32px; /*字體大小*/
color:#FFFFFF; /*字體顏色*/
border: 2px solid #3366cc; /*網頁做外框的設定*/
background-image: url(images/Taiping.png);
background-repeat: no-repeat;

}
/*--------------- 定義下幅(下半部)樣式 -------------*/
#content {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#339999; /*---深綠色---背景色設定*/
font-size: 15px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#CCCCCC; /*---灰色---文字顏色設定*/
padding: 5px; /*文字與#content間的內距*/
border: 2px solid #3366cc; /*網頁做外框的設定*/
}

#footer {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h2{
font-size:20px;
color:#FFF;
}


h3{
font-size:18px;
color:#FFF;
}

h4{
font-size:14px;
color:#999999;
}

.floatleft{
float:left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0px;
}

-------------------------------------------------------
修改
1.抬頭
2.body
3.#content

[cajhbb]

打開05.html 貼上.css引入檔 style.css
--------------------------------------------------------------------------

<link rel="stylesheet" href="style.css" media="screen" />

<div id="wrapper-main">

<div id="content">

</ div>
</ div>

--------------------------------------------------------------------------
第一步：貼上引入檔 style.css

2016-02-25_162851.jpg (77.15 KiB) 已瀏覽 2134 次

--------------------------------------------------------------------------
--------------------------------------------------------------------------
第二步：貼上 wrapper-main宣告上半部樣式

2016-02-25_163329.jpg (44.62 KiB) 已瀏覽 2134 次

--------------------------------------------------------------------------
--------------------------------------------------------------------------
第三步：貼上 content 宣告本文區

2016-02-25_163354.jpg (55.47 KiB) 已瀏覽 2133 次

--------------------------------------------------------------------------
--------------------------------------------------------------------------
第四步：結束符號

2016-03-04_105043.png (10.48 KiB) 已瀏覽 2132 次

--------------------------------------------------------------------------

[cajhbb]

1.建立三個錨點: 交通 觀光景點 太平島八景

2016-03-04_110018.png (63.85 KiB) 已瀏覽 2131 次

--------------------------------------------------------------------------
2.建立超連結至-->3個錨點:

2016-03-04_110149.png (49.2 KiB) 已瀏覽 2128 次

--------------------------------------------------------------------------
3.建立1個返回錨點 home

2016-03-04_110936.png (61.69 KiB) 已瀏覽 2126 次

--------------------------------------------------------------------------
4.建立超連結至-->home錨點:

2016-03-04_111028.png (50.4 KiB) 已瀏覽 2125 次