8.17 一个博客demo

2018-8-17 18:13:27

明天周末准备整理一下看看我的博客!!!

说一下思路

1.先搭建框架

　　1.1 大体分成两块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;
}