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

Advanced

Change History

Message: [講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果

討論區清單 文章列表
Changed By: JinJin
Change Date: April 02, 2015 11:52AM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: April 01, 2015 11:57AM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: April 01, 2015 11:57AM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: April 05, 2014 04:21PM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: April 05, 2014 04:21PM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: April 01, 2014 10:52AM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
Changed By: JinJin
Change Date: March 31, 2014 10:42PM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果

Original Message

作者: JinJin
Date: March 31, 2014 10:26PM

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果

範例說明


http://mhttp://mepoped~ji102-cnjin3/hw03eb/hw04a/works.html

本範例延續上個範例http://mepopedia.com/forum/read.php?804,43670
繼續其他內頁的編輯
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
延續上個主題的內容

修改部分

1.最外層的ID改為wrapper-02
2.contents的部分
續以及從頭的做法)
http://youtu.be/FmcyhSYAo_Y



[hr]
HTML與CSS練習 內頁實作篇 資料整理 以DIV製作表格效果
http://youtu.be/TPp7jR_NTx8




[hr]

首頁範例製作步驟


可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

HTML語法


<br /> <!DOCTYPE html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>進階網頁設計課程</title><br /> <link href="style.css" rel="stylesheet" type="text/css" /><br /> </head><br /> <br /> <body id="wrapper-02"><br /> <div id="header"><br /> <h1><a href="index.html">進階網頁設計課程</a></h1><br /> <p class="copy">China University of Technology </p><br /> <br /> <ul id="navi"><br /> <!-- 導覽列從此開始 --><br /> <li id="navi_01"><a href="index.html">首頁</a></li><br /> <li id="navi_02"><a href="about.html">課程簡介</a></li><br /> <li id="navi_03"><a <img src="images/works_01.jpg" width="300" height="200" alt="DIV與CSS複習--以色塊為主的基本單欄網頁版 照片" /><br /> href="profile.html">範例介紹</a></li><br /> <li id="navi_04"><a href="works.html">作業分享</a></li><br /> <li id="navi_05"><a href="link.html">外部連結</a></li><br /> <!-- 導覽列到此為止 --><br /> </ul><br /> </div><br /> <br /> <!-- ●●●新增內容從此開始●●● --><br /> <br /> <div id="contents"><br /> <br /> <h2>範例介紹</h2><br /> <div class="detail_box clearfix"><br /> <p class="photo"><br /> <img src="images/works_01.jpg" width="300" height="200" alt="DIV與CSS複習 照片" /><br /> </p><br /> <br /> <h3><br /> <a href="http://mepopedia.com/forum/read.php?1650,41761" target="_blank">DIV與CSS複習--以色塊為主的基本單欄網頁版</a><br /> </h3><br /> <br /> <p class="text">利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁<br /> </p><br /> </div><br /> <br /> <div class="detail_box clearfix"><br /> <p class="photo"><br /> <img src="images/works_02.jpg" width="300" height="200" alt="網頁格線排版練習 照片" /><br /> </p><br /> <br /> <h3><br /> <a href="http://mepopedia.com/forum/read.php?1650,42884" target="_blank">網頁格線排版練習</a></h3><br /> <br /> <p class="text"><br /> 1.熟悉格線排版的目的與意義 <br><br /> 2.了解網頁實際內容與細節 <br><br /> 3.觀察優良網站的設計原則 <br><br /> 4.增強網頁排版的能力與技巧 <br><br /> </p><br /> </div><br /> <br /> <div class="detail_box clearfix"><br /> <p class="photo"><br /> <img src="images/works_03.jpg" width="300" height="200" alt=" HTML與CSS練習--首頁實作篇 照片" /><br /> </p><br /> <br /> <h3> <br /> <a href="http://mepopedia.com/forum/read.php?804,43670" target="_blank">HTML與CSS練習--首頁實作篇</a><br /> </h3><br /> <br /> <p class="text"><br /> CSS新增之語法<br /> <br /> <xmp>#wrapper-02 h2 {<br /> margin-bottom: 20px;<br /> padding: 15px 20px;<br /> color: #FFFFFF;<br /> font-size: 16px;<br /> font-weight: bold;<br /> line-height: 1em;<br /> background-color: #81786B;<br /> }<br /> <br /> <br /> .detail_box {<br /> clear:both;<br /> background-color:#F0F0F0;<br /> margin-bottom:20px;<br /> padding:20px;<br /> }<br /> <br /> .detail_box h3 {<br /> padding: 5px 0 10px 15px;<br /> background: url(images/icon_02.png) no-repeat;<br /> background-position: 0 10px;<br /> font-size: 14px;<br /> font-weight: bold;<br /> line-height: 1.6em;<br /> color: #8C7560;<br /> }<br /> <br /> .detail_box .photo {<br /> float:right;<br /> padding:0 0 0 20px;<br /> }<br /> <br /> .detail_box .text {<br /> line-height:1.6em;<br /> } 本範例將就一教學網站 說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構自行製作一新的網站











[hr]

CSS語法



CSS之邊框、邊距之屬性定義為：上右下左(順時針)
如padding: 5px 0 10px 15px;


CSS新增之語法

#wrapper-02 h2 {<br /> margin-bottom: 20px;<br /> padding: 15px 20px;<br /> color: #FFFFFF;<br /> font-size: 16px;<br /> font-weight: bold;<br /> line-height: 1em;<br /> background-color: #81786B;<br /> }<br /> <br /> <br /> .detail_box {<br /> clear:both;<br /> background-color:#F0F0F0;<br /> margin-bottom:20px;<br /> padding:20px;<br /> }<br /> <br /> .detail_box h3 {<br /> padding: 5px 0 10px 15px;<br /> b.detail_box .photo {<br /> float:right;<br /> padding:0 0 0 20px;<br /> }<br /> <br /> .detail_box .text {<br /> line-height:1.6em;<br /> }ackground: url(imag color: #000000;
}

.detail_box h3 a:hover {
color: #999999;
}

.detail_box .photo {
float:right;
padding:0 0 0 20px;
}

.detail_box .text {
line-height:1.6em;
}es/icon_02.png) no-repeat;
background-position: 0 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.6em;
color: #8C7560;
}

.detail_box h3 a {
color: #000000;
}

.detail_box h3 a:hover {
color: #999999;
}

.detail_box .photo {
float:right;
padding:0 0 0 20px;
}

.detail_box .text {
line-height:1.6em;
}