前端综合项目-个人博客网页设计
1. 预计效果
从零设计一个页面太难了，我们可以通过预预计的效果去写代码实现！
- 总不能没头没脑的边写边设计吧，总得有个参考
- 前端知识不做赘述了，大家可以去看看我之前写的前端博客
这只是我的设计，css更多定制内容，您可以灵活变通！
我的博客系统分为四个页面：
- 博客列表页
- 博客详情页
- 博客登录页
- 博客编辑页
博客列表页
博客详情页
博客登录页
博客编辑页
- 依次建立四个html文件：
- 我用的是外部样式的css写法
- 为每个html建立各自的css文件去定制特别的内容
- 四个页面显然是有重复的样式的，建立一个公共的css文件~
2. 公共样式设计
2.1 背景设计
- 在common.css文件中
- 去除浏览器默认样式，省去一些意料之外的麻烦
\* {
box-sizing: border-box;
/\* 个别的标签有特殊要求
只需要层叠这个效果就行了 \*/
padding: 0;
margin: 0;
}
- 对html设置高度，否则其设置背景大小的时候没有参考
100%的含义是，与占父类元素的比例
html {
height: 100%;
}
- 设置body背景即可，这样所有的html元素都叠在其上了
body {
background-image: url(海.jpg);
background-repeat: no-repeat;
background-position: center center;
/\*尽可能填满body,在不改变比例的情况下是contain，这个是一定会填满\*/
background-size: cover;
/\*body得设置高度才能正确显示，这是规定，没有为什么\*/
/\* 我也不知道为什么刚才就显示的出来，可能是原本不对背景进行大小要求，位置要求
默认以图片原大小为准 -
要求背景大小和位置则需要body的高度作为参考，才能得到正确判断！！！ \*/
height: 100%;
/\* 100%当前元素跟父元素一样高 \*/
}
效果：
- css文件记得要link进来！
2.2 导航栏设计
- 本文章的主思想就是先一个大的div套住，作为一个板心，再向版心里面写div等一块一块的元素
- 这样设计的话，可以让各个模块尽量的不干扰
- 让一个模块里面的元素“内斗”
- 内层元素的全世界，就是其父元素
- 依照参考图，分为头像+文字+主页+写博客+退出
- 主页：跳转到博客列表页
- 写博客：跳转到博客编辑页
- 退出：跳转到博客登录页
在博客列表页.html中：
<div class="navigation">
<!-- 头像 -->
<img src="病人.png" alt="病人" />
<div class="title">我的博客系统</div>
<div class="space"></div>
<a href="博客列表页.html">主页</a>
<a href="博客编辑页.html">写博客</a>
<a href="博客登录页.html">退出登录状态</a>
</div>
效果：
- css内未对此进行修饰
现在，在common.css文件中去修饰它：
- 栏： 高度50px，字粗默认300，设置字体，字体颜色白，背景颜色透明深灰，弹性布局，子元素相当于这个栏垂直居中
- 图片： 40px*40px的，左外边距30px，有外边距10px
- 超链接： 透明白粗体，去除下划线，左右内边距10px
- 内边距是为了增加顾客体验，增加点击范围
- space： 导航链接应该偏右侧才对
- space是一个标签，空的，占位置而已，这里设置宽度占70%的栏宽
.navigation {
height: 50px;
font-weight: 300;
font-family: "Courier New", Courier, monospace;
color: white;
background-color: rgba(50, 50, 50, 0.618);
display: flex;
align-items: center;
}
.navigation img {
width: 40px;
height: 40px;
margin-left: 30px;
margin-right: 10px;
border-radius: 20px;
}
.navigation a {
color: rgba(255, 255, 255, 0.7);
font-weight: 900;
font-family: "微软雅黑";
text-decoration: none;
padding: 0px 10px;
/\* 按偏了也能选中，扩大点击范围， 更加号的体验\*/
}
.navigation .space {
width: 70%;
}
效果：
2.3 博客列表页和博客详情页的共同内容
画出设计稿：
在博客列表页.html中：
<!-- 页面主体 -->
<div class="container">
<div class="container-left">
<div class="card">
</div>
</div>
<div class="container-right">
<div class="article">
</div>
</div>
</div>
2.3.1 页面划分css设计
- 宽度设计为固定宽
- 注意：由于导航栏的存在，这里container不应该height设置为100%，而是要设置为calc(100% - 50px)
- calc是css的一种语法（类似函数的用），可以计算（100% - 50px）的减法操作
- 注意“-”左右有空格，这是为了与元素命名区分
- （css是脊柱命名法：XXX-XXX）
.container {
/\* 固定宽度 \*/
width: 1000px;
margin: 0 auto;
height: calc(100% - 50px);
/\*开启弹性布局，水平排列为等距排列，左右不留空\*/
display: flex;
justify-content: space-between;
}
/\* 增加可读性 \*/
.container .container-left {
height: 100%;
width: 20%;
}
/\* 设置为79%留出一条缝 \*/
.container .container-right {
height: 100%;
width: 79%;
}
2.3.2 左侧card内容
- 头像，名称，码云链接，文章信息
<div class="card">
<img src="病人.png" alt="病人" />
<h3>s:103</h3>
<a target="\_blank" href="https://gitee.com/carefree-state"
>我的码云链接</a
>
<div class="counter">
<span class="h">文章</span>
<span class="h">分类</span>
</div>
<div class="counter">
<span>3</span>
<span>1</span>
</div>
</div>
common.css中对其进行修饰：
- 后代选择器，每个.【class名】之间要有空格分割
- 一些基本操作，在之前的博客已讲，就不做介绍了
补充：card的大小固定，如果设置为页面的百分百，太不合理了
.card {
margin-top: 10px;
height: 333px;
width: 100%;
background-color: rgba(255, 255, 255, 0.618);
border-radius: 30px;
}
.card img {
margin: 20px 40px;
/\* 上下20 左右40 \*/
width: 120px;
height: 120px;
border-radius: 60px;
}
.card h3 {
text-align: center;
}
.card a {
display: block;
text-decoration: none;
color: rgba(251, 114, 153, 0.5);
font-weight: 900;
font-family: "微软雅黑";
text-align: center;
padding: 5px;
margin-bottom: 20px;
}
.card .counter {
display: flex;
padding: 5px;
justify-content: space-around;
}
.card .counter .h {
font-weight: 900;
}
效果：
2.3.3 右侧article内容
他们的共同部分：板心~
- 而这一部分有个重点：无论是列表还是详情，这里的内部信息可能很多，导致溢出页面
overflow: auto这一操作，一旦出现溢出，自动将滚动条交给这个板心，而不是交给浏览器~
.article {
margin-top: 10px;
height: calc(100% - 10px);
width: 100%;
background-color: rgba(255, 255, 255, 0.618);
border-radius: 10px;
padding: 20px;
overflow: auto;
/\* 内容溢出，滚动条放入这里 \*/
}
效果：
3. 博客列表页
就差右侧板心了：
博客列表页.html中：
-
每篇博客又是一个子元素blog，一个blog有标题日期内容，以及跳转链接（跳转到博客详情页.html）
-
别被吓着了，content标签内的是我随便写的，打Lorem自动生成
- 大于号不能被正常打印出来，得用转义字符
>
- 大于号不能被正常打印出来，得用转义字符
<div class="container-right">
<div class="article">
<div class="blog">
<div class="title">我的第一篇博客</div>
<div class="date">2023-05-17 23:00:00</div>
<!-- 用lorem生产随机字符串 -->
<div class="content">
从今天起我要认真敲代码，写博客。 Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Pariatur veniam ad repellat maxime
quia, eum vitae. Nobis dolores officiis fugiat est possimus animi
hic quos minima similique vero! Dolorem, natus.
</div>
<a href="博客详情页.html"> 查看全文 >></a>
</div>
<div class="blog">
<div class="title">我的第二篇博客</div>
<div class="date">2023-05-17 23:00:00</div>
<!-- 用lorem生产随机字符串 -->
<div class="content">
从今天起我一定不会再尿床。 Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
vitae. Nobis dolores officiis fugiat est possimus animi hic quos
minima similique vero! Dolorem, natus.
</div>
<a href="博客详情页.html"> 查看全文 >></a>
</div>
<div class="blog">
<div class="title">我的第三篇博客</div>
<div class="date">2023-05-17 23:00:00</div>
<!-- 用lorem生产随机字符串 -->
<div class="content">
从今天开始我要自己上厕所。 Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
vitae. Nobis dolores officiis fugiat est possimus animi hic quos
minima similique vero! Dolorem, natus.
</div>
<a href="博客详情页.html"> 查看全文 >></a>
</div>
</div>
</div>
列表页专门的css文件，list.css中：
- 别忘了link，
<link rel="stylesheet" href="list.css">
.blog {
padding: 10px;
}
.blog .title {
font-weight: 900;
font-size: 18px;
text-align: center;
}
.blog .date {
text-align: center;
color: rgb(12, 54, 114);
font-weight: 450;
padding: 20px;
}
.blog .content {
text-indent: 2em;
color: rgba(0,0,0,0.618);
/\* 自动匹配的单位em！ em就是一个汉字的大小 \*/
}
.blog a {
display: block;
color: black;
text-decoration: none;
text-align: center;
width: 120px;
height: 40px;
font-weight: 900;
border: black 2px solid;
line-height: 40px;
/\*当行高对于height的时候，恰好文本水平居中\*/
margin: 20px auto;
transition: all 0.618s;
/\* 对所有的变化都缓慢持续2s
1. 悬停于按钮
2. 离开按钮 \*/
}
/\* 伪类选择器 ，选中的是元素的状态，
hover就是获取鼠标悬停的状态\*/
.blog a:hover {
/\*选中后的改变的属性\*/
background-color: rgb(147,210,253);
color: rgb(76, 66, 136);
}
效果：
4. 博客详情页
就差右板心了：
博客详情页.html中：
- 标题日期内容
<div class="container-right">
<div class="article">
<h3>我的第一篇博客</h3>
<div class="date">2023-05-17 23:00:00</div>
<div class="content">
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!
</p>
<p>
从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Repellendus perferendis ea
voluptatem quae architecto. Nam aut animi, est ut, tempore
doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Repellendus perferendis ea voluptatem quae
architecto. Nam aut animi, est ut, tempore doloremque in ipsam
numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
tempore doloremque in ipsam numquam voluptate placeat non eveniet
distinctio. Aliquid!
</p>
</div>
</div>
</div>
在详情页专门的css文件，details.css中：
.article h3 {
font-size: 22px;
text-align: center;
font-weight: 900;
padding: 10px 0;
}
.article .date {
text-align: center;
color: rgb(12, 54, 114);
font-weight: 450;
padding: 20px;
}
.article .content p {
text-indent: 2em;
margin-bottom: 10px;
}
/\* 如果内容太多，浏览器会出现滚动条，从而背景给滚没了 \*/
/\* 把滚动条放入左侧板心即可\*/
效果：
总结
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
