将css和HTML和图片放在同一个文件夹中：
1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@import url("1.2.6.css")
</style>
</head>
<body>
<div id="header"><b><i>header</i></b></div>
<div id="navigator">
<ul id="navigator">
<li><a href="https://www.bilibili.com">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>
<div id="content">
<h3>前言</h3>
<p>CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。</p>
<h3>理解DIV+CSS布局</h3>
<p>DIV+CSS是网站标准bai（或称“WEB标准”）中常用du术语之一，div+css 是一种网页zhi的布dao局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。</p>
</div>
<div id="footer">
<p>关于| 广告服务| 招聘| 客服中心| QQ留言| 网站管理| 会员登录| 购物车</p>
<p>Copyright @潘惠萍编写</p>
</div>
</body>
</html>
<body>
<div id="header"><div>
<div id="navigator"><div>
<div id="centent"></div>
<div id="footer"></div>
</body>
body{
foot-family:Arial,Helvetica,sana-serif;
font-size:12px;
margin:0px auto;
height:800px;
width:800px;
border:1px solid #006633;
}
#header{
height:100px;
width:800px;
background-image:url(1.jpg);
background-repeat:no-repeat;
margin-left:1px;
}
#navigator{
height:25px;
width:800px;
font-size:14px;
list-style-type:none;
}
#navigator li{
float:left;
}
#navigator li a{
color:yellow;
text-decoration:none;
padding-top:4px;
display:block;
width:132px;
height:22px;
text-align:center;
background-color:#009966;
margin-left:1px;
}
#navigator li a:hover
{
background-color:#006633;
color:#FFFFFF;
}
#content{
//border:1px dashed red;
background-color:grey;
height:auto;
width:800px;
line-height:1.5em;
padding:0px;
margin-left:1px;
}
#content p{
text-indent:2em;
background-color:cyan;
}
#content h3{
font-size:16px;
margin:0px;
}
#footer{
height:auto;
width:800px;
text-align:center;
background-color:#009966;
padding:0px;
margin-left:1px;
}
*{
margin:0px;
padding:0px;
运行截图：
