您的位置:首页 > DIV CSS实例 > 【 返回上一页

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

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

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

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

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

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

此实例ThinkCSS在DW软件上进行,所以您要跟着实践实例,需要安装好Dreamweaver(简称dw)软件。

第一步、首先打开DW软件

dw软件打开后界面截图
dw软件打开后界面截图

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

弹出新建选项卡
弹出新建选项卡截图

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

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

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

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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>ThinkCSS新建一个盒子实例</title> 
  6. <style> 
  7. .divcss-box{width:450px;height:100px;border:1px solid #F00} 
  8. </style> 
  9. </head> 
  10. <body> 
  11.  
  12. </body> 
  13. </html> 

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

2、完成CSS代码截图

编写好CSS代码后截图
编写好CSS代码后截图

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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>ThinkCSS新建一个盒子实例</title> 
  6. <style> 
  7. .divcss-box{width:450px;height:100px;border:1px solid #F00} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss-box">ThinkCSS盒子实例</div> 
  12. </body> 
  13. </html> 

2、实例DW软件完整截图

DW软件完整实例代码与效果截图
DW软件完整实例代码与效果截图

3、新建一个css宽450px,css高100px的DIV盒子浏览器截图
要浏览器测试结果,首先需要保存此网页,在DW软件中使用快捷键“ctrl+s”,将HTML实例文件保存桌面。

保存选项卡截图
保存html文件选项卡截图

弹出保存选项卡,为了方便浏览此案例,建议保存到桌面,你选择左侧“桌面”,然后“文件名”,命名为“index.html”即可。

最后在你电脑桌面找到index.html网页文件(如果没有显示html扩展名,需要去设置显示扩展名),使用浏览器打开即可。

这里使用遨游浏览器浏览效果如下图

浏览器测试CSS案例实验效果截图
浏览器测试CSS案例实验效果截图

三、DIV CSS案例演示与下载

1、在线演示:查看案例

2、打包下载:

相关标签: 盒子 新建html
如需转载,请注明文章出处和来源网址:www.thinkcss.com/shili/639.shtml

日期:2013-11-06 23:09:11 来源:www.thinkcss.com 作者:ThinkCSS

热门点击