http://www.openwebdesign.org/viewdesign.phtml?id=6386&referer=%2F
先看 <head> 中的東西：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZEN - A Free HTML5 Template With Perfect Balance</title>
<meta name="description" content="Zen is a free XHTML template released on a creative commons attribution license" />
<meta name="keywords" content="Zen Template" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css' />
</head>
<title>包起來的東西是browser上標題，有多分頁時，會顯示在分頁上
<meta name="keywords" content="Zen Template" />
網站的keyword，給搜尋引擎用的
沒有給網站描述時，搜尋引擎通常會自動抓網頁的前25字做為網頁內容摘要
則是對網站(頁)的說明
<meta>的說明可以看這邊：
http://www.pcnet.idv.tw/pcnet/html/17.htm
<link rel="stylesheet" type="text/css" href="style.css"/>
rel 屬性規定當前文檔與被鏈接文檔之間的關係。
表示rel指出style.css為「文檔的外部樣式表。」
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
指出"images/favicon.ico"為icon
<link href='http://fonts.googleapis.com/css?family=Voces' rel='stylesheet' type='text/css' />
則是使用google的提供的字型服務
==== 進入body區塊 ====
<div class="wrap">...</div>
說明可以參考這邊。
Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。
(另提一下，還有一個類似的東西叫作span功能是差不多的，在 </span> 之後並不會換行。)
而class="wrap"則引用了css中的
.wrap {
float:left;
position:relative;
right:-25%;
width: 945px;
}
其中「float:left;」可以讓文字、圖片浮動的置於「左邊」，若是寫「float:right;」
「position」比較複雜，先記著他是和定位相關的東西，基本上有static, relative, fixed
<div class="header">
定義上半部的高度，寬度
<div class="social">
則是那些twitter, fb, 的icon，因為是float:right，所以順序是由右往左排
<div id="menu">
因為是id，所以在css中是以#開頭
#menu {
float:left;
position:relative;
top:27px;
left:6px;
display:block;
width:608px;
}
<ul><li> 在menu中會把<li>包起來的項目列出來，可參考這邊，另外這邊有介紹如何用Dreamweaver做menu。
#menu ul {
list-style-type: none;
width: 608px;
}
這邊設定了每個項目前的記號為何，none (沒有)、disc (全黑圓圈)、circle (空心圓圈)、square (正方形)
#menu ul li {
display: block;
float: left;
width: 115px;
height: 32px;
}
又因為ul li這邊有設定為「float: left」，因此會變成連續排列，不換行的方框
#menu a, #menu a:visited {
display: block;
width:100px;
height:32px;
background:url(images/nav.png);
background-position:left top;
background-color:transparent;
text-align:center;
color:#ffffff;
line-height:32px;
text-decoration:none;
font-family:arial, sans-serif;
font-weight:bold;
margin-top:5px;
}
這邊設定平時呈現的樣式
#menu a:hover {
background-position: -100px 0px;
line-height:32px;
overflow:hidden;
color:#ffffff;
}
這邊設定當滑鼠經過時要呈現的樣式
若不想要有圖片為背景，可改為以下，仍有類似的效果，只是變成單一色塊而已
主要是加上的background-color
#menu a:hover {
background-position: -100px 0px;
line-height:32px;
overflow:hidden;
color:#ffffff;
background-color:#90d762;
}
#menu a, #menu a:visited {
display: block;
width:100px;
height:32px;
background-position:left top;
background-color:#6dbb14;
text-align:center;
color:#ffffff;
line-height:32px;
text-decoration:none;
font-family:arial, sans-serif;
font-weight:bold;
margin-top:5px;
}
在下半部內容的部份，以「<div class="page">」利用float配合「main」、「sidebar」，把畫面切為一左右二個部份
沒有留言:
張貼留言