範例說明
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語法
進階網頁設計課程
範例介紹
利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。 利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁
1.熟悉格線排版的目的與意義
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧
CSS新增之語法
#wrapper-02 h2 {
margin-bottom: 20px;
padding: 15px 20px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
line-height: 1em;
background-color: #81786B;
}
.detail_box {
clear:both;
background-color:#F0F0F0;
margin-bottom:20px;
padding:20px;
}
.detail_box h3 {
padding: 5px 0 10px 15px;
background: url(images/icon_02.png) no-repeat;
background-position: 0 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.6em;
color: #8C7560;
}
.detail_box .photo {
float:right;
padding:0 0 0 20px;
}
.detail_box .text {
line-height:1.6em;
} 本範例將就一教學網站 說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改),可保留HTML架構自行製作一新的網站