新建一个宽度450px 高度为100px的DIV盒子

新建一个宽度450px 高度为100px的DIV盒子实例，教程通过从新建html 新建CSS代码再到DIV代码再到实例浏览器测试学习。

快捷建立一个标准的DIV盒子的HTML网页，DIVCSS5推荐使用DW软件进行建立，所以此实例DIVCSS5通过DW软件上快速完成这个案例例子。

一、要用到的CSS属性与解释 - TOP

1、width:450px 设置css宽度450px
2、height:100px 设置css高度100px
3、border:1px solid #F00 设置红色css边框1px
为了观察到设置宽度450px高度100px盒子样式效果，所以DIVCSS5在实例中对盒子加了一个1px宽红色边框。

二、DIV+CSS完整实例操作步骤 - TOP

此实例DIVCSS5在DW软件上进行，所以您要跟着实践实例，需要安装好Dreamweaver（简称dw）软件。

第一步、首先打开DW软件

dw软件打开后界面截图

第二步、新建一个html
打开DW软件后，使用快捷键“ctrl+n”（或点击软件 “文件”--> 选择“新建”），此时会弹出创建选项卡窗口如下图

弹出新建选项卡截图

按照以上图点击“创建”一个标准HTML。

创建HTML截图，选择“拆分”模式

第三步，设置title标签内容，并开始设置创建CSS代码
DIVCSS5实例修改好title标签名称后，直接HTML中使用style标签创建CSS实例代码。

1、完成实例div css代码如下

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIVCSS5新建一个盒子实例</title> 
<style> 
.divcss-box{width:450px;height:100px;border:1px solid #F00} 
</style> 
</head> 
<body> 
 
</body> 
</html>

这里精简了html代码，将DOCTYPE html精简，同时对此盒子DIV命名为“.divcss-box”，我们将使用CLASS使用此类命名。

2、完成CSS代码截图

编写好CSS代码后截图

第四步，body创建div盒子，并使用创建CSS选择器属性类“.divcss-box”
1、新建div，class使用新建CSS类后网站HTML代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIVCSS5新建一个盒子实例</title> 
<style> 
.divcss-box{width:450px;height:100px;border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="divcss-box">DIVCSS5盒子实例</div> 
</body> 
</html>