作业33
做博客首页
·
效果图
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<link rel="stylesheet" href="作业.css">
</head>
<body>
<!-- 左侧区域-->
<div class="blog_left">
<!-- 个人信息区域-->
<div>
<!-- 头像区域-->
<div class="avatar">
<img src="timg.jpg" alt="">
</div>
<!-- 昵称区域-->
<div class="nickname">
阿柴的博客
</div>
<!-- 个人简介区域-->
<div class="info">
阿柴很忙,什么都没留下
</div>
</div>
<!-- 个人链接区域-->
<div class="self_link">
<ul>
<li><a href="https://www.baidu.com">关于我</a></li>
<li><a href="https://www.baidu.com">微博</a></li>
<li><a href="https://www.baidu.com">微信公众号</a></li>
</ul>
</div>
<!-- 博客筛选区域-->
<div class="blog_filter">
<ul>
<li><a href="https://www.baidu.com">#Python</a></li>
<li><a href="https://www.baidu.com">#Java</a></li>
<li><a href="https://www.baidu.com">#Golang</a></li>
</ul>
</div>
</div>
<!-- 右侧区域-->
<div class="bolg_right">
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<!-- blog区域-->
<div class="article">
<!-- 标题日期区域-->
<div class="top">
<span class="title">论阿柴有多帅</span>
<span class="time">2020/5/14</span>
</div>
<!-- blog简介-->
<div>
<p class="blog_descript">人见人爱,花见花开</p>
</div>
<hr>
<!-- 关联区域-->
<div class="blog_filter">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
</div>
</body>
</html>
CSS
/*通用样式*/
body {
margin: 0;
background-color: #eeeeee;
}
a:hover{
color: white;
}
a {
text-decoration: none;
}
a:visited{color: darkgray}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧区域*/
.blog_left {
background-color: antiquewhite;
20%;
height: 100%;
float: left;
position: fixed;
}
/*头像区域*/
.avatar {
height: 200px;
200px;
border-radius: 50%;
border: white 5px solid;
overflow: hidden;
margin: 10px auto;
}
.avatar img{
height: 130%;
}
/*昵称区域*/
.nickname {
font-size: 36px;
text-align: center;
}
/*个人简介区域*/
.info {
margin-top: 10px;
font-size: 18px;
text-align: center;
padding: 5px;
}
/*个人链接区域*/
.self_link {
font-size: 24px;
text-align: center;
padding: 20px;
}
/*博客筛选区域*/
.blog_filter {
font-size: 20px;
text-align: center;
padding: 20px;
}
/*右侧区域*/
.bolg_right {
80%;
float: right;
}
/*blog区域*/
.article {
height: 200px;
margin: 15px 20px 5px 10px;
background-color: white;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
/*标题日期区域*/
.top {
height: 60px;
border-left: red 5px solid;
padding: 5px;
}
.title {
font-size: 40px;
float: left;
margin-left: 10px;
}
.time {
font-size: 20px;
margin: 8px 8px;
float: right;
}
/*blog简介区域*/
.blog_descript {
font-size: 25px;
text-indent: 40px;
margin-bottom: 10px;
}
hr {margin: 10px}
/*关联区域*/
.blog_filter {
text-indent: 1em;
font-size: 30px;
text-align: left;
padding: 0;
}
.blog_filter span {
margin: 10px;
}