点击刷新
一、思路
html
1、新建html 文件，用注释标注代码块
2、先用 div 划定区域——左栏 右栏，再细划分左右栏的小的div
3、使用html 占位，再调节样式
为标签添加 id / class 属性
CSS
1、新建CSS文件，使用注释标注区域
2、先写body的样式
3、按照html的划分，逐一添加样式（选择器的使用，从基础选择器到复杂选择器）
4、调试运行，修改样式
二、效果展示及div划分说明
三、html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吴晋丞的博客</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--左侧主要内容栏-->
<div id="d1">
<!--头像div-->
<div id="d3">
<img class="blog_head" src="123.png" alt="头像">
</div>
<!--博客名及简介div-->
<div>
<div class="blog_name">
<p>??时间定义青春??</p>
</div>
<div class="blog_img">
<p>这是一个奋斗者的辛酸人生故事??</p>
</div>
</div>
<!--链接区div-->
<div class="blog_link">
<ul>
<li>
<a class="conn" href="">??   关于我</a>
</li>
<li>
<a class="conn" href="https://wujincheng.blog.csdn.net/" title="欢迎光临CSDN博客!">?? CSDN博客</a>
</li>
<li>
<a class="conn" href="http://106.54.72.122:8080/" title="欢迎进入网站部署专区!">?? Jenkins+Git持续部署平台入口</a>
</li>
<li>
<a class="conn" href="http://www.wujincheng.xyz:8081" title="欢迎进入报警专区!">?? zabbix分布式监控报警平台入口</a><br>
</li>
<li>
<a class="conn" href="http://www.wujincheng.xyz:8080" title="欢迎进入日志专区!">?? ELK分布式日志集中管理平台入口</a>
</li>
</ul>
</div>
<!--人生格言区div-->
<div class="blog_tag">
<ul>
<li>
<p class="tag">?? 沉迷于自动化的快乐,代码如诗般的美丽,带给我心灵上的慰藉</p>
</li>
<li>
<p class="tag">?? 你想要交什么样的朋友,那么首先你要成为那样的人</p>
</li>
<li>
<p class="tag">?? 每一个不曾起舞的日子，都是对生命的辜负</p>
</li>
<li>
<p class="tag">?? 把所有有意义的事情变成有意思，所有有意思的事情变得有意义,这就是生活的艺术</p>
</li>
</ul>
</div>
</div>
<!--右侧主要内容栏-->
<div id="d2">
<!--第一篇文章的div，第一篇文章的样式做好，后面复制即可-->
<div class="article">
<!--文章标题div-->
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">旧的童年</a>
</span>
<span class="date">2020-6-22</span>
</div>
<!--文章体的div-->
<div class="article_body">
<p>
曾经热闹一时的果园小屋，如今成为了野草挡风的屏障...
</p>
</div>
<hr> <!--下划线分割-->
<!--作者版权所有div-->
<div class="article_author">
<p><center>[wp_ad_camp_3]</center></p><p>
[大诚的解忧杂货铺·原创 @作者 铲屎官]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A">星空</a>
</span>
<span class="date">2020-6-21</span>
</div>
<div class="article_body">
<p>
星空之下，仰望繁星的我们，仍是孤独的...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大诚的解忧杂货铺·原创 @作者 锦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">春天里的人间烟火</a>
</span>
<span class="date">2020-6-20</span>
</div>
<div class="article_body">
<p>
这是春暖花开的人间烟火...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大诚的解忧杂货铺·原创 @作者 锦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">立春一日</a>
</span>
<span class="date">2020-6-19</span>
</div>
<div class="article_body">
<p>
旧物焕新芽，百花待争艳...
</p>
</div>
<hr>
<div class="article_author">
<p>
[大诚的解忧杂货铺·原创 @作者 锦蝶生]
</p>
</div>
</div>
<div class="article">
<div class="article_head">
<span>
<a href="http://www.xaixs.org/xs/17/17628/39701.html">遥远的救世主</a>
</span>
<span class="date">2020-6-18</span>
</div>
<div class="article_body">
<p>
这是一部可以傲然独尊的长篇小说,也是一部可遇不可求的完美佳作...
</p>
</div>
<hr>
<div class="article_author">
<p>
[星空小说网·原创 @作者 豆豆]
</p>
</div>
</div>
</div>
</body>
</html>
四、css源码
body {
margin: 0;
}
/* 左侧样式 */
#d1 { /* 左侧大div的布局 */
background: olivedrab;
height: 690px;
width: 25%;
float: left;
}
#d3 { /* 头像div的样式 */
height: 100px;
width: 100px;
margin: 20px auto;
border-radius: 50%;
border: 3px solid white;
overflow: hidden; /* 溢出的隐藏 */
}
#d3>.blog_head {
width: 100%; /* 将头像整个宽都显示出来，注意头像需要裁剪成正方形*/
}
.blog_name { /* 博客名时间定义青春的样式 */
font-family: "Xingkai SC";
font-weight: bolder;
font-size: 20px;
text-align: center;
}
.blog_img { /* 博客信息简介样式 */
font-family: "Songti SC";
font-size: 10px;
text-align: center;
}
.conn { /* 链接区div样式 */
font-family: "Songti TC";
font-size: 15px;
text-align: center;
text-decoration: none;
}
li { /* 去掉无序列表的黑点及向左移动 */
margin-left: -16px;
list-style-type: none;
}
.blog_link { /* 将链接区和上面的博客简介div拉开距离 */
margin-top: 80px;
}
.blog_tag { /* 博客左侧最下面的人生格言区div和链接区div的距离拉开 */
margin-top: 80px;
}
.blog_tag li { /* 去掉无序列表的黑点及向左移动 */
margin-left: -25px;
margin-right: 10px;
list-style-type: none;
}
.tag { /* 指定人生格言区的字体样式及布局*/
font-family: "Songti TC";
font-size: 5px;
text-align: left;
color: wheat;
}
/* 右侧样式 */
#d2 {
height: 690px;
width: 75%;
float: left;
}
.article { /* 右侧区一个文章为一个div，对所有文章的div的布局和样式进行设计*/
background-color:gainsboro;
margin: 20px 40px 10px 10px;
/* 边框阴影 */
box-shadow: 5px 5px 5px cadetblue;
}
.article a { /* 文章链接的字体样式布局设计 */
text-decoration: none;
font-size: larger;
left: 40px;
color: skyblue;
}
.article a:link { /* 文章链接的显示颜色 */
color: skyblue;
}
.article a:hover { /* 鼠标悬浮在文章链接上的颜色*/
color: red;
}
.date { /* 文章div中的时间的布局及样式设计 */
font-weight: bolder;
font-size: smaller;
margin: 15px 3px;
float: right;
}
.article_head { /* 文章标题区为一个div，设计其样式与首行缩进*/
border-left: 8px solid olivedrab;
text-indent: 18px;
}
.article_body { /* 文章体的缩进，及字体样式*/
text-indent: 18px;
font-family: "Songti TC";
}
.article_author { /* 文章作者的字体样式与缩进*/
text-indent: 18px;
font-family: "Songti TC";
font-size: smaller;
}
© 著作权归作者所有
举报
发表评论
0/200
