實例
仿博客頁面
HTML代碼css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿博客界面</title> <link rel="stylesheet" href="test.css"> </head> <body> <!--左邊界面--> <div class="left-interface"> <!--頭像--> <div class="header-img"> <img src="12.jpg" alt=""> </div> <!--博客名稱--> <div class="blog-name">若惜together</div> <!--博客信息--> <div class="blog-info">good good study, day day up.</div> <!--博客連接--> <div class="blog-href"> <ul> <!--無序列表--> <li><a href="">關於我</a></li> <li><a href="">微博</a></li> <li><a href="">公衆號</a></li> </ul> </div> <!--技能展現--> <div class="blog-skill"> <ul> <li>JavaScript</li> <li>Python</li> <li>Golang</li> </ul> </div> </div> <!--右邊界面--> <div class="right-interface"> <!--創建一個div標籤，包含全部的內容--> <div class="article-list"> <!--單個的內容--> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> <div class="article"> <!--內容標題，包含標題和時間兩個信息--> <div class="article-title"> <!--標題--> <h1 class="article-name">既然活着，不別抱怨</h1> <!--時間--> <span class="article-date">2019-04-15</span> </div> <!--內容的一些信息--> <div class="article-info"> 一我的活着，何任什麼時候，是不能無所事事，更不可枸人憂天，怨聲載道，必需要有他該作的事情，惟有那樣他的內心纔會有所寄託，他纔會真正的得到快樂。 </div> <!--內容的屬性，歸類--> <div class="article-tag"> #HTML #CSS </div> </div> </div> </div> </body> </html>
CSS代碼html
/*公用樣式*/ * { /* 通配符選擇器，能和任何元素匹配*/ font-family: ".PingFang SC", "Microsoft Yahei", serif ; font-size: 14px; margin: 0; /*用於控制元素與元素之間的距離*/ padding: 0; /*用於控制內容與邊框之間的距離*/ } /*去掉a標籤的下劃線*/ a { text-decoration: none; } /*左邊欄 樣式*/ .left-interface { width: 20%; /*寬度佔20%*/ background-color: #767776; height: 100%; /*高度佔100%*/ position: fixed; /*固定左邊欄*/ left: 0; top: 0; } /*頭像樣式*/ .header-img { height: 128px; width: 128px; /*設置邊框爲5像素，實線，白色的線條*/ border: 5px solid white; /*將border-radius設置爲長或高的一半便可獲得一個圓形*/ border-radius: 50%; /*將溢出來的多餘圖片隱藏掉*/ overflow: hidden; /*並將其下移20像素按順序top,right,bottom,left，這裏只用了一個元素，默認後三項爲0， 將圖片居中*/ margin: 20px auto 0; } /*兒子選擇器，header-img下面的img標籤*/ .header-img>img { /*設置他們的最大寬度和最大高度，爲header-img的寬度和高度*/ max-width: 100%; max-height: 100%; } /*博客名稱*/ .blog-name { color: white; font-size: 24px; /*設置加粗字體，設置字體的粗細*/ font-weight: bold; /*對齊元素中的文本，left，right，center(居中)，justify(兩端對齊)*/ text-align: center; margin-top: 15px; } /*博客介紹*/ .blog-info { color: white; text-align: center; /*邊框虛線*/ border: 2px dashed white; margin: 20px 15px; } /*博客連接和技能*/ .blog-href, .blog-skill { /*分組*/ text-align: center; border: 2px solid white; margin: 20px 20px; } /*去除li標籤前面的那個點*/ .blog-href li, .blog-skill li{ list-style-type: none; } .blog-href a { color: #eee; } /*後代選擇器*/ /*僞元素選擇器，在li標籤以前添加內容*/ .blog-skill li:before { content: "#"; } /*右邊欄 樣式*/ .right-interface { width: 80%; background-color: #dddddd; /*最好讓他自適應， 別固定死了*/ height: 100%; float: right; /*讓有邊欄向右漂，由於左邊欄已經固定了，因此不用漂了*/ } /*內容*/ .article { background-color: white; margin-top: 20px; margin-left: 20px; margin-right: 5%; } /*內容標題*/ .article-name { /*使元素同時具備行內元素和塊級元素的特色*/ display: inline-block; padding: 15px; border-left: 3px solid red; } /*文章發佈時間*/ .article-date { float: right; /*將日期的位置和標題的位置水平對齊*/ margin-top: 15px; margin-right: 10px; } /*內容信息*/ .article-info { background-color: white; /*top, right, bottom, left*/ padding: 10px 10px 5px 20px; } /*內容的屬性，歸類*/ .article-tag { margin: 10px; padding: 10px; border-top: 1px solid #dddddd; }