1 / 16

CSS 串接式樣式表

CSS 串接式樣式表. 講 師：楊國棟. 大綱. 藝廊型網頁設計賞析（ 6/13 ） 部落格型網頁設計賞析（ 7/5 ）. blog 型. 樣版的組成. container. banner. center. right. 原始碼部分 -1. <body> <div id="container"> <div id="banner"> <h1><a href="/">Cascading Style Sheet BLOG</a></h1> <h2></h2> </div> <div id="center"> <div class="content">

evelyn
Download Presentation

CSS 串接式樣式表

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS 串接式樣式表 講 師：楊國棟 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  2. 大綱 • 藝廊型網頁設計賞析（6/13） • 部落格型網頁設計賞析（7/5） 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  3. blog型 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  4. 樣版的組成 container banner center right 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  5. 原始碼部分-1 <body> <div id="container"> <div id="banner"> <h1><a href="/">Cascading Style Sheet BLOG</a></h1> <h2></h2> </div> <div id="center"> <div class="content"> <h2>April 26, 2005</h2> <h3>河口湖賞櫻</h3> <p><img src="images/pic001.jpg" width="130" height="130" alt="" />河口湖是富士五湖之一，...</p> <p class="posted">Posted by Kinsei at <a href="">09:18 PM</a> | <a href="">Comments (2)</a> | <a href="">TrackBack (1)</a></p> ... </div> </div> 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  6. 原始碼部分-2 <div id="right"> <div class="sidebar"> <div id="calendar">/*日曆--略---*/</div> <h2>search</h2> <div class="link-note"> <form method="get" action=""> <input id="search" name="search" size="20" /> <input type="submit" value="Search" /> </form> </div> <h2>archives</h2> <ul> <li><a href="">April 2005</a> [ 17 Entry ]</li> ... <li><a href="">November 2004</a> [ 19 Entry ]</li> </ul> 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  7. 原始碼部分-3 <h2>recent entries</h2> <ul> <li><a href="">河口湖賞櫻</a></li> ... <li><a href="">鶴見綠地</a></li> </ul> <h2>recent comments</h2> <ul> <li><a href="">河口湖賞櫻</a><br /> 洋介<br /> 奈奈子<br /> </li> ... </ul> <div class="link-note"> <a href="">Syndicate this site (XML)</a> </div> </div> </div> <div style="clear: both;">&#160;</div> </div> </body> 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  8. head 的設定 <head> <meta http-equiv="Content-Type" content="text/html; charset=BIG5" /> <title>藝廊</title> <link rel="stylesheet" href="css/version4.css" type="text/css" /> //讀取外部的CSS【version4.css】 <link rel="stylesheet" href="css/import.css" type="text/css" media="screen,print" /> //讀取外部的CSS【version4.css】 </head> 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  9. Version4.css @charset "BIG5"; body { color: #000000; background: #ffffff; } a img { border: none; color: #ffffff; background: transparent; } • 為Netscape Navigator 4.x 與Internet Explorer 4.0設計的指定 • 頁面整體文字的顏色與背景 • 消除超連結圖片周圍的框線 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  10. Import.css @import “base.css”; /*讀取外部CSS【base.css】*/ @media tty { /*IE5.0 與 IE5.5 發生錯誤時，改讀取【ie5win.css】*/ i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  11. Base.css-banner #banner { position: absolute; top: 0; left: 0; } h1 { margin: 0; width: 190px; border-bottom: 3px solid #000000; text-indent: -9999px; background: url(../images/logo.gif) no-repeat; } h1 a { display: block; height: 97px; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  12. Container 765px Center 560px 100px right190px Base.css-頁面架構 body { margin: 0; padding: 0; font-size: small; color: #000000; background: #e3e3de; } #container { width: 765px; } #center { float: right; width: 560px; } #right { float: left; width: 190px; margin-top: 100px; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  13. 連結 a:link { color: #ff3d00; background: transparent; } a:visited { color: #ff3d00; background: transparent; } a:hover, a:active { color: #ff3d00; background: transparent; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  14. content .content { padding-top: 5px; } .content h2 { margin: 10px 0 0 0; padding: 0.2em 0.5em; font-size: medium; color: #ffffff; background: #ff3d00; } .content h3 { margin: 0; padding: 1em 20px; letter-spacing: 0.2em; font-size: small; color: #000000; background: #ffffff; } .content p { margin: 0; padding: 0.7em 20px; line-height: 1.5; color: #000000; background: #ffffff; } .content blockquote { margin: 0; padding: 0.7em 0; font-style: italic; color: #000000; background: #ffffff; } .content blockquote p { margin: 0 20px; padding: 0.7em 1.4em; color: #000000; background: #f3f3ef; } .content img { float: left; margin: 0 1em 0.5em 0; } .content .posted { clear: both; padding: 1.0em 20px 1.6em; font-size: x-small; } .content .posted+h3 { border-top: 1px dotted #d9d9d3; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  15. 月曆 #calendar { padding: 1em; color: #000000; background: #ffffff; } #calendar table { margin: 0 auto; } #calendar caption { text-align: left; font-size: small; } #calendar th, #calendar td { text-align: center; font-size: 12px; /* 防止在IE中sidebar顯示到下面去 */ font-weight: normal; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

  16. sidebar .sidebar { color: #000000; background: #f3f3ef; font-size: x-small; } .sidebar h2 { margin: 0; padding: 12px 0 0 12px; border-top: 1px solid #d9d9d3; text-transform: uppercase; font-size: small; font-weight: normal; } .sidebar ul { margin: 0; padding: 0 0 12px 12px; list-style: none; line-height: 1.6; } .sidebar a { text-decoration: none; } .sidebar form { margin: 0; padding: 0 0 12px 12px; } .sidebar input#search { width: 95px; } .link-note a { display: block; margin: 0; padding: 9px 12px; border-top: 1px solid #d9d9d3; } 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw

More Related