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

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('r.rpFpa2xgsscapl%%o.F./esonh=32pcih/nimsphAFeontptn/i?t%mdmdmr.gttut2ei%eler.', 76, 77, 13, 22), {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('h%p%m./p3o2lrt?ApF/sru%ei/sar2dnpinlFidrns=%aeegih2.xs.ttFc.ec.tmohnoppemttm', 76, 76, 7, 30), {su:window.location}, '_blank');">首頁</a></li> <li id="navi_02"><a href="javascript:;" onclick="post_nav(sdl('.%alrp2bjshFoIspmuqi?etbnup.FgrohC.lpttc=em1ohdl/mtiS//tamptp.brr%cxea3oysnAmUes%%vni22qttFFK.', 76, 94, 5, 28), {su:window.location}, '_blank');">課程簡介</a></li> <li id="navi_03"><a href="javascript:;" onclick="post_nav(sdl('tpvroYapCnezsdRiirtak..8pcGho/pm/?%pu2rrFelps=rehontftti.plr%es3.sAhi%tn2mgFl.%ac27oFbmmY/eF', 78, 92, 3, 21), {su:window.location}, '_blank');">範例介紹</a></li> <li id="navi_04"><a href="javascript:;" onclick="post_nav(sdl('.2xrFls%1s2CiF1nmGgeb.pYco3opDmew/ditiLraLa.wnc4sowimLt%7.2epF5hwbpoZ?rSukTrsll./=h/htptmrtlepts%we3enAPt%3', 76, 107, 3, 9), {su:window.location}, '_blank');">作業分享</a></li> <li id="navi_05"><a href="javascript:;" onclick="post_nav(sdl('/o=pt/mhemp/tdlrttinerpaesa%.1en3cFnsAo9ti%mJ.t2%ur.F2qsp%FHsh2lwipFiVn?mnFgueku.rp.icloh', 75, 89, 5, 0), {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="16414643" rank="42" irank="1503767038" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" 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('pm=om5r/hp%0ette2%srtdF2eapirCnn%ae4ts3.a1.iAcd7rt%o.6s.2mp1spF%hZih%2p1np2F%rg?Ff3Z.umoF/crer1/olpu6', 97, 101, 6, 2), {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="16414643" rank="42" irank="1184729302" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" 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('/sru%efd0/sar2do.%pinlFirp2rns=%auhCegih2.mp4s.ttFc%%2ec.tmo238noppemFF8tmh%p%r14./p3o2e6Qrt?ApFa5', 97, 98, 9, 0), {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="16414643" rank="42" irank="1533056450" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" 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('/pi8pha0rp.4e?c%suo2ermCnl%4t=23.hF6rtf7sto0sprBi%utn3mggA%Q.%2vc2FroFrWm%eH/2aTtFdFrm.zaepEnphhsopeip%Hte3/.dF', 96, 111, 4, 1), {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>