![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
1、新建一个html页面。
2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。
3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。
4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。
5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。
6、保存好html文件后使用浏览器查看效果。
7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
先码好导航栏所需要的基本的HTML代码 这个就不必多说具体的代码如下： 横向导航栏 首页 导航1 导航2 导航3 导航4 导航5 导航6 测试结果应为下图（1） 下面我们通过CSS 来改变他的样式。 首先我们先让导航在浏览器的中间。不过在让他居中前得先设...用绝对定位
position:absolute
top，bottom，left，right指定固定位置
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.demo1{
width:300px
height:200px
display:block
background:pink
position:absolute
top:20px
left:50px
}
.demo2{
width:300px
height:200px
display:block
background:blue
position:absolute
top:400px
right:140px
}
</style>
<ul>
<li class="demo1">demo1</li>
<li class="demo2">demo2</li>
</ul>
</body>
</html>
