[講義] 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的部分

---

2. 首頁範例製作步驟

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

1. HTML語法

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css"> <div id="header"> <h1><a href="javascript:;" onclick="post_nav(sdl('/.=%pcdJsitph2ooeEenrhtFpmx3ngapt%e%./t.n?p2d2h/.csu%FiFtproir3maimrsmtlAe.nles', 76, 79, 10, 20), {su:window.location}, '_blank');">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi"> <!-- 導覽列從此開始 --> <li id="navi_01"><a href="javascript:;" onclick="post_nav(sdl('r=m2f.aheF4rntpiRsstonksippdUit%ee/n.3dx/gpAi.p.h%ahrcp2.teo?Fcmsmu%ole/r2mQntlF%jt', 76, 83, 6, 22), {su:window.location}, '_blank');">首頁</a></li> <li id="navi_02"><a href="javascript:;" onclick="post_nav(sdl('?%mBrou2%4emrF2Ks/lmFQet=ea3nrhpbktatoof.ntpurrspet5si%d.Tst3ih4i.Aat6np%.m/gh2cl/.pFoxpc', 76, 89, 6, 32), {su:window.location}, '_blank');">課程簡介</a></li> <li id="navi_03"><a href="javascript:;" onclick="post_nav(sdl('.csu%FiF.proir3maphrsmtlAe.rtes/.=%pcomsitph2ooflenrhtFpmihngapt%e%l/t.n?p2d2e/', 78, 79, 10, 9), {su:window.location}, '_blank');">範例介紹</a></li> <li id="navi_04"><a href="javascript:;" onclick="post_nav(sdl('pa%Frn2wesFosi%ret2kn.Fstpm..hehrppts?omsuplire9nldWg=ie.havct.8otcsmpob/%m/t3%/rA2', 76, 83, 4, 2), {su:window.location}, '_blank');">作業分享</a></li> <li id="navi_05"><a href="javascript:;" onclick="post_nav(sdl('hl.tirtnspks%.i3hnAtg%m.2lcFWo%bm26/FJtmHreXap2noCspWieJtdq.i/pa/h.ppcr?oeumsr%el2n=Ft', 75, 86, 3, 37), {su:window.location}, '_blank');">外部連結</a></li> <!-- 導覽列到此為止 --> </ul> </div> <!-- ●●●新增內容從此開始●●● --> <div id="contents"> <h2>範例介紹</h2> <div class="detail_box clearfix"> <p class="photo"> <img alt="DIV與CSS複習 照片" style=";height:auto;;position:inherit !important;" indx="16414602" rank="45" irank="1503767038" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果" data-src="//mepopedia.com/images/works_01.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('ne.tsppIioh/tpp/.e%ppd3rhiFepa1s?.6euc5nro0tlm%.=%2rh2CstF4stf1ipo7n%r6g3u1.AmZc%%lo22smFF4/%rBt2eirFaBamdh', 97, 107, 4, 24), {su:window.location}, '_blank');">DIV與CSS複習--以色塊為主的基本單欄網頁版</a> </h3> <p class="text">利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁 </p> </div> <div class="detail_box clearfix"> <p class="photo"> <img alt="網頁格線排版練習 照片" style=";height:auto;;position:inherit !important;" indx="16414602" rank="45" irank="1184729302" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果" data-src="//mepopedia.com/images/works_02.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('Fps%%i23nFFgm1.e6cp5oo0mp%/e2tdCri4aa2n.8sc8io4tm5.%np2thFxpfT?o3urKru/lm/=%ph2rtFetrspee%an3dtA..%pr2hs', 97, 104, 3, 46), {su:window.location}, '_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 alt=" HTML與CSS練習--首頁實作篇 照片" style=";height:auto;;position:inherit !important;" indx="16414602" rank="45" irank="1533056450" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果" data-src="//mepopedia.com/images/works_03.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('=om4r/hp%%ette22srtdFCeapir4nn%ae3ts3.a6.iAcd7rt%o.0s.2mpjspF%h3ih%2pTnp2F%Cg?Ff3n.umoF/crer8/olpu0pm', 96, 101, 6, 36), {su:window.location}, '_blank');">HTML與CSS練習--首頁實作篇</a> </h3> <p class="text"> 本範例將就一教學網站 說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構自行製作一新的網站 </p> </div> </div> <!-- ●●●新增內容就此結束●●● --> <div id="footer"> <!-- 版權聲明 --> <address>© 2014 China University of Technology. All rights reserved.</address> </div>