目录
基础的网页设计
html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天网页</title>
<link rel="stylesheet" href="样式.css">
</head>
<body>
<!--这里是设计导航栏以及导航栏里面的内容-->
<div class="left">
<div class="toxiang">
<img src="测试头像2.jpg" alt="" title="头像">
</div>
<div class="name">博客园</div>
<div class="wenzi">宅，是一种生活状态；死宅，是一种人生境界……</div>
<div class="baocun">
<ul>
<li><a href="https://www.cnblogs.com/" class="lianjie" target="_blank">博客园</a></li>
<li><a href="" class="lianjie" target="_blank">关于我</a></li>
<li><a href="" class="lianjie" target="_blank">QQ邮箱</a></li>
</ul>
</div>
<div class="baocun1">主要的学习目录</div>
<div class="baocun">
<ul>
<li><a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie" target="_blank">#python</a></li>
<li><a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie" target="_blank">#前端</a></li>
<li><a href="https://www.bilibili.com/" class="lianjie" target="_blank">B站</a></li>
</ul>
</div>
</div>
<!--这里设计该网页的主要内容-->
<div class="right">
<div class="wenzhang">
<div class="biaoji">
<span class="title">三国演义</span>
<span class="data">2023-1-1</span>
</div>
<div class="body">
<p>三顾茅庐</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">水浒传</span>
<span class="data">2023-1-2</span>
</div>
<div class="body">
<p>武松打虎</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">红楼梦</span>
<span class="data">2023-1-3</span>
</div>
<div class="body">
<p>李姥姥进大观园</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">封神榜</span>
<span class="data">2023-1-4</span>
</div>
<div class="body">
<p>姜子牙</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">python</span>
<span class="data">2023-1-5</span>
</div>
<div class="body">
<p>基本逻辑思维</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">html</span>
<span class="data">2023-1-6</span>
</div>
<div class="body">
<p>基本知识</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
<div class="wenzhang">
<div class="biaoji">
<span class="title">活着</span>
<span class="data">2023-1-6</span>
</div>
<div class="body">
<p>第一章</p>
</div>
<div class="wenzhang-tag">
<a href="https://www.cnblogs.com/slzjb/collections/9060" class="lianjie2" target="_blank">#python</a>
<a href="https://www.cnblogs.com/slzjb/collections/9061" class="lianjie2" target="_blank">#前端</a>
<a href="https://www.bilibili.com/" class="lianjie2" target="_blank">B站</a>
</div>
</div>
</div>
<div class="right"></div>
</body>
</html>
上面的代码主要是有导航栏的设计以及文章的设计，里面用的最多的是div标签，该标签用于保存每一个区域的代码。
css的代码
*{
margin: 0;
padding: 0;
}
/*这里是给导航栏以及导航栏的内容设计css样式*/
/*这里将导航栏给进行设计*/
.left{
width: 20%;
height: 100%;
position: fixed;
top: 0;
background-color: black;
}
/*这里给头像进行设计*/
.toxiang{
width: 130px;
height: 130px;
overflow: hidden;
border: white 5px solid;
border-radius: 50%;
margin: 20px auto;
box-shadow: 1px 1px 40px lightpink;
}
.left img{
width: 100%;
height: 100%;
}
.name{
color: white;
text-align: center;
}
.wenzi{
color: white;
margin-top: 20px;
text-align: center;
}
.baocun1{
color: white;
margin-top: 50px;
text-align: center;
}
/*这里设置链接的名字以及颜色同时将链接的下划线去掉*/
.lianjie{
color: white;
text-decoration: none;
}
/*这里设置链接被鼠标悬浮时的颜色变化*/
.lianjie:hover{
color: mediumturquoise;
}
/*这里保存链接的块级位置进行设计*/
.baocun{
text-align: center;
margin-top: 50px;
}
/*这里是给主要的内容进行css样式的设计*/
.right{
width: 80%;
background-color: whitesmoke;
float: right;
}
.right .wenzhang{
width: 700px;
background-color: white;
margin: 20px 0 20px 15px;
box-shadow: 3px 3px 3px black;
}
.wenzhang .biaoji .title{
font-size: 36px;
padding-left: 10px;
}
.wenzhang .biaoji .data{
/*margin-left: 481px;*/
float: right;
}
/*设计一个书签*/
.wenzhang .biaoji{
border-left: red 10px solid;
}
/*这里给文章的标题进行设计*/
.wenzhang .body{
margin-top: 20px;
border-bottom: black 1px solid;
padding-bottom: 20px;
}
/*给标题的文字大小进行设计*/
.wenzhang .body p{
text-indent: 30px;
}
.wenzhang .wenzhang-tag{
margin-top: 10px;
padding-bottom: 20px;
}
.wenzhang .wenzhang-tag a{
padding-left: 10px;
text-decoration: none;
color: lightpink;
}
.wenzhang .wenzhang-tag a:hover{
color: mediumturquoise;
}
最终的效果
阴影效果添加
什么是阴影？
如图
此头像旁边略微有些粉色就是添加的阴影，
如何添加需要使用box-shadow这个属性来设置
格式如下
box-shadow: 1px 1px 10px pink;
第一个px是用于控制阴影的左右位置，第二个px是控制阴影的上下位置，最后一个px是设置阴影的大小，然后pink(粉色)代表颜色的选择
标签：11,box,12,color,text,wenzhang,python,设计,margin From： https://www.cnblogs.com/slzjb/p/17827625.html