@mdjsjdq
2015-09-29T09:14:05.000000Z
字数 1903
阅读 2080
动态页面快速设计
HTML 编程
DIV 是网页设计设计的核心
DIV标签
DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
iPad Air
DIV 代码
<!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/html; charset=utf-8" /><title>DIV</title></head><body style="background:#FF9"><div style="width:40px;height:40px;margin-bottom:10px;background:#00F" ></div><div style="width:40px;height:40px;margin-bottom:10px;background:#F00"></div><div style="width:40px;height:40px;margin-bottom:10px;background:#0F0"></div><!--默认的HTML代码是block的，现在我们要它浮动起来,现在他们是占据了一整行而不会换行--><hr /><div style="width:80px;height:80px;margin-right:10px;background:#00F;float:left;overflow:hidden"></div><div style="width:80px;height:80px;margin-right:10px;background:#F00;float:left;overflow:hidden"></div><div style="width:80px;height:80px;margin-right:10px;background:#0F0;float:none;overflow:hidden"></div><!--现在往里面添加图片--><hr /><div style="width:80px;height:80px;margin-right:10px;background:#00F;float:left;overflow:hidden"><img src="http://img3.imgtn.bdimg.com/it/u=423290804,2569925989&fm=21&gp=0.jpg" alt="Picture" /></div><div style="width:80px;height:80px;margin-right:10px;background:#F00;float:left;overflow:hidden"><img src="http://img5.imgtn.bdimg.com/it/u=3053840139,4109911854&fm=21&gp=0.jpg" alt="Picture" /></div><div style="width:80px;height:80px;margin-right:10px;background:#0F0;float:none;overflow:hidden"><img src="http://img5.imgtn.bdimg.com/it/u=2919540825,2281022748&fm=21&gp=0.jpg" alt="Picture" /></div><hr /><img src="http://img4.imgtn.bdimg.com/it/u=4051518179,3328976343&fm=21&gp=0.jpg" width="1366" /><img src="1.jpg" width="1366"></body></html>
