本文已参与「新人创作礼」活动，一起开启掘金创作之路。
先让我们看看这个博客长什么样子
首先我们要先打开编辑网页的软件。
然后创建一个html，然后我们找一张图片当做是log，然后要着重于这个导航栏了。
我们可以用div包一下。
<div class="navigation"></div>
然后我们发现导航栏上面有log的图片，还有博客系统，还有最右边的主页、写博客、注销
那我们先把图片放上去。
<img src="./img/log.jpg" alt="">
表示博客系统这四个字可以用span文本来表示，为了更好的渲染样式可以先给一个类
<span class="head">博客系统</span>
最右边的三个我们可以用超链接表示，这样一点就可以跳转到其他的页面了。
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
导航栏
然后我们对已有的一些元素渲染一些样式，所以我们创建一个css文件夹，来专门存放css样式
我们先创建一个common.css来表示一些通用的样式，在弄样式之前先要连接
<link rel="stylesheet" href="./css/common.css"> /*链接CSS*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.navigation{
width: 100%;
height: 50px;
background-color:rgba(52 , 52 ,52 , 0.4); /*设置透明度,数字越小透明度越高*/
color:wheat;
/* 导航栏里面的内容都是一行排列的，那么就要用到flex来布局 */
display: flex;
align-items: center;/*实现子元素垂直居中效果*/
}
/* 设置图片的样式 */
.navigation img{
width: 40px;
height: 40px;
border-radius: 50%; /*让图片变圆*/
margin-left: 21px;
margin-right: 10px;
}
/* 可以让主页,写博客,注销移动到页面的右侧,就是让他们和博客系统这几个字之间有很大的一个空格。 */
/* 这个操作是不能做到响应式布局 */
.navigation .space{
width: 75%;
}
.navigation a{
color:wheat;
text-decoration: none; /*把下划线取消掉了*/
padding: 0 10px; /*让三个词语之间有点空隙*/
}
/* 给整个页面加背景图 */
/* 让html,body和浏览器窗口一样高 */
html, body{
height: 100%;
}
body{
background-image: url(../img/bg.jpg); /*添加图片*/
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
这个就是上述代码弄好之后的样子了。
这上面就是导航栏的样式代码了。
右侧文章内容
<div class="blog">
<!-- 博客标题 -->
<div class="title">
这是我的第一篇博客
</div>
<!-- 博客发布时间 -->
<div class="time">
2022-09-28
</div>
<!-- 博客摘要 -->
<div class="desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Delectus deserunt quibusdam fugit, vitae cum recusandae totam quidem,
pariatur in iusto eius tempore vel, aperiam illum magni sint eaque expedita veniam.
</div>
<!-- 进入博客的按钮 -->
<a href="#">查看全文 >></a>
</div>
上面的就是一篇博客的大概显示，就是显示在列表里面的样子，按一下链接之后可以跳转到详情页面。
那后面就是样式的一些内容因为博客列表在其他页面不会展示，所以我们专门弄一个css文件夹就可以了，记得要link一下
/* 专门写和博客列表相关的样式 */
.blog{
width: 100%;
padding: 20px;
}
/* 修改文件的标题 */
.blog .title{
text-align: center;
font-size: 22px;
font-weight: bold;
padding: 10px 0;
}
/* 修改文章的时间 */
.blog .time{
text-align: center;
color: rgb(26, 143, 245);
padding: 10px 0px; /* 这两个像素分别表示，上下和左右*/
}
/* 修改文章的摘要 */
.blog .desc{
text-indent: 2em; /*首句空出两个字*/
}
/* 修改文章的跳转链接 */
.blog a{
/* 设置成块元素可以更好处理 */
display: block;
width: 140px;
height: 40px;
margin: 0 auto;
border:2px blue solid;
color: blue;
line-height: 37px;
text-align: center; /*让文字居中*/
text-decoration: none;
margin-top: 20px;
/* 让光标过来之后的变化变慢，过度一下 */
transition: all 1s;
}
/* 可以让鼠标放过来之后发生动态效果 */
.blog a:hover{
background: #666; /*背景变成这个颜色*/
color: #fff; /*颜色变成这个颜色*/
}
之后我们要做一下页面左侧的人物介绍页面。
<!-- 制作页面上显示的内容,就是个人信息还有博客显示的地方 -->
<div class="left">
<!-- 这个是之后个人信息显示的地方 -->
<div class="introduce">
<img src="./img/head.jpg" alt="">
<!-- 名字 -->
<h3>橘黄小鹿</h3>
<a href="https://gitee.com/jack-chao123">github地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>
/* 关于个人信息还有博客显示的样式 */
.con{
width: 1000px;
height: calc(100% - 50px); /*这个是为了空出上方导航栏的高度，这个函数是CSS3里面提供的函数*/
/* 水平居中 */
margin:0 auto;
/* 因为div是独占一行的,所以左右布局需要使用弹性布局 */
display: flex;
/* 让左右两个元素中间能出现一条缝 */
justify-content: space-between;
}
/* 左侧的样式 */
.con .left{
height: 100%;
width: 195px;
}
/* 右侧的样式 */
.con .right{
height: 100%;
width: 795px;
background-color:rgba(255 , 255 ,255 , 0.3); /*设置透明度,数字越小透明度越高*/
border-radius: 2%; /*让图片有圆角*/
}
/* 任务信息部分的样式 */
.introduce{
background-color:rgba(255 , 255 ,255 , 0.3); /*设置透明度,数字越小透明度越高*/
border-radius: 5%; /*让图片有圆角*/
padding: 25px;
}
/* 人物头像的样式 */
.introduce img{
width: 140px;
height: 140px;
border-radius: 50%; /*让图片有圆角*/
}
/* 名字的样式 */
.introduce h3{
text-align: center; /*影响的是居中*/
padding: 10px; /*让它上下左右有边距*/
}
/* github链接的样式 */
.introduce a{
display: block; /*转为块级元素*/
color:black;
text-decoration: none; /*把下划线取消掉了*/
text-align: center; /*影响的是居中*/
padding: 10px;
}
/* 文本样式 */
.introduce .counter{
display: flex;
justify-content: space-around;
}
以上的内容都是在
<div class="con"></div>
这个标签里面写的。
