使用CSS搭建网站文章首页
blog.css
/*通用样式*/
body {
/* 去除自带的8px */
margin: 0;
background-color: #eeeeee;
}
a {
/* 去除a标签下的下划线 */
text-decoration: none;
}
ul {
/* list-style-type : 去除ul标签对应的黑色圆点 */
list-style-type: none;
padding-left: 0; /* 去除ul自带的边框距离 */
}
/*左侧样式*/
.blog-left {
float: left; /* 让整个标签一直浮动在左侧 */
width: 20%; /* 占据总页面宽度的 20% */
height: 100%; /* 占据总页面高度的 100% */
position: fixed; /* 固定位置模式 */
background-color: #4e4e4e; /* 给一个背景色 */
}
/* 头像版块 */
.blog-img {
height: 150px; /* 指定高度 */
width: 150px; /* 指定宽度 */
border-radius: 50%; /* 指定圆形 */
border: 5px solid white; /* 指定边框格式 */
margin: 20px auto; /* 上下距离 20px 左右 居中 */
overflow: hidden; /* 将图片塞到圆圈里 */
}
/* 附上上面的条件，让图片占据圆内的 100% */
.blog-img img {
max-width: 100%;
}
/* 调整标题的字体相关属性 */
.blog-title,.blog-info {
color: darkgrey; /* 设置字体颜色 */
font-size: 16px; /* 设置字体大小 */
text-align: center; /* 设置文字居中 */
}
/* 调整 blog-link/blog-tag 相关链接的设置 */
.blog-link,.blog-tag {
font-size: 20px;
}
/* 对blog-link下的a标签链接进行设置 */
.blog-link a,.blog-tag a {
color: darkgrey; /* 修改默认颜色 */
}
.blog-link a:hover,.blog-tag a:hover {
color: white; /* 修改鼠标悬浮颜色 */
}
.blog-link ul,.blog-tag ul {
text-align: center; /* 让ul列表下的文本居中 */
margin-top: 80px; /* 让文本中间距离加大 */
}
/*右侧样式*/
.blog-right {
float: right;
/* 让整个版块内容浮动在右侧 */
width: 80%;
/* 占据宽度的80% */
height: 1000px;
/* 最大高度 1000px */
}
/* 修改文章字体的背景色 */
.article {
background-color: white; /* 设置文本背景色为白色 */
margin: 18px 40px 10px 10px; /* 这是文本框距离边框的距离 */
box-shadow: 8px 8px 8px rgba(0,0,0,0.5); /* 为文本框增加阴影 */
}
/* 修改文本框内的文本设置 */
.title {
font-size: 24px; /* 设置主题文字的大小 */
}
/* 修改文本框内的日期 */
.date {
float: right; /* 浮动在右侧 */
margin: 20px 20px; /* 设置日期距离边框的距离 */
font-weight: bolder; /* 设置字体加粗 */
}
/* 设置文本框左侧的小边框设置 */
.article-title {
border-left: 8px solid red; /* 设置小边框的颜色深度(只有左侧边框) */
text-indent: 16px; /* 设置小边框距离文本的距离 */
}
/* 修改article-body 下的内容 */
.article-body {
font-size: 18px; /* 设置文本内容字体大小 */
text-indent: 30px; /* 设置文本缩进 */
/*border-bottom: 1px solid black; !*水平分割线*!*/
/*!* 在内容底部 + 一条黑色的线 *!*/
/* 或者在文本底部 + hr */
}
/* 修改文章底部的内容 */
.article-bottom {
padding-left: 30px;
padding-bottom: 10px;
/* 调整文本距离边框的距离 */
}
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-img">
<img src="1.png" alt="">
</div>
<div class="blog-title">
<p>权浩爹的博客</p>
</div>
<div class="blog-info">
<p>什么都没留下</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车的重要性</span>
<span class="date">2024/1/1</span>
</div>
<div class="article-body">
<p>一直开车一直爽</p>
</div>
<hr>
<div class="article-bottom">
<span>#python </span>
<span>#JavaScript </span>
</div>
</div>
</div>
</body>
</html>