如何用DIV+CSS进行网页样式布局

一、选择“div标签”命令 打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义 三、新建css规则 在打开的对话框中保持默认设置,单击“...
如何用DIV+CSS进行网页样式布局
在桌面建立一个index.htm的文件和main.css的文件,当然你也可以不用main.css的文件,但是为了方便操作,还是建一个吧。只要把记事本另存为就可以了。

做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>

</head>

<body>
</body>
</html>

3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的,看上去温馨,我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的,表示已经受到css样式表的控制了。2016-10-01
一、选择“div标签”命令
打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。

二、输入div标签名称
1、在“ID”列表框中选择“top”
2、单击“新建css规则”按钮准备进行css规则定义

三、新建css规则
在打开的对话框中保持默认设置,单击“确定”按钮进行css规则新建。

四、设置属性
1、在“分类”列表框中选择“方框”选项。
2、在窗口右侧进行css规则定义,其中margin值的设置非常重要,“left”及“right”为auto,则可让div页面水平居中。
3、单击“确定”按钮。

五、创建div按钮
返回“插入div标签”,单对话框,单击“确定”按钮,完成div标签的插入

六、查看创建的div
将鼠标光标定位在div,即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。2018-07-30
mengvlog 阅读 12 次 更新于 2025-06-20 01:19:15 我来答关注问题0
  • 接下来是布局的具体步骤。例如,我们可以设置一个中间层,同时设置左右两边的布局。左边和右边的div可以使用float:right;向右浮动,并设置宽度为整个屏幕的80%。这样,它们将按照我们希望的方式进行布局。如果想要让div铺满整个屏幕,可以在body上设置宽度为100%,这样每个div就有了一个父容器。通过这种方式...

  •  海里的月光0Bz div怎么浮在网页上面?

    1、首先需要做的就是创建两个div。2、创建了div后,需要分别给它们Class属性。3、接下来,使用css,通过Class属性给它们设置样式。4、需要给于它们一个宽度与高度,为了便于观察,可以给它们一个边框。5、接下来,先给不悬浮的div设置样式,给它设置一个背景颜色。6、接下来设置悬浮起来的div的样式,...

  • 一、选择“div标签”命令 打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义 三、新建css规则 在打开的对话框中保持默认设置,单击“...

  •  ForEverVip7 制作一个网页成这个格式怎么写?DIV+CSS

    第一个DIV 包含全部,是一个外围框架,设置好宽度,并且在网页中居中显示。在设置第二个DIV,设置好这个DIV的宽度和高度,浮动到左边,这个DIV是被第一个DIV包含着的。在设置第三个DIV,第三个DIV是浮动到右边,也是被第一个DIV包含的,注意设置好宽度和高度。在来设置第四个DIV和第五个DIV,这两...

  • 对于高度,可以采用固定像素单位进行设置,例如将某个DIV的高度设为50px。高度和宽度可以同时使用固定像素和百分比单位,但需要确保body的高度和宽度都设为100%,以确保百分比单位的正确显示。总之,通过合理设置body和容器的宽度与高度,可以灵活调整网页布局,实现自动适应屏幕宽度和高度的目的。

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部