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!
<!DOCTYPE html>
<html>
<head>
<title>Blog示例</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="blog.css">
</head>
<body>
<!-- 左边栏开始 -->
<div class="left">
<!-- 头像开始 -->
<div class="header-img">
<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">
</div>
<!-- 头像结束 --> <div class="blog-name">朕的后宫</div>
<div class="blog-info">这条狗很懒什么都没有留下</div> <!-- 连接区开始 -->
<div class="blog-links">
<ul>
<li><a href="">百度</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">京东</a></li>
</ul>
</div>
<!-- 连接区结束 -->
<!-- 文章分类 开始 -->
<div class="blog-tags">
<ul>
<li><a href="">JS</a></li>
<li><a href="">CSS</a></li>
<li><a href="">HTML</a></li>
</ul>
</div>
<!-- 文章分类 结束 -->
</div>
<!-- 左边栏结束 --> <!-- 右边栏开始 -->
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-title">
<h1 class="article-time">海燕</h1>
<span class="article-data">2018-8-17 </span>
</div>
<div class="article-info">
在苍茫的大海上,狂风卷积着乌云,
</div>
<div class="article-tag">
# HTML
</div>
</div> <div class="article">
<div class="article-title">
<h1 class="article-time">海燕</h1>
<span class="article-data">2018-8-17 </span>
</div>
<div class="article-info">
在苍茫的大海上,狂风卷积着乌云,
</div>
<div class="article-tag">
# HTML
</div>
</div> <div class="article">
<div class="article-title">
<h1 class="article-time">海燕</h1>
<span class="article-data">2018-8-17 </span>
</div>
<div class="article-info">
在苍茫的大海上,狂风卷积着乌云,
</div>
<div class="article-tag">
# HTML
</div>
</div> <div class="article">
<div class="article-title">
<h1 class="article-time">海燕</h1>
<span class="article-data">2018-8-17 </span>
</div>
<div class="article-info">
在苍茫的大海上,狂风卷积着乌云,
</div>
<div class="article-tag">
# HTML
</div>
</div> <div class="article">
<div class="article-title">
<h1 class="article-time">海燕</h1>
<span class="article-data">2018-8-17 </span>
</div>
<div class="article-info">
在苍茫的大海上,狂风卷积着乌云,
</div>
<div class="article-tag">
# HTML
</div>
</div>
</div>
</div>
<!-- 右边栏结束 -->
</body>
</html>
/*Blog页面相关样式*/
/*公用样式*/
*{
font-family: ".PingFang SC","微软雅黑",
font-size:14px;
margin:;
padding:;
}
/*去掉a标签的下划线*/
a {
text-decoration: none;
}
/*左边栏样式*/
.left {
width: 20%;
background-color: rgb(76,77,76);
height: 100%;
position: fixed;
left:;
top:;
}
/*头像样式*/
.header-img {
height: 128px;
width:;
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;
}
