【7.0】前端基础之CSS案例
在设计页面的时候先用div划分页面，再去填充数据，再去填充样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CnBlogs</title>
<link rel="stylesheet" href="01%20blog-css.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar-img">
<img src="头像猫.jpg" alt="">
</div>
<div class="blog-username">
Chimengmeng
</div>
<div class="blog-info">
天涯何处无芳草
</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微信</a></li>
<li><a href="">QQ</a></li>
</ul>
</div>
<div class="blog-bottom">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#GoLand</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">如何报道富婆</span>
<span class="datetime">2023-03-06</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="datetime">2023-03-06</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="datetime">2023-03-06</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="datetime">2023-03-06</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="datetime">2023-03-06</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="datetime">2023-03-06</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>
CSS
/* 这是对博客园首页的装饰代码 */
/*---------------------------------------------------*/
/* 通用样式 */
body {
margin: 0;
/* 去除上下距离 */
background-color: #4e4e4e;
/* 设置背景为浅色 */
}
a {
text-decoration: none; /* 去除a标签下的下划线 */
}
ul {
list-style-type: none;
/* 去除ul列表前的点 */
padding-left: 0;
/* 去除ul自带的边框距离 */
}
/*---------------------------------------------------*/
/* 左侧样式 */
/* 整个左半部分，大板块 */
.blog-left {
float: left;
/* 让整个标签一直浮动在左侧 */
width: 20%;
/* 占据总页面宽度的 20% */
height: 100%;
/* 占据总页面高度的 100% */
position: fixed;
/* 固定位置模式 */
background-color: darkslateblue;
/* 给一个背景色 */
}
/* 头像版块 */
.blog-avatar-img {
height: 100px;
/* 指定高度 */
width: 100px;
/* 制定宽度 */
border-radius: 50%;
/* 制定圆形 */
border: 3px solid white;
/* 制定边框格式 */
margin: 20px auto;
/* 上下距离 20px 左右 居中 */
overflow: hidden;
/* 将图片塞到圆圈里 */
}
/* 附上上面的条件，让图片占据圆内的 100% */
.blog-avatar-img img {
max-width: 100%;
/* 占据圆内的100% */
}
/* 调整标题的字体相关属性 */
.blog-username, .blog-info {
color: deeppink;
/* 设置字体颜色 */
font-size: 18px;
/* 设置字体大小 */
text-align: center;
/* 设置文字居中 */
}
/* 调整 blog-link/blog-bottom 相关链接的设置 */
.blog-link, .blog-bottom {
font-size: 20px;
}
/* 对blog-link下的a标签链接进行设置 */
.blog-link a, .blog-bottom a {
color: darkgray; /* 修改默认颜色 */
}
.blog-link a:hover, .blog-bottom a:hover {
color: white; /* 修改鼠标悬浮颜色 */
}
.blog-link ul, .blog-bottom ul {
text-align: center; /* 让ul列表下的文本居中 */
margin-top: 100px; /* 让文本中间距离加大 */
}
/*---------------------------------------------------*/
/* 右侧样式 */
.blog-right {
float: right;
/* 让整个版块内容浮动在右侧 */
width: 80%;
/* 占据宽度的80% */
height: 1000px;
/* 最大高度 1000px */
}
/* 修改文章字体的背景色 */
.article {
background-color: white;
/* 设置文本背景色为白色 */
margin: 10px 20px 10px 10px;
/* 这是文本框距离边框的距离 */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* 为文本框增加阴影 */
}
/* 设置文本框左侧的小边框设置 */
.article-title {
border-left: 5px solid red;
/* 设置小边框的颜色深度(只有左侧边框) */
text-indent: 16px;
/* 设置小边框距离文本的距离 */
}
/* 修改文本框内的文本设置 */
.title {
font-size: 24px;
/* 设置主题文字的大小 */
margin-top: 10px;
}
/* 修改文本框内的日期 */
.datetime {
float: right;
/* 浮动在右侧 */
margin: 10px 20px 10px 10px;
/* 设置日期距离边框的距离 */
font-weight: bold;
/* 设置字体加粗 */
}
/* 修改article-body 下的内容 */
.article-body {
font-size: 18px;
/* 设置文本内容字体大小 */
text-indent: 28px;
/* 设置文本缩进 */
/*border-bottom: 1px solid black;*/
/*!* 在内容底部 + 一条黑色的线 *!*/
/* 或者在文本底部 + hr */
}
/* 修改文章底部的内容 */
.article-bottom {
padding-left: 30px;
padding-bottom: 10px;
/* 调整文本距离边框的距离 */
}