8.17 一個博客demo
阿新 • • 發佈：2018-08-17
ali enter radi 文章 oat 就是 eight pos char
2018-8-17 18:13:27
明天周末準備整理一下看看我的博客!!!
說一下思路
1.先搭建框架
1.1 大體分成兩塊div 左右兩部分
<div class="left"></div>
<div class="right"></div>
2.填寫大概文字
2.1 左邊寫好文字 各種連接
左邊有 頭像 連接 博客連接
寫好對應的標簽
右邊就有文章 先寫好一個div 剩下的都是復制
文章<標題,時間內容>
3.css開始逐漸的調整顏色布局
3.1整體寫完以後就開始逐步處理一下內容排版了
3.2 頭像
找一個頭像
/*頭像樣式*/ .header-img { height: 128px; width: 128; border: 5px solid white; border-radius: 50%; /*變成圓的*/ overflow: hidden; /*溢出隱藏*/ margin: 0 auto; margin-top: 20px; } .header-img>img{ max-width: 100% }
其他的就是用了一些 float border(邊框) margin padding 其實和android布局貌似都是照葫蘆畫瓢!下面放上代碼
css 代碼多看看多練一下就好了
增強自信心!! 越努力越幸運!
2018-8-17 18:20:26
要有大概的框架 div嵌套一個div 前端還是不多難學的!!加油!
今天還是七夕 2333333!
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Blog示例</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="blog.css"> 7 </head> 8 <body> 9 <!-- 左邊欄開始 --> 10 <div class="left"> 11 <!-- 頭像開始 --> 12 <div class="header-img"> 13 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534508175890&di=ffc300d6b2bb54bd8b0a2e44faf773da&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F14%2F20150814105909_NPmSw.png"> 14 </div> 15 <!-- 頭像結束 --> 16 17 <div class="blog-name">朕的後宮</div> 18 <div class="blog-info">這條狗很懶什麽都沒有留下</div> 19 20 <!-- 連接區開始 --> 21 <div class="blog-links"> 22 <ul> 23 <li><a href="">百度</a></li> 24 <li><a href="">淘寶</a></li> 25 <li><a href="">京東</a></li> 26 </ul> 27 </div> 28 <!-- 連接區結束 --> 29 <!-- 文章分類 開始 --> 30 <div class="blog-tags"> 31 <ul> 32 <li><a href="">JS</a></li> 33 <li><a href="">CSS</a></li> 34 <li><a href="">HTML</a></li> 35 </ul> 36 </div> 37 <!-- 文章分類 結束 --> 38 </div> 39 <!-- 左邊欄結束 --> 40 41 <!-- 右邊欄開始 --> 42 <div class="right"> 43 <div class="article-list"> 44 <div class="article"> 45 <div class="article-title"> 46 <h1 class="article-time">海燕</h1> 47 <span class="article-data">2018-8-17 </span> 48 </div> 49 <div class="article-info"> 50 在蒼茫的大海上,狂風卷積著烏雲, 51 </div> 52 <div class="article-tag"> 53 # HTML 54 </div> 55 </div> 56 57 <div class="article"> 58 <div class="article-title"> 59 <h1 class="article-time">海燕</h1> 60 <span class="article-data">2018-8-17 </span> 61 </div> 62 <div class="article-info"> 63 在蒼茫的大海上,狂風卷積著烏雲, 64 </div> 65 <div class="article-tag"> 66 # HTML 67 </div> 68 </div> 69 70 <div class="article"> 71 <div class="article-title"> 72 <h1 class="article-time">海燕</h1> 73 <span class="article-data">2018-8-17 </span> 74 </div> 75 <div class="article-info"> 76 在蒼茫的大海上,狂風卷積著烏雲, 77 </div> 78 <div class="article-tag"> 79 # HTML 80 </div> 81 </div> 82 83 <div class="article"> 84 <div class="article-title"> 85 <h1 class="article-time">海燕</h1> 86 <span class="article-data">2018-8-17 </span> 87 </div> 88 <div class="article-info"> 89 在蒼茫的大海上,狂風卷積著烏雲, 90 </div> 91 <div class="article-tag"> 92 # HTML 93 </div> 94 </div> 95 96 <div class="article"> 97 <div class="article-title"> 98 <h1 class="article-time">海燕</h1> 99 <span class="article-data">2018-8-17 </span> 100 </div> 101 <div class="article-info"> 102 在蒼茫的大海上,狂風卷積著烏雲, 103 </div> 104 <div class="article-tag"> 105 # HTML 106 </div> 107 </div> 108 </div> 109 </div> 110 <!-- 右邊欄結束 --> 111 </body> 112 </html>
/*Blog頁面相關樣式*/ /*公用樣式*/ *{ font-family: ".PingFang SC","微軟雅黑", font-size:14px; margin:0; padding: 0; } /*去掉a標簽的下劃線*/ a { text-decoration: none; } /*左邊欄樣式*/ .left { width: 20%; background-color: rgb(76,77,76); height: 100%; position: fixed; left: 0; top: 0; } /*頭像樣式*/ .header-img { height: 128px; width: 128; border: 5px solid white; border-radius: 50%; /*變成圓的*/ overflow: hidden; /*溢出隱藏*/ margin: 0 auto; margin-top: 20px; } .header-img>img{ max-width: 100% } /*Blog 名稱*/ .blog-name{ color: white; font-size: 24px; font-weight: bold; text-align: center; margin-top:20px; } /*blog 介紹*/ .blog-info{ color: white; text-align: center; border: 2px solid white; margin: 5px 15px; } /*連接組*/ .blog-links, .blog-tags{ text-align: center; margin-top: 20px; } .blog-links a, .blog-tags a{ color: #eee; } .blog-tags a:before { content: "#"; } /*右邊欄樣式*/ .right{ width: 80%; background-color: rgb(238,237,237); height: 1000px; float: right; } .article-list { margin-right: 10%; margin-left: 30px; margin-right: 10%; } .article{ background-color: white; margin-bottom: 15px; } .article-name{ display: inline-block; } .article-title{ padding: 15px; border-left: 3px solid red; } .article-info{ padding: 15px; } .article-tag{ padding: 15px 0; margin: 15px; border-top: 1px solid #eeeeee; } /*文章發布時間*/ .article-data{ float:right; }
8.17 一個博客demo