@ 2020.5.14
如何快速搭建一個博客園風格的界面？只需兩個檔案，很多行代碼就可搞定噢
下面帶你一起來山寨DIY吧
1、思路
html
1、新建html 檔案，用注釋標注代碼塊
2、先用 div 劃定區域——左欄 右欄
3、使用html 占位，再調節樣式
為標簽添加 id / class 屬性
CSS
1、新建CSS檔案，使用注釋標注區域
2、先寫萬金油
3、按照html 的劃分，逐一添加樣式（選擇器的使用，從基礎選擇器到復雜選擇器）
4、除錯運行，修改樣式
2、實作效果
3、具體代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>welcomeTo大誠小鋪</title> <link rel="stylesheet" href="博客園樣式.css"></head><body> <!-- 先用div劃分布局 --> <!-- 左側欄 --> <div class="blog-left"> <!-- 頭像 --> <div class="blog-image"> <img src="鳶尾花.jpg" alt="鳶尾花呀鳶尾花"> </div> <div class="blog-title"> <p>??大橙貓??</p> </div> <div class="blog-info"> <p>人見人愛，花見花開</p> </div> <div class="blog-link"> <ul> <li><a href="https://mp.weixin.qq.com/s/5-VfKF9jlrMIN2NvTOxO7A" title="歡迎光臨小鋪">大誠小鋪</a></li> <li><a href="https://www.cnblogs.com/bigorangecc/" title="一枚假理工女寫的博客">博客·園</a></li> <li><a href="https://member.bilibili.com/v2?timestamp=1584441340153#/upload-manager/audios" title="別聽我瞎逼逼">B站在此</a></li> </ul> </div> <div class="blog-tag"> <ul> <li>愛沾花惹草的文藝女漢子</li> <li>琴棋書畫都不精通</li> <li>想搞開發的假理工女</li> <li>頭發茂密數學不好</li> </ul> </div> </div> <!-- 右側主要內容欄 --> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw"> 舊的童年</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>曾經熱鬧一時的果園小屋，如今成為了野草擋風的屏障，</p> </div> <hr> <div class="article-bottom"> <p>[大誠的解憂雜貨鋪·原創 @作者 鏟屎官]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A"> 星空</a></span> <span class="date">2020-2-26</span> </div> <div class="article-body"> <p>星空之下，仰望繁星的我們，仍是孤獨的</p> </div> <hr> <div class="article-bottom"> <p>[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2oxSm-3WDwFVXEaKeZSx6Q"> 春天里的人間煙火</a></span> <span class="date">2020-2-15</span> </div> <hr> <div class="article-body"> <p>這是春暖花開的人間煙火</p> </div> <div class="article-bottom"> <p>[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/ndJqAcrtprDzDNYeCLs6zQ"> 立春一日</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>舊物煥新芽，百花待爭艷</p> </div> <hr> <div class="article-bottom"> <p>[大誠的解憂雜貨鋪·原創 @作者 錦蝶生]</p> </div> </div> </div></body></html>HTML
/* 這是博客園山寨版的CSS *//* 通用樣式 */body { margin: 0; background-color: whitesmoke;}a { text-decoration: none;}ul { list-style-type: none; padding-left: 0;}/* 左側樣式 */.blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color:cadetblue;}.blog-image { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; /* 控制頭像圈的位置 */ margin: 20px auto; /* 溢位屬性--防止影像過大，蓋住側欄 */ overflow: hidden; }.blog-image img { /* 完全填充 */ max-width: 100%;}.blog-title,.blog-info { color:whitesmoke; font-size: 14px; text-align: center;}.blog-link,.blog-tag { font-size: 14px;}.blog-link a,.blog-tag a { color: wheat;}.blog-link a:hover,.blog-tag a:hover { color:pink;}.blog-link ul,.blog-tag ul { text-align: center; margin-top: 50px;}/* 右側樣式 */.blog-right { float: right; width: 80%; height: 1000px;}.article { background-color:gainsboro; margin: 20px 40px 10px 10px; /* 邊框陰影 */ box-shadow: 5px 5px 5px cadetblue; }.title { font-size: 25px; }.title a:link { color:forestgreen; }.title a:hover { color:pink;}.title a:active { color:olivedrab;}.title a:visited { color:black;}.date { /* 讓其放置在右邊 */ float: right; margin: 20px 20px; font-weight: bolder;}/* 設定標題欄 的頭飾 */.article-title { border-left:8px solid forestgreen; /* 設定標題縮進 */ text-indent: 18px;}.article-body { font-size: 18px; text-indent: 30px;}.article-bottom { padding-left: 30px; padding-bottom: 10px;}CSS
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39117.html
標籤：Html/Css
下一篇：1.CSS3簡介