大家好！我是方才，目前是8人后端研发团队的负责人，拥有6年后端经验&3年团队管理经验，截止目前面试过近200位候选人，主导过单表上10亿、累计上100亿数据量级的业务系统的架构和核心编码。
“学编程，一定要系统化” 是我一直坚持的学习之道。目前正在系统化分享从零到一的全栈编程入门以及项目实战教程。
无论你是编程新手，还是有经验的开发者，我都愿意与你分享我的学习方法、项目实战经验，甚至提供学习路线制定、简历优化、面试技巧等深度交流服务。
我创建了一个编程学习交流群（扫码关注后即可加入），秉持“一群人可以走得更远”的理念，期待与你一起 From Zero To Hero！
茫茫人海，遇见即是缘分！希望这篇文章对你有所帮助！
学习编程的过程，有两个点很重要，一个是记笔记，形成自己的知识体系；另一个就是勤动手，将“知道”转变为知识。
预期效果
所以今天是实操课，我们一起基于基础的HTML和CSS知识，完成一个博客首页的开发。整体内容结构如下：
最终实现的效果如下：
pc端
移动端
布局-盒模型分析
在实现一个网页之前，首先会进行布局设计，我们现在要做一个博客的首页，根据个人的喜好，做个预期的布局规划。比如说本次demo，分为5个盒模型，分别是导航栏、核心内容模块、文章内容模块、单个文章内容模块、右侧广告栏。
html页面内容实现
有了一个整体布局规划，接下来就开始网页内容实现。先把所有的模块的内容使用html语法，完成编写。
使用到了html的 标题标签、链接标签、段落标签、图像标签和div标签（每个div就对应布局中的一个模块）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="logo.jpg" />
<title>方才coding</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">教程</a>
<a href="#">关于</a>
</nav>
<div class="content">
<div class="items">
<div class="item">
<h3>1-编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
<div class="sidebar">
<h4>学习编程关注我</h4>
<img src="cover.jpg" alt="logo">
</div>
</div>
</body>效果预览：
样式实现
导航栏样式
参考最终的样式，导航栏的样式分为3个点：
背景颜色；
导航文字居中展示；
固定位置，永远在浏览器页面的最顶上；
<style>
nav{
background-color: cornflowerblue; /* 导航栏背景颜色设置为淡玉米花蓝 */
height: 40px; /* 导航栏高度设置为40像素 */
text-align: center; /* 导航栏内文本水平对齐方式设置为居中 */
align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */
position: fixed; /* 导航栏的位置属性设置为固定，以便在页面滚动时保持在原位置 */
top: 0; /* 导航栏距离页面顶部的距离为0像素 */
left: 0; /* 导航栏距离页面左边的距离为0像素 */
width: 100%; /* 导航栏的宽度设置为100%，以充满整个屏幕宽度 */
}
</style>效果预览
核心内容模块样式
这块的样式会复杂点，涉及盒模型的内容居中、嵌套盒模型的布局、位置固定等等。但也是有一定套路的，我最常用的就是通过临时添加不同的背景颜色去调试嵌套盒模型，这样我们可以很方便看到各种布局的效果，调试完成后，再恢复到预期的背景色即可。
根据之前的盒模型分析，核心内容一共有4个模块：核心内容模块、文章内容模块、单个文章内容模块、右侧广告栏。
盒模型背景渲染
我们先给这4个模块添加不同的背景色（核心内容模块-红色、文章内容模块-黄色、单个文章内容模块-浅蓝、右侧广告栏-绿色），看看样式：
.content{
background-color: red;
}
.items{
background-color: yellow ;
}
.item{
background-color: aqua;
}
.sidebar {
background-color: green;
}
布局调整
接下来就是进行盒模型的布局调试，让不同模块的布局，符合预期。这里会用到display: flex; （弹性布局）属性，详情可以参考代码注释：
.content {
/* 设置内容区域的背景颜色为红色 */
background-color: red;
/* 使用flex布局来排列内容区域内的项目 */
display: flex;
/* 设置内容区域的最大宽度为1290像素 */
max-width: 1290px;
/* 在上下各留出50像素的空白，并在左右居中 */
margin: 50px auto;
}
.items {
/* 设置项目区域的背景颜色为黄色 */
background-color: yellow;
}
.item {
/* 设置单个项目（item）的背景颜色为浅蓝色 */
background-color: aqua;
}
.sidebar {
/* 设置侧边栏的背景颜色为绿色 */
background-color: green;
/* 设置侧边栏的宽度为250像素 */
width: 250px;
/* 设置侧边栏的高度为320像素 */
height: 320px;
}
.sidebar img{
/* 调整侧边栏内图片的宽度为80% */
width: 80%;
/* 调整侧边栏内图片的高度为70% */
height: 70%;
}
可以看到，核心的布局，在整体上已经符合预期了，接下来就是完善样式。
完善样式
参考预期的效果，关于核心内容目前还缺少的样式如下：
右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上；
右侧广告栏的内容居中展示；
各种边框阴影效果等；
.content {
/* 设置内容区域的背景颜色为红色 */
background-color: red;
/* 使用flex布局来排列内容区域内的项目 */
display: flex;
/* 设置内容区域的最大宽度为1290像素 */
max-width: 1290px;
/* 在上下各留出50像素的空白，并在左右居中 */
margin: 50px auto;
}
.items {
/* 设置项目区域的背景颜色为黄色 */
background-color: yellow; /* 背景颜色 */
width: 100%; /* 宽度为100% */
border-radius: 10px; /* 圆角边框，半径为10像素 */
}
.item {
/* 设置单个项目（item）的背景颜色为浅蓝色 */
background-color: aqua; /* 背景颜色 */
border-bottom: #8b949e 1px solid; /* 底部边框，颜色为灰色，宽度为1像素，实线 */
padding-left: 10px; /* 左侧内边距为10像素 */
cursor: pointer; /* 鼠标悬停时显示手形光标 */
}
.item:hover {
/* 鼠标悬停在单个项目上的效果 */
color: darkgoldenrod; /* 字体颜色变为暗金色 */
}
.sidebar {
/* 设置侧边栏的背景颜色为绿色 */
background-color: green; /* 背景颜色 */
/* 设置侧边栏的宽度为240像素 */
width: 240px; /* 宽度 */
/* 设置侧边栏的高度为280像素 */
height: 280px; /* 高度 */
position: sticky; /* 粘性定位，跟随滚动 */
top: 50px; /* 距离窗口顶部50像素 */
margin-left: 10px; /* 左外边距为10像素 */
text-align: center; /* 文本居中对齐 */
border-radius: 10px; /* 圆角边框，半径为10像素 */
}
.sidebar h4 {
/* 侧边栏内标题的样式 */
margin: 10px; /* 外边距为10像素 */
}
.sidebar img {
/* 调整侧边栏内图片的样式 */
width: 80%; /* 图片宽度为80% */
height: 80%; /* 图片高度为80% */
}
最终效果
最后删除调试时，增加的div 背景色，为文章内容模块和广告栏增加边框阴影，完成最终样式：
.items {
width: 100%; /* 宽度为100% */
border-radius: 10px; /* 圆角边框，半径为10像素 */
box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */
}
.sidebar {
/* 设置侧边栏的宽度为240像素 */
width: 240px; /* 宽度 */
/* 设置侧边栏的高度为280像素 */
height: 280px; /* 高度 */
position: sticky; /* 粘性定位，跟随滚动 */
top: 50px; /* 距离窗口顶部50像素 */
margin-left: 10px; /* 左外边距为10像素 */
text-align: center; /* 文本居中对齐 */
border-radius: 10px; /* 圆角边框，半径为10像素 */
box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */
}
响应式布局
考虑在手机端，屏幕宽度有限，就只展示文章列表：
@media screen and (max-width: 768px) {
.sidebar {
display: none; /* 在屏幕宽度小于768像素时隐藏侧边栏 */
}
}
完整的代码
最终的代码还包括导航栏的字体显示格式调整，链接标签之间的间距调整等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="logo.jpg"/>
<title>方才coding</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">教程</a>
<a href="#">关于</a>
</nav>
<div class="content">
<div class="items">
<div class="item">
<h3>1-编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>编程入门学习，请关注我</h3>
<p>xx编程入门学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>前端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="item">
<h3>后端学习，请关注我</h3>
<p>xxx前端学习xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
<div class="sidebar">
<h4>学习编程关注我</h4>
<img src="cover.jpg" alt="logo">
</div>
</div>
</body>
<style>
nav {
background-color: cornflowerblue; /* 导航栏背景颜色设置为淡玉米花蓝 */
height: 40px; /* 导航栏高度设置为40像素 */
text-align: center; /* 导航栏内文本水平对齐方式设置为居中 */
align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */
position: fixed; /* 导航栏的位置属性设置为固定，以便在页面滚动时保持在原位置 */
top: 0; /* 导航栏距离页面顶部的距离为0像素 */
left: 0; /* 导航栏距离页面左边的距离为0像素 */
width: 100%; /* 导航栏的宽度设置为100%，以充满整个屏幕宽度 */
}
nav a {
color: black; /* 导航栏内链接的颜色设置为黑色. */
text-decoration: none; /* 导航栏内链接的下划线设置为无 */
margin-left: 20px; /* 导航栏内链接的左侧内边距设置为20像素 */
}
nav a:hover {
color: darkgoldenrod;
}
.content {
/* 使用flex布局来排列内容区域内的项目 */
display: flex;
/* 设置内容区域的最大宽度为1290像素 */
max-width: 1290px;
/* 在上下各留出50像素的空白，并在左右居中 */
margin: 50px auto;
}
.items {
width: 100%; /* 宽度为100% */
border-radius: 10px; /* 圆角边框，半径为10像素 */
box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */
}
.item {
border-bottom: #8b949e 1px solid; /* 底部边框，颜色为灰色，宽度为1像素，实线 */
padding-left: 10px; /* 左侧内边距为10像素 */
cursor: pointer; /* 鼠标悬停时显示手形光标 */
}
.item:hover {
/* 鼠标悬停在单个项目上的效果 */
color: darkgoldenrod; /* 字体颜色变为暗金色 */
}
.sidebar {
/* 设置侧边栏的宽度为240像素 */
width: 240px; /* 宽度 */
/* 设置侧边栏的高度为280像素 */
height: 280px; /* 高度 */
position: sticky; /* 粘性定位，跟随滚动 */
top: 50px; /* 距离窗口顶部50像素 */
margin-left: 10px; /* 左外边距为10像素 */
text-align: center; /* 文本居中对齐 */
border-radius: 10px; /* 圆角边框，半径为10像素 */
box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */
}
.sidebar h4 {
/* 侧边栏内标题的样式 */
margin: 10px; /* 外边距为10像素 */
}
.sidebar img {
/* 调整侧边栏内图片的样式 */
width: 80%; /* 图片宽度为80% */
height: 80%; /* 图片高度为80% */
}
@media screen and (max-width: 768px) {
.sidebar {
display: none; /* 在屏幕宽度小于768像素时隐藏侧边栏 */
}
}
</style>近期更新计划
近期更新计划（有需要的小伙伴，记得点赞关注哟！）
零基础前端入门系列，预计10月底更新完成；
博客系统功能完善，实现注册登录、评论系统等功能，预计11月开源；
“学编程，一定要系统化”——若你也是系统学习的践行者，记得点赞关注，期待与你一起 From Zero To Hero！
扫一扫
4585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
