html 怎么把网页分块,div

html 怎么把网页分块,div,第1张

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、这样整个框架就出来,在实际的使用过程中要根据自己的需要进一步调整,执行文件-另存为命令,将网页保存就完成了。

分块单独用div是体现不出来的,需要 div+css

比如:我要让三个div 排序可以这样写:

1

2

3

4

5

6

7

8

9

10

11

12

<div class="box">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>

<style>

.box {border:1px #ccc solidwidth:300pxheight:200px}

.box div { float:left}

.box .left {border:1px #000 solidwidth:100pxheight:200px}

.box .center {border:1px #000 solidwidth:100pxheight:200px}

.box .right {border:1px #000 solidwidth:100pxheight:200px}

</style>

希望能帮助你

左右设定的宽度和不大于整体宽度,然后用一个float:left;浮动就行了。最好是给左右两个都加上,对应的还有float:right;平时多看看基础,这里有http://www.w3school.com.cn/。大哥你坑爹啊。

font-size:22px

font-face:carbel

font-weight:bold

font和后面是用-连接的,再有h1是默认就有font-weight效果的


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7675872.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存