Dreamweaver网页制作初级教程:主体div的定义

 时间:2024-10-22 03:33:45

1、之前我们做过了关于头部标题栏以及logo部分的div切分,不知道大家还记不记得。今天我们要做一些关于网站主体部分的划分,希望大家紧跟着之前的思路哦。首先我们还是打开dw。

Dreamweaver网页制作初级教程:主体div的定义

2、自然,要定义body部分,就要用到body的代码。我们在body之间输入两个关于div的代码。

Dreamweaver网页制作初级教程:主体div的定义

3、因为我们准备将body部分划分为2鲥鲣剔墟栏,也就说,我们应该定义不同的body,起名一个l一个r,定义代码如下: <div id="body_l"></颊俄岿髭div> <div id="body_r"></div>

Dreamweaver网页制作初级教程:主体div的定义

4、完毕后,我们来定义它们的样式。来到css文件,css文件主要是定义样式的,当然,因为我们定义的是id,所以这里要用#开始。即:#body_l{}#body_r{}大括号中即是我们需要定义的属性了。

Dreamweaver网页制作初级教程:主体div的定义

5、定义完成样式的属性,代码如下:#body_l{width:220px;height:500px;backgroun颊俄岿髭d-color:#FFC}#body_r{width:220px;height:500px;background-color:#FFC}先看下效果:

Dreamweaver网页制作初级教程:主体div的定义

6、虽然我们定义的是左右,但是发觉右侧的div跑到下方去了,其实我们忘记了一个命令,就是float。我们加上边距margin,然后插入float命令,再看。

Dreamweaver网页制作初级教程:主体div的定义

7、可以看到,虽然并排排列了,但是两个div黏在一起,也分辨不出所以然,所以我们加入这样的语句:margin-left:20px让它距离左侧20像素,然后预览。

Dreamweaver网页制作初级教程:主体div的定义

8、刚刚好,我们分完了这些div,下节我们说一下div的再详细划分。

  • Dreamweaver中怎么设置鼠标经过更换图片特效
  • CSS实现3D照片墙
  • Dreamweaver CS3使用资源面板创建模板
  • Dreamweaver CS6如何应用:[11]列表
  • css中text-overflow属性的作用是什么?
  • 热门搜索
    关于新年的手抄报 有关疫情的手抄报 消防手抄报图片大全 文明手抄报图片 防疫有我爱卫同行手抄报 英语春节手抄报 手抄报图片大全5年级 防止溺水手抄报 新年手抄报简单又漂亮 2035年的家乡手抄报