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

html-css011

如何用DIV+CSS进行网页样式布局,第1张

一、选择“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，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。

有三种常用方式：1、通过id 例：<style>#test{color:red}</style><div id="test" >test</div>

2、通过类名 例：<style>.test{color:blue}</style><div class="test" >test</div>

3、直接放在div标签里 例：<div style="color:purple" >test</div>

1、先给想要改字体样式的div加一个class或者id

2、用选择器找到中国div（.class或者#id）

2、在<style>标签里给这个div写css样式，

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>DIV+CSS怎么样改字体样式</title>

<style>

.one{

font-family:"微软雅黑"  //把 font-family: "设置字体名称" 里的字体名称改成你需要

font-size:12px  //字体大小

color:red  //字体颜色

font-weight:normal//加粗 normal默认值 bold粗体 数值100-900

}

</style>

</head>

<body>

<div class="one">DIV+CSS怎么样改字体样式</div>

</body>

</html>

扩展资料

<br>换行

<b>b标签设置加粗</b>

<i>i标签设置斜体</i>

<u>u设置下划线</u>

<h1>最重要的标题H1</h1>

<h2>次要栏目或标题-小标题H2</h2>

<h3>再次要栏目或分类小标题H3</h3>

<h4>文中分类小标题H4</h4>

<pre>定义预格式化文本，空格和换行会保留，常常应用于表示计算机的源代码。</pre>