在div中添加内容和为添加的内容设置样式可以使用HTML和CSS来完成。
使用HTML: 在div标签中添加文本或其他标签。例如，可以在div中添加p标签来添加文本。
<div id="myDiv"><p>这是我的div中的文本内容</p>
</div>
使用CSS: 为添加的内容设置样式. 通过选择器，找到需要设置样式的元素，然后给它设置样式。例如，可以使用id选择器来设置文本的颜色。
#myDiv p { color: red}
这样就可以在div中添加文本内容并为其设置样式.
不过,需要注意的是这只是一种简单的方法,在实际应用中,如果要让样式更加美观和丰富，你可以使用更多的CSS选择器和属性，还可以使用JavaScript来动态的添加和修改内容。
在div里设置id或者class<div id="aaa"></div>
<div class="bbb"></div>
然后在css样式表里定义样式
#aaa{
}
.bbb{
}
---------------
DIV+CSS通用样式布局实例代码
对于刚开始接触DIV+CSS的同学来说，记住那些对象属性以及对应的值就很困难了，更何况来完成页面的布局了
一下是一个非常简单易懂的通用样式布局，希望对于刚开始接触DIV+CSS的同学有帮助。先看效果图：
我们可以看出通常的页面布局有以下几个部分：头部、内容、底部，其中内容有左侧主显区和右侧边栏。下面贴出代码：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/htmlcharset=gbk" />
<title>DIV+CSS practice</title>
<link
href="css/common.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!-- 头部 -->
<div
id="head">
</div>
<!--END 头部 -->
<!-- 主容器 -->
<div id="container">
<!-- 左侧主显区 -->
<div
id="content">
</div>
<!-- END 左侧主显区 -->
<!-- 右侧边栏
-->
<div id="side">
</div>
<!-- END 右侧边栏 -->
</div>
<!-- END 主容器 -->
<div
class="clear"></div>
<!-- 底部 -->
<div id="foot">
</div>
<!-- END 底部 -->
</body>
</html>
common.css样式文件：
*{
margin:0
padding:0
}
body{
background-color:gray
}
.clear{
clear:both
}
/*head*/
#head{
background-color:blue
height:150px
}
/*container*/
#container{
background-color:red
width:960px
height:800px
margin:20px auto
}
/*content*/
#content{
background-color:yellow
float:left
width:685px
height:100%
}
/*side*/
#side{
background-color:green
float:right
width:255px
height:100%
}
/*foot*/
#foot{
background-color:white
height:150px
width:960px
margin:20px
auto
}
大致布局很简单了，首先要有这个大局观，然后再完善其中的细节，学习PHP或者其他语言同样如此，首先要有一个思想，知道每一步做什么，怎么做，这样才能把知识灵活运用。
一、选择“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，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）