學習自學校社團教程
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img src="images/logo.png" id="logo" />
<h2>讓博客從此簡單</h2>
<div id="toolbar">
<a href="#"><span></span>博客搬家</a>
<a href="#"><span></span>關於點點</a>
</div>
</div>
<!---->
<div id="content">
<div id="left">
<div class="article">
<img src="images/head.png" class="head_img"/>
<!--
解釋下id與class的區別：
一個頁面中，id是唯一的就比如好像是學號，而class是姓名，根據學號和姓名
都可以找到相應的學生，不過學號只能找到一個，相同姓名的學生可以有很多
類似，id不能重複，當一個元素id=“one”已經確定，其他元素的id就不能叫
one了，class就不一樣了，允許無限多的元素命名爲class=“one”
Css中給id添加樣式用#號，class用.；例如：
#one{font:12px;}
.one{font:12px;}
-->
<span></span>
<div class="message">
<img src="images/article.jpg" />
<p>夢想中我們的結局，大概就是這樣子的吧。<br />
只可惜就算大聲呼喊你的名字，你也消失了呢。</p>
</div>
</div>
<div class="article">
<img src="images/head2.png" class="head_img" />
<span></span>
<div class="message">
<img src="images/article2.jpg" />
<p>粉紅色的米庫醬！意外的還挺好看呢~~</p>
</div>
</div>
<br />
</div>
<div id="right">
<div class="main"><b>熱門標籤</b></div>
<ul id="label">
<li><img src="images/love.png" />動漫</li>
<li><img src="images/love.png" />娛樂</li>
<li><img src="images/love.png" />消費</li>
<li><img src="images/love.png" />購物</li>
<li><img src="images/love.png" />科技</li>
<li><img src="images/love.png" />新聞</li>
<li><img src="images/love.png" />輕博客</li>
</ul>
<div id="bye2012"><img src="images/2013.png" /></div>
</div>
</div>
<br />
<div id="footer">
版權所有 Copyright.All Rights Reserved <br />
技術支持：軟件學院 軟件工程專業 hf<br />
地址：XX省XX市XXXX大學 | 郵政編碼：xxxxxxx<br />
</div>
</body>
</html>CSS:
*{
margin:0;
padding:0;
}
/*這裏的*表示通配符，指網頁中的所有標籤，這裏把所有標籤的外邊距和內邊距都設置成0，因爲每個標籤都有自己的默認的外內邊距*/
body{
background:url(images/bg.jpg) repeat-x #DCDFE4;
}
#header{
height:75px;
background:#144465;
}
/*將header設置成75px，寬度不需要設置，這樣就可以兼容不同分辨率*/
#header #logo{
margin-top:15px;
margin-left:250px;
}
/*下面解釋了margin的屬性，margin-top是把margin屬性分開來寫的*/
#header h2{
color:#CCC;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
margin-top:-20px;
margin-left:330px;
}
#header #toolbar{
width:200px;
float:right;
margin-right:150px;
margin-top:-10px;
}
#header #toolbar a{
text-decoration:none;
color:#76B3A2;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#header #toolbar a:hover{
color:#fff;
}
#content{
width:1000px;
margin:0 auto;
}
/*解釋下margin:0 auto;的意思，margin是外邊距，有四個參數，分別是上，右，下，左，當只寫一個參數，例如;
margin:10px;表示上右下左都是10px;當有兩個參數，margin：10px 5px;表示上和下是10px;左和右是5px;
也就是對面是相同的，當有三個參數，margin:5px 10px 15px;上面是5px,右是10px;下是15px；缺省對邊
取相等，所以左也是10px;
這裏寫的是margin：0 auto;2個參數，上邊距和下邊據都是0，左右是auto，auto就是自適應邊距，也就是
左右平均分配，就起到了居中的效果了
*/
#content #left{
width:660px;
float:left;
}
#content #right{
width:330px;
float:left;
/*margin-right:-8px;
margin-top:22px;
border:1px green;*/
margin-left:5px;
}
.article{
width:538px;
background:#FFF;
margin-left:100px;
margin-top:20px;
position:relative;
border-radius:6px;
box-shadow:0 0 10px #999;
}
.article .head_img{
position:absolute;
left:-80px;
border-radius:4px;
box-shadow:0 0 10px #999;
}
.article .message{
margin-left:20px;
margin-right:10px;
}
.article .message p{
font-size:13px;
font-family:"微軟雅黑";
margin:10 px 0 20px;
padding:10px 10px 20px;
}
.article span{
border-left:15px solid transparent;/*transparent:*/
border-top:15px solid #fff;
position:absolute;
left:-15px;
top:24px;
}
.article .head_img{
position:absolute;
left:-80px;
border-radius:4px;
box-shadow:0 0 10px #999;
}
#right{
margin-top:20px;
}
#right .main{
width:250px;
height:40px;
background:#f7f8f8;
border-radius:5px;
line-height:40px;
text-align:center;
}
#right #label{
list-style-type:none;/*none,去掉list前面的小圓點*/
font:13px "微軟雅黑";
}
#right #label li{
width:230px;
height:38px;
background:#D4D7D9;
border-bottom:1px solid #ccc;/*list之間顯示出小劃線*/
border-right:1px solid #ccc;
border-left:1px solid #ccc;
box-shadow:2px 2px 4px #ccc;
line-height:38px;
cursor:pointer;
padding-left:18px;
}
#right #label li:hover{
background:red; /*當鼠標懸停在上面的時候會有顏色的改變*/
}
#right #label li img{
height:18px;
width:18px;
margin-right:10px;
position:relative;
top:5px;
}
#right #bye2012{
width:245px;
height:323px;
border-radius:5px;
display:block;
margin-left:4px;
margin-top:50px;
box-shadow:2px 2px 4px #999;
}
#footer{
width:1000px;
height:50px;
margin:15px auto;
margin-bottom:50px;
border-top:6px solid #9C9;
text-align:center;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
padding-top:5px;
clear:both;
}
一些知識：
id是元素的名稱，可以供js或其它腳本程序來訪問該元素對象，而class是該元素的css類名。
id的值在整個當前網頁中應該是唯一的，即某一個元素定義了id="aaa"，那麼這個網頁中其它的元素的id就不能定義成aaa，而class則可以。
據說W對於ID與CLASS的設定是ID具有唯一性，CLASS 具有普遍性。
大結構一定是用ID。比如標誌、導航、主體內容、版權。這些呢接我自己制定的規範命名爲#logo ,
#nav , #content , #copyright 這些是雷打不動的命名。
ID需要具有唯一性，並且儘量在外圍使用。而CLASS具有可重複性，並且儘量在結構內部使用。這樣
做的好處是有利於網站代碼的後期維護與修改，這樣的做法就會讓所有的CLASS都成爲ID的子級或是
孫級。你可以有兩個兒子但你能有兩個爸爸嗎，就是這個道理。
在我們寫 CSS的時候可以寫成這樣 #father .child {…} 儘量不要讓Class包含ID，.father #child
{…}如果寫成這樣顯得有點可笑 。當然這也不是鐵定的，特殊情況需要特殊對待嘛。
ID與CLASS使用原則，歸總起來一句話：ID是唯一的並是父級的，CLASS是可以重複的並是子級的。