當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

实例学习之仿点点博客

發布時間：2023/12/16 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了实例学习之仿点点博客小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習自學校社團教程

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"/><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