学完了 HTML 的知识，又学完了 CSS 的知识，那么我们如何用 CSS 修饰 HTML骨架呢？本章将带你综合运用这些知识点，可能有一点点乱，但还是要耐心学习，温故而知新，或许会有不一样的收获哟~~~
初始状态效果图（设置CSS样式前）
是不是很单调，一点也不美观，这么单调怎么配得上我懒羊羊，现在，让我们为懒哥设计一个可爱的页面吧~
设置CSS样式后效果图
设置CSS样式前（基本骨架HTML代码）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<section class="container1">
</section>
</header>
<nav>
<ul class="clear_ele1">
<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>
</nav>
<main>
<section class="container2">
<aside id="aside-left">
角色信息
</aside>
<aside id="aside-right">
懒羊羊语录
</aside>
<article>照片
<ul class="clear_ele2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</article>
</section>
<section class="container3">
<h4>联系懒哥</h4>
<form>
昵称:
<input type="text" id="name" name="name"><br>
邮箱:
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<footer>
<p>版权所有 © 懒羊羊</p>
</footer>
</body>
</html>1.<header> 样式设置
先设置 div 盒子放懒羊羊照片，然后开始设置样式
CSS代码（运用相对定位给图片文字设置位置）
css
header{
width: 100%;
height: 160px;
background-color: rgb(249, 249, 192);
}
#d1 img{
width: 190px;
height: 142px;
position:relative;
left:1200px;
top: 8px;
}
#d2 img{
width: 80px;
height: 80px;
position:relative;
bottom: 80px;
padding-left: 80px;
}
#d3{
font-size: 60px;
font-family: 华文行楷;
color: rgb(243, 234, 131);
position:relative;
left:560px;
bottom: 250px;
}HTML代码
html
<header>
<section class="container1">
<div id="d1"><img src="./02.jpg"></div>
<div id="d2"><img src="./11.jpg">
<img src="./12.jpg">
<img src="./13.jpg">
</div>
<div id="d3"><p>我是懒羊羊＼(・o・)/!</p></div>
</section>
</header> 2.<nav> 样式设置
效果图
CSS代码（运用浮动给文字设置位置）
css
nav{
background-color: rgb(250, 212, 146);
width: 100%;
height: 30px;
}
.clear_ele>li{ /*用子代选择器对 li 标签设置样式*/
font-size: 30px;
font-family: 华文行楷;
float: left; /*左浮动*/
padding-left: 120px;
font-style: oblique; /*设置字体倾斜体*/
list-style-type: none; /*设置列表符号：不显示*/
}
a:link{ /*用到伪类选择器*/
text-decoration: none; /*设置链接访问前的样式：无修饰*/
color: white;
}3.<main> 中第一个<section>样式设置
效果图
CSS代码（运用三列布局设置页面）
css
.container2{
background-color:rgb(252, 244, 164) ;
width: 100%;
height: 500px;
}
#aside-left{
width: 20%;
height: 500px;
background-color: rgb(252, 244, 164);
float: left;
}
#aside-right{
width: 20%;
height: 500px;
background-color: rgb(252, 244, 164);
float: right;
}
article{
width: 60%;
height: 500px;
background-color: rgb(251, 254, 209);
margin-left: 20%;
margin-right: 20%;
}4.<main> 中第一个<aside>样式设置
先设置 div 盒子放懒羊羊照片和内容，然后开始设置样式
CSS代码
css
#d4>img{
width: 200px;
height: 200px;
padding-left: 40px;
padding-top: 30px;
}
#d5{
width: 200px;
height: 120px;
font-family: 华文行楷;
border: 5px white solid;
margin-left: 30px;
margin-top: 30px;
padding-left: 10px;
}HTML代码
html
<aside id="aside-left">
角色信息
<div id="d4"><img src="./01.jpg"></div>
<div id="d5">
<p>姓 名: 懒羊羊<br>
性 别: 男 <br>
生 日: 羊历3507年6月26日 <br>
年 龄: 11岁 <br>
血 型: A型</p>
</div>
</aside>5.<main> 中<article>样式设置
在<li>中插入图片，运用浮动设置图片
CSS代码
css
.clear_ele2>li>img{
width: 120px;
height: 120px;
}
.clear_ele2 li{
list-style-type: none;
float: left;
margin-left:55px;
margin-top: 60px;
}HTML代码
html
<article>照片
<ul class="clear_ele2">
<li><img src="./03.jpg" alt=""></li>
<li><img src="./04.jpg" alt=""></li>
<li><img src="./05.jpg" alt=""></li>
<li><img src="./06.jpg" alt=""></li>
<li><img src="./07.jpg" alt=""></li>
<li><img src="./08.jpg" alt=""></li>
<li><img src="./09.jpg" alt=""></li>
<li><img src="./10.jpg" alt=""></li>
</ul>
</article> 6.<main> 中<section>样式设置
效果图 
CSS代码
css
.container3{
background-color: rgb(255, 249, 188);
border: 2px rgb(250, 212, 146) solid;
width: 280px;
height: 180px;
position:fixed;
left: 1050px;
top: 550px;
padding-left: 50px;
font-family: 华文行楷;
}6.<footer>样式设置
效果图 
CSS代码
css
footer{
width: 100%;
height: 20px;
background-color: rgb(250, 212, 146);
text-align: center;
font-family: 楷体;
}本章内容已结束~~~