Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [作業04 ] 以CSS製作網頁導覽列

Changed By: JinJin
Change Date: November 26, 2014 09:55AM

[作業04 ] 以CSS製作網頁導覽列
<h2>參考講義</h2>
[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

<h2>製作說明</h2>
1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作,以及使用以下的語法完成。

2.只要做導覽列就好,參考以下語法,修改成自己設定的風格,顏色及樣式都需要改變,並可設著加上圖片,記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images,儲存在hw04-102xxxxxxx 資料夾中

4.請每位同學依步驟完成本單元後,上傳至FTP

5.本次作業的重點在於:

(1 )以清單方式 <ul>及<li>利用CSS製作導覽列
(3 )熟悉以清單方式 <ul>及<li>製作導覽列的語法,自行修改成設定的風格
(4 )如何將圖片與色彩搭配出有質感的導覽列。

<h2>參考語法</h2>

<h3>新增index.html檔案,貼上以下語法</h3>

<xmp><ul id="button">
<li><a href="index.html">About</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="story.html">Story</a></li>
</ul>
<xmp><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>以CSS製作網頁導覽列</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>

<body>
<ul id="button">
<li><a href="index.html">About</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="story.html">Story</a></li>
</ul>
</body>
</html>
</xmp>

[hr]
<h3>新增style.css檔案(index.html 儲存於hw04-學號資料夾中),選擇以下兩種語法其中一個即可</h3>
[hr]

<h4>第一種靠左型</h4>
<xmp>#button {
font-weight: bolder;
color: #FFF;
background-color: #6E6E6E;
padding-bottom: 2px;
height: 20px;
padding-top: 2px;
font-size: 14px;
margin: 0px;
}

#button a {
display: block;
float: left;
width: 150px;
color: #FFF;
text-decoration: none;
}

#button a:hover{
color: #7CCBDC;
}

#button li {
float: left;
list-style-type: none;
letter-spacing: 2px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
padding-left: 10px;
}

</xmp>

<h4>第二種置中型</h4>
<xmp>#button {
font-weight: bolder;
color: #FFF;
font-size: 14px;

background-color:#6E6E6E;
margin: 0px;
padding:0px;
}

#button li {
width:178px;
text-align:center;
list-style-type:none;
background-color:#6E6E6E;
float:left;
letter-spacing: 2px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
margin-right:1px;
}

#button li a {
display: block;
line-height: 22px;
color: #FFF;
text-decoration: none;
}

#button li a:hover{
background-color:#39919F
}
</xmp>

[hr]

<h2>繳交方式</h2>
1.製作完成後,檔案命名方式:

第四個作業FTP上的資料夾為:hw04

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:http://mepopedia.com/~web103-c/hw04/hw04-1025445XXX

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾(非必要)

存放在 < hw04-學號 > 的資夾內


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

(2).請回答以下問題:
1.導覽列配色與風格設定:
2.有無遇到的問題?
3.製作感想(你認為導覽列的意義維和
4.製作作業的時間

[hr]
<h2>參考範例</h2>
http://mepopedia.com/forum/read.php?1173,27953

Original Message

作者: JinJin
Date: November 25, 2014 10:41PM

[作業04 ] 以CSS製作網頁導覽列

參考講義


[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

製作說明


1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作,以及使用以下的語法完成。

2.只要做導覽列就好,參考以下語法,修改成自己設定的風格,顏色及樣式都需要改變,並可設著加上圖片,記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images,儲存在hw04-102xxxxxxx 資料夾中

4.請每位同學依步驟完成本單元後,上傳至FTP

5.本次作業的重點在於:

(1 )以清單方式 <ul>及<li>利用CSS製作導覽列
(3 )熟悉以清單方式 <ul>及<li>製作導覽列的語法,自行修改成設定的風格
(4 )如何將圖片與色彩搭配出有質感的導覽列。

參考語法



新增index.html檔案,貼上以下語法



<ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> <xmp><!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> <title>以CSS製作網頁導覽列</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> </head><br /> <br /> <body><br /> <ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> </body><br /> </html><br />

[hr]

新增style.css檔案(index.html 儲存於hw04-學號資料夾中),選擇以下兩種語法其中一個即可


[hr]

第一種靠左型


#button {<br /> font-weight: bolder;<br /> color: #FFF;<br /> background-color: #6E6E6E;<br /> padding-bottom: 2px;<br /> height: 20px;<br /> padding-top: 2px;<br /> font-size: 14px;<br /> margin: 0px;<br /> }<br /> <br /> #button a {<br /> display: block;<br /> float: left;<br /> width: 150px;<br /> color: #FFF;<br /> text-decoration: none;<br /> }<br /> <br /> #button a:hover{<br /> color: #7CCBDC;<br /> }<br /> <br /> #button li {<br /> float: left;<br /> list-style-type: none;<br /> letter-spacing: 2px;<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #FFF;<br /> padding-left: 10px;<br /> }<br /> <br />

第二種置中型


#button {<br /> font-weight: bolder;<br /> color: #FFF;<br /> font-size: 14px;<br /> <br /> background-color:#6E6E6E;<br /> margin: 0px;<br /> padding:0px;<br /> }<br /> <br /> #button li {<br /> width:178px;<br /> text-align:center;<br /> list-style-type:none;<br /> background-color:#6E6E6E;<br /> float:left;<br /> letter-spacing: 2px;<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #FFF;<br /> margin-right:1px;<br /> }<br /> <br /> #button li a {<br /> display: block;<br /> line-height: 22px;<br /> color: #FFF;<br /> text-decoration: none;<br /> }<br /> <br /> #button li a:hover{<br /> background-color:#39919F<br /> }<br />

[hr]

繳交方式


1.製作完成後,檔案命名方式:

第四個作業FTP上的資料夾為:hw04

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:http://mepopedia.com/~web103-c/hw04/hw04-1025445XXX

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾(非必要)

存放在 < hw04-學號 > 的資夾內


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

(2).請回答以下問題:
1.導覽列配色與風格設定:
2.有無遇到的問題?
3.製作感想(你認為導覽列的意義維和
4.製作作業的時間

[hr]

參考範例


http://mepopedia.com/forum/read.php?1173,27953