HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炉石传说爱好者协会</title>
<link rel="stylesheet" type="text/css" href="Eg.css">
</head>
<body>
<div class="container">
<div class="main">
<div class="heading">
<div class="headingWapper">
<div class="headingWebName"> 炉石传说爱好者协会</div>
<div class="headingNavigation">
<ul>
<li><a href="https://hs.blizzard.cn/landing">首页</a></li>
<li><a href="https://hs.blizzard.cn/landing">卡组攻略</a></li>
<li><a href="https://hs.blizzard.cn/landing">精彩视频</a></li>
<li><a href="https://hs.blizzard.cn/landing">炉石主播</a></li>
<li><a href="https://hs.blizzard.cn/landing">大数据</a></li>
</ul>
</div>
</div>
<div class="userImage">
<img src="炉石传说小可爱/1.jpg" height="80px" width="80px">
</div>
<div class="inputName">
<form>
<input type="text">
</form>
</div>
</div>
<div class="body">
<body>
<div class="bodyTitle">
<h2>欢迎来到我的旅店</h2>
<P class="p1">冒险者！</P>
<P class="p2">快来，说说你的故事吧！</P>
<div><img src="其他小可爱/6.jpg"></div>
</div>
</body>
</div>
</div>
<div class="footing">
<div>
<a href="https://hs.blizzard.cn/landing">@暴雪官网</a>
</div>
</div>
</div>
</body>
</html>CSS代码：
*{
margin: 0px;
padding: 0px;
}
/*将默认的外边距和内边距都设为0，可以方便设计网页，不然会不精确*/
body{
background-color: skyblue;
/*整体的背景*/
}
.main{
width: 80%;
height: 1500px;
background-color: lightblue;
margin: 0px auto;
/*第一个属性控制上下边距，左右是自动*/
/*有内容部分的背景颜色*/
}
.heading{
width: 100%;
height: 100px;
background-color: lightskyblue;
margin: 0 auto;
/*控制整个头部*/
}
.headingWapper{
padding-top: 30px;
padding-bottom: 30px;
width: 100%;
height: 30px;
position: relative;
/*涉及到位置的改变，都要定义为相对布局*/
/*控制着网页标题和导航栏*/
}
.headingWebName{
padding-left: 20px;
padding-top: -50px;
float: left;
font-family: "Yu Gothic UI";
font-size: 35px;
color: aqua;
/*只控制网站的标题部分*/
}
ul{
float: left;
list-style-type: none;
/*序列的标签样式*/
padding-top: 6px;
padding-bottom: 6px;
/*导航栏的样式*/
}
li{
padding-left: 25px;
display: inline;
/*导航栏的排列方式*/
}
a:link,a:visited{
font-size: 15px;
font-weight: bold;
color: lightcyan;
padding: 6px;
text-align: center;
text-decoration: none;
/*控制鼠标没有浏览状态和已经浏览状态去掉下划线*/
}
a:hover,a:active{
color: cornflowerblue;
/*控制鼠标悬停和点击状态*/
}
.userImage img{
margin-top: -80px;
margin-right: 0px;
border-radius: 40px;
width: 80px;
height: 80px;
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
/*box-shadow: inset x-offset y-offset blur-radius spread-radius color*/
/*(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)*/
/*这里的rgba表示一种表达颜色的方式*/
float: right;
/*头像部分*/
}
.inputName form{
margin-top: -45px;
float: right;
position: relative;
margin-right: 95px;
/*输入框部分，修改了定位方式，不然不好控制位置*/
}
input{
height: 25px;
border-radius: 30px;
/*设置输入框的高度和圆角的大小*/
}
.footing{
width: 80%;
height: 100px;
margin: 0 auto;
background-color: cornflowerblue;
position: relative;
}
.footing div{
margin-left: 35px;
color: darkblue;
float: left;
font-size: 30px;
}
.footing a:hover,a:active{
color: firebrick;
}
h2{
font-size: 100px;
font-family: "Yu Gothic Medium";
color: bisque;
padding-left: 75px;
/*第一句话的控制*/
}
.p1{
font-size: 80px;
font-family: "Wingdings 3";
color: burlywood;
float: right;
padding-right: 30px;
/*第二句话的控制*/
}
.p2{
font-size: 150px;
font-family: "Viner Hand ITC";
color: coral;
text-align: center;
/*第三句话的控制*/
}
.bodyTitle div{
margin: 30px;
text-align: center;
}
/*这里想要达到控制图片居中的效果，直接控制img标签不好控制，通过此标签承载*/效果：（第一次写，好有成就感啊，哈哈哈哈）
