成品图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/089045a460ede50e7e43562bc24161ac.jpeg)
html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<header>
<div class="headerpc" >
<img src="./src/logo.jpg" width="100%" height="100%">
</div>
<ul class="tabber">
<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>
</header>
<div class="bp">
<img src="./src/全家福.jpg" width="100%" height="100%">
</div>
<nav>
<p><span>公告:</span>我的个人网站开通啦,欢迎光临!</p>
</nav>
<main class="main1">
<article>
<div class="s1">
<h2>站长介绍</h2>
<p>intrduce</p>
</div>
<div class="s2">
<img src="src/wukong.png">
<p>孙悟空,本名卡卡罗特,日本漫画及改编动画《龙珠》系列的主角,是来自贝吉塔行星的赛亚人。小时候以“下级战士”的身份被送到地球。被武道家孙悟饭收养并取名为“孙悟空”。小时候失控变成大猩猩踩死悟饭后独自生活在深山。有一天结识少女布玛,从而踏上收集龙珠的大冒险。
在冒险中,悟空遇到了不少来自地球或宇宙的朋友及敌人,于是为保卫地球,更为追求强大而刻苦修行,不断与强敌战斗,成为拯救地球乃至全宇宙的英雄</p>
</div>
</article>
<aside>
<div class="s1">
<h2>站长相册</h2>
<p>Photo</p>
</div>
<div class="s2">
<div>
<img src="./src/超一.jpg" width="100%" height="100%">
</div>
<div>
<img src="./src/超二.jpg" width="100%" height="100%">
</div>
<div>
<img src="./src/超三.jpg" width="100%" height="100%">
</div>
</div>
</aside>
</main>
<footer>
<p>Copyright 02020,版权所有<a href="https://blog.csdn.net/SDAW_1"> https://blog.csdn.net/SDAW_1</a></p>
</footer>
</body>
</html>
css文件
*{
margin:0;
padding: 0;
list-style: none;
}
header{
height:77px;
}
.headerpc{
position: absolute;
left:447px;
width:200px;
height: 65px;
}
.tabber {
position: absolute;
left:1010px;
}
.tabber li {
float: left;
width: 60px;
margin-top: 28px;
padding-left: 29px;
border-left: black dashed 1px;
}
.tabber li:first-child{
border:none;
}
.bp{
margin:0 auto;
width:1600px;
height:482px;
}
nav {
height: 55px;
text-align: center;
line-height: 55px;
}
nav span{
font-weight:bold;
}
main{
width:1071px;
height:245px;
border:dashed 1px;
margin:0 auto;
padding:0 13px;
display:flex;
}
.s1{
display:flex;
margin:20px 0 20px 13px;
}
.main1 h2{
font-size:19px;
border-right: solid 1px black;
padding-right:15px;
}
.main1 p{
font-size:19px;
color:red;
}
.s2{
margin-left: 13px;
display:flex;
}
.s2 p{
width: 254px;
height:160px;
font-size: 10px;
color:orangered;
}
.s2 div{
width:163px;
height: 155px;
margin-right: 10px;
}
footer{
height: 55px;
line-height: 55px;
text-align: center;
background-color: grey;
}
body{
background-image: url(src/7.jpg);
}
经验教训:
1、伸缩布局:display:flex很重要
2、margin:0 auto 是使自身在浏览器居中,需要配合宽度使用
text-align:center 是使标签的内容居中