css盒子模型实例
2014-11-25 10:02
288 查看
.html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Box Model</title> 5 <style type="text/css"> 6 body 7 { 8 background: #333; 9 } 10 div 11 { 12 height: 240px; 13 width: 360px; 14 border: 5px solid yellow; 15 background: blue; 16 margin: 0 auto; 17 } 18 span 19 { 20 display: block; 21 width: 50%; 22 height: 50%; 23 background: red; 24 border: 5px solid yellow; 25 color: White; 26 font-size: 14px; 27 font-weight: bold; 28 margin: auto; 29 margin-top: 60px; 30 line-height: 120px; 31 text-align: center; 32 vertical-align: middle; 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <span>Box Model的内容</span> 39 </div> 40 </body> 41 </html>效果如下:
相关文章推荐
- css盒子模型及实例
- css盒子模型及实例
- 串口中断应用实例
- Cisco PIX515防火墙的典型多接口配置实例
- [VB.NET源码]MerryMeeting工作会议实例
- PHP设计模式实例之(观察者模式、策略模式、简单工厂模式)
- 用SAX解析XML实例
- 我要学ASP.NET MVC 3.0(十六): MVC 3.0 实例系列之表格数据的分页
- android 状态栏实例
- sed命令实例
- JSP 检测闰年实例
- 【IOS实例小计】图像移动--可扩展为动态实现图标变化
- JAVA 获取指定网址的IP地址 实例
- PyQt4 精彩实例分析* 实例2 标准对话框的使用
- PHP+MYSQL会员系统的开发实例教程
- ThinkPHP自动完成中使用函数与回调方法实例
- 【.Net码农】Expression Blend实例中文教程系列文章汇总
- Python实现的简单hangman游戏实例
- Qt5开发及实例.pdf,真正的书,非ppt,非源码
- Log4j2介绍和特性实例(四)--过滤器Filter