[講義] 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('iFint%nt.2d.pFerhmxspe.s?phiuotnrpmglel.=dmchi5otaymt.//pc/t%opr3mraA%en%2ss2Fe', 76, 79, 4, 26), {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('scp%oFueoh3pi4nmpAenAt/?%ddg.tu2ietrrrFaxysal%../sn=2ch/ishFotpnitmmmrgtte%le..pp2P', 76, 83, 7, 5), {su:window.location}, '_blank');">首頁</a></li> <li id="navi_02"><a href="javascript:;" onclick="post_nav(sdl('h%p%m./p3o2lrt?ApF/sru%ea/sar2dbpinlFiorns=%auegih2.ts.ttFc.ec.tmohnoppemttm', 76, 76, 7, 30), {su:window.location}, '_blank');">課程簡介</a></li> <li id="navi_03"><a href="javascript:;" onclick="post_nav(sdl('tFF6..%pSrp2rXshFosspmfNi?eiPnuplagroe2.lp.pc=ehSohdt/mtim//talptp.Trr%ckea3ocsnAmves%%Yni22Rt', 78, 94, 5, 27), {su:window.location}, '_blank');">範例介紹</a></li> <li id="navi_04"><a href="javascript:;" onclick="post_nav(sdl('=i1.haxct.qotcBmpoK/%m/t3%/rA2pa%Frn2wesFosi%ret2kn.Fstpm..hehrppts?omsuplireqnldng', 76, 83, 4, 36), {su:window.location}, '_blank');">作業分享</a></li> <li id="navi_05"><a href="javascript:;" onclick="post_nav(sdl('s/pt%dFlrstht2il7eirppFaiXsna?%m.nuegnu3eckKn.srApo.Vtcil%omh/.ot=2p%t/rm.hFe2mp', 75, 80, 9, 11), {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('rtdF2eapirCnn%ae4ts3.a1.iAcd7rt%o.6s.2mp1spF%hBih%2pqnp2F%9g?Ff31.umoF/crer1/olpu6pm=om5r/hp%0ette2%s', 97, 101, 6, 22), {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('20.F%rm2seCsp4io2np8ge8.d4cinoazm.s/cCtozrmYa%rn2nsFvifWtol.ryputhmap%h?2iuF7rrEleZ=aHhdCt.ptp/ph/%pp3%rA3e%Fs21eF6n%5t', 97, 119, 3, 48), {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('A%j.%2bc2FUoFrkm%ek/2aptFdIrm.Qaep7nphJsop4ip%Ute3/.dF/pi8pha0rp.4e?c%suo2ermCnl%4t=23.hF6rtf7sto0sprvi%uIn3m9g', 96, 111, 4, 43), {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>