1、启动dreamweaver cs5，在d出的对话框窗口中选择html，进入主界面编辑区域。
2、接着对网页的整个布局在草纸上绘制下来，做到心中有数，主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。
3、接着点击设计进入设计状态，在代码区域书写整体框架的css，即
#ztkj｛width:80%
boder:1px solid #000000
height:800px}
在body里添加<div id="ztkj"></div>即可在下面看到整体框架。
4、接着在书写导航条代码，即
#dht{padding:10px
boder:1px solid#000000
background-color:#a2a2ff}
在第一个div中输入<div id="dht"></div>，查看效果变化。
5、书写主体内容的代码，即
#ztnr{
float:leftwidth:60%
height:600pxboder:1px solid #000000
text-align:center
margin-light:10px
margin-left:10px}
在整体框架中输入<div id="ztnr">主体内容</div>，查看效果
6、书写菜单导航代码
#cddh{
float:right
margin-right:10px
width:35%boder:1px #a2a2ff
height:600px}
接着在整体框架中输入代码<div id="cddh">菜单导航</div>
7、书写脚注的代码
#jz{
padding:10px
boder:3px #a2a2ff
text-algin:center
clear:both
margin-top:20px}
在整体框架中输入代码<div id="jz">脚注</div>查看效果。
8、这样大体框架就制作出来了，按f12进行查看效果，效果不好需要进一步修改代码。把边框设置出来，把所有的boder进行修改为border:solid 5px #fcc
9、由于整个框架不在中间位置，需要修改让其居中对齐，所以要在ztkj中添加一条语句margin:auto
10、这样整个框架就出来，在实际的使用过程中要根据自己的需要进一步调整，执行文件-另存为命令，将网页保存就完成了。
<html><head>
<style>
html,body{
padding:0
margin:0
}
body{
width:100vw
height:100vh
}
.font-style{
color:#fff
font-size:20px
font-weight:700
text-align:center
line-height:400%
}
.box-01{
width:70%
height:10%
position:absolute
left:0
top:0
background:#143717
}
.box-02{
width:30%
height:20%
position:absolute
right:0
top:0
background:#13852d
}
.box-03{
width:30%
height:31%
position:absolute
right:0
top:20%
background:#934c6c
}
.box-04{
width:40%
height:50%
position:absolute
left:0
top:10%
background:#3d7258
}
.box-05{
width:30%
height:41%
position:absolute
left:40%
top:10%
background:#437ca9
}
.box-06{
width:15%
height:10%
position:absolute
left:40%
top:50%
background:#3c7c91
}
.box-07{
width:55%
height:40%
position:absolute
left:0%
top:60%
background:#ad1b4c
}
.box-08{
width:22.5%
height:50%
position:absolute
left:55%
top:50%
background:#a19d32
}
.box-09{
width:22.5%
height:50%
position:absolute
right:0%
top:50%
background:#0360ad
}
</style>
</head>
<body>
<div class="box-01 font-style" >box-01</div>
<div class="box-02 font-style" >box-02</div>
<div class="box-03 font-style" >box-03</div>
<div class="box-04 font-style" >box-04</div>
<div class="box-05 font-style" >box-05</div>
<div class="box-06 font-style" >box-06</div>
<div class="box-07 font-style" >box-07</div>
<div class="box-08 font-style" >box-08</div>
<div class="box-09 font-style" >box-09</div>
</body>
</html>
在html中添加div+css方式：
1、div可以写在body区域；
<body><div class="ceshi">测试内容</div>
</body>
2、css可以写在<title></title>下的某一区域：
<style type="text/css"><!--XXXXX--></style>3、或者写入外部文件，然后引用进来；引用方式
<link rel="stylesheet" href="D:\test\css\base.css" type="text/css" />引用详细解释：href="xx",xx指的是你的CSS文件所在的路径。rel="stylesheet"和type="text/css"不用变，rel用来定义外部文件和HTML文档之间的关系，type用来说明外部文件的类型。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）