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; 128; border: 5px solid white; border-radius: 50%; /*变成圆的*/ overflow: hidden; /*溢出隐藏*/ margin: 0 auto; margin-top: 20px; } .header-img>img{ max- 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; }
