实例学习之仿点点博客
生活随笔
收集整理的這篇文章主要介紹了
实例学习之仿点点博客
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習自學校社團教程
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是可以重復的并是子級的。
總結
以上是生活随笔為你收集整理的实例学习之仿点点博客的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql事务应该多复杂_可能是全网最好
- 下一篇: 设计模式-一些输出方式demo