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

Advanced

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

1. 範例說明


http://mepopedia.com/~jinjin/web/hw04a/works.html

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

修改部分

1.最外層的ID改為wrapper-02
2.contents的部分



HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果(2015/4/2)
https://youtu.be/z5Se-TOsN84




4/1上課影片

前置作業---2A(從頭)
http://youtu.be/C4ygykRd45U





前置作業---2C(延續以及從頭的做法)
http://youtu.be/FmcyhSYAo_Y





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






2. 首頁範例製作步驟


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

1. HTML語法


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


2. CSS語法



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


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 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; }


Edited 7 time(s). Last edit at 04/02/2015 11:52AM by JinJin.
(編輯記錄)