(2012-10-17) 數位內容導論第12講 - 李百麗的數位歷程檔

(2012-10-17) 數位內容導論第12講

2012-10-17 19:58:29, 回應(0), 人氣(965)

---超連結顏色變化---
<style type="text/css">
A:link{color:blue}
A:visited{color:gray}
A:active{color:green}
A:hover{color:red}
</style>

．範例碼
<html>
<head>
<style type="text/css">
A:link {color: blue}
A:visited {color: gray}
A:active {color: green}
A:hover {color: red}
</style>
</head>
<body>
<a href="http://www.yahoo.com/">
Yahoo!
</a>
<br/>
<a href="http://www.nkfust.edu.tw/" target="_blank">
第一科大
</a>
<br/>
<a href="http://www.mit.edu/">MIT</a>
</body>
</html>

---<div>與<span>---
．現在的網頁設計大都使用<div>與<span>進行畫面分割。
．將網頁的版面視為是長方形區塊的組合。
．<span>是水平方向的區塊。
．<div>是垂直方向的區塊。
div=division

---div與span的範例---
．<div>與<span>也可以使用css
<style type="text/css">
#menu {
width: 100px; font-size:15px;
}
.dd {
border: 1px dotted #0000FF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-bottom: 3px;
}
</style>

．範例碼
<html>
<head>
<style type="text/css">
#menu {
border: 2px dotted #FF0000; width: 100px; font-size: 25px;
}
.dd {
border: 1px dotted #0000FF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-bottom: 3px;
}
</style>
</head>
<body>
<span class="dd">Horizontal_one</span>
<span class="dd">Horizontal_two</span>
<span class="dd">Horizontal_three</span>

<div id="menu">
<div class="dd">HTML</div>
<div class="dd">CSS</div>
<div class="dd">JavaScript</div>
</div>

---DIV+CSS做網頁布局是主流---
．http://www.java3z.com/cwbwebhome/article/article9/ht26.html
．http://css.1keydata.com/tw/float.php
→CSS的教學網站，很詳盡。

．http://www.jx828.com/mb/divcssjiaocheng/13864.html
．http://ant4css.blogspot.tw/2009/02/cssdiv.html
有DIV+CSS網頁布局的說明。

---divCSS.htm的範例解說---
<div id='header2'>標題</div>
<div id='outer2'>
<div id='sidebar2'>邊欄</div>
<div id='content2'>主文</div>
</div>
<div id='footer2'>頁底</div>
</body>
</html>

．範例碼
<html><head>
<style type='text/css'>
#header2 {width:90%;
height:30px;
text-align:center;
background:#833;
margin:0 auto;
}
#outer2 {width:90%;
margin:0px auto;
background:white;
}
#sidebar2 {width:25%;
float:left;
height:200px;
background:#383;
}
#content2 {width:75%;
float:left;
height:200px;
background:#338;
}
#footer2 {width:90%;
clear:left;
height:30px;
background:#833;
margin:0 auto;
}
</style>
</head>
<body>
<div id='header2'>標題</div>
<div id='outer2'>
<div id='sidebar2'>邊欄</div>
<div id='content2'>主文</div>
</div>
<div id='footer2'>頁底</div>
</body></html>

---float:left與clear:left的CSS屬性說明---
．float:left向左邊自由浮動
→http://css.1keydata.com/tw/float.php

．clear:left取消向左邊自由浮動
→http://css.1keydata.com/tw/clear.php

---divCSS.htm的再觀察---
．background:#338;也是顏色的設定，但是僅使用3個數字分別表示R,G,B。