好久不见喽，今天带来一个我的Web作业，虽然说这个作业不是特别的难，但是里面涉及到的知识点真的还蛮多的，而且对于代码的整齐度阿，代码整体的流畅度我个人感觉真的得到了一定的提升，所以多大代码、多想、多做就没错啦，这篇博客比较长，但扯到很多的知识点，喜欢的话收藏一波啦，篇章二的传送门在这里：快乐星球
这个效果是动态的，只是这里我就只是截个图，所以看不到🙉🙉
在完成这个作业、这个任务之前，我习惯性会将这个页面上的东西进行划分，分为“块”，然后再继续操作，稳稳地
分好之后我们就开始敲代码喽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<style type="text/css">
</style>
</head>
<body>
<div id="parent">
<div id="container"> <!-- 在这里用两个是因为图片的原因以及个人喜好 -->
<!-- header begin -->
<div id="header"></div>
<!-- header end -->
<!-- nav begin -->
<div id="nav"></div>
<!-- nav end -->
<!-- content begin -->
<div id="content"></div>
<!-- content end -->
<!-- footer begin -->
<div id="footer"></div>
<!-- footer end -->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<style type="text/css">
body{
font-size: 12px;
color: #f46490;
/* 字体默认的大小和颜色 */
background: url("./images/background.jpg") repeat;
padding: 0;
/* 四条边距均为0px */
}
#parent {
/* 动态效果图 */
width: 100%;
height:100%;
background:url("./images/fl.gif") no-repeat;
background-size: cover;
background-attachment: fixed;
}
#container {
/* 最外层容器大小 */
width: 867px;
height: auto;
/* 注意一下 */
margin: 0 auto;
}
#header{
width: 867px;
height: 408px;
}
</style>
</head>
<body>
<div id="parent">
<div id="container">
<!-- header begin -->
<div id="header">
<img src="./images/top.gif" alt="">
</div>
<!-- header end -->
<!-- nav begin -->
<div id="nav"></div>
<!-- nav end -->
<!-- content begin -->
<div id="content"></div>
<!-- content end -->
<!-- footer begin -->
<div id="footer"></div>
<!-- footer end -->
</div>
</div>
</body>
</html>
这次的导航栏用到的是—.>导航栏背景是图片这种做法，然后在这里我想说明一下在ul里设置的padding和在li上设置的padding的区别和不同：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<style type="text/css">
body{
font-size: 12px;
color: #f46490;
/* 字体默认的大小和颜色 */
background: url("./images/background.jpg") repeat;
padding: 0;
/* 四条边距均为0px */
}
#parent {
/* 动态效果图 */
width: 100%;
height:100%;
background:url("./images/fl.gif") no-repeat;
background-size: cover;
background-attachment: fixed;
}
#container {
/* 最外层容器大小 */
width: 867px;
height: auto;
/* 注意一下 */
margin: 0 auto;
}
#header{
width: 867px;
height: 408px;
}
#nav{
width: 867px; /*和容器一样的宽度噢*/
height: 30px;
position: relative;
background: url("./images/nav.gif") no-repeat;
margin: 0 auto;
}
#nav ul{
height: 30px;
list-style-type: none;
/* 去掉前面的●圆圈 */
/* float: left; */
margin: 0 auto;
padding: 0 0 0 80px;
/* 这个就是设置这整体的导航栏的左移的距离！ */
}
#nav ul li{
width: 65px;
height: 30px;
/* 别忘记这个高度，是一直不变的！不然会导致对不齐 */
float: left;
/* 浮动让它呈现横向导航栏 */
padding: 0 20px;
/* 设置每个内容之间的边距 */
}
#nav ul li a {
color: #f46490;
font-weight: bold;
font-size: 12px;
line-height: 30px;
/* 别忘记了！ */
text-decoration: none;
/* 去掉超链接的下划线 */
display: inline-block;
}
a:hover{
color: #666;
/* 设置点击之后字体变色 */
}
</style>
</head>
<body>
<div id="parent">
<div id="container">
<!-- header begin -->
<div id="header">
<img src="./images/top.gif" alt="">
</div>
<!-- header end -->
<!-- nav begin -->
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">个人</a></li>
<li><a href="#">档案</a></li>
<li><a href="#">好友</a></li>
<li><a href="#">留言板</a></li>
<li><a href="#">我的音乐</a></li>
</ul>
</div>
<!-- nav end -->
<!-- content begin -->
<div id="content"></div>
<!-- content end -->
<!-- footer begin -->
<div id="footer"></div>
<!-- footer end -->
</div>
</div>
</body>
</html>
我们篇章二见噢~~