目录
块元素背景，边框，颜色等布局
块元素ID选择器
另一个例子
块元素中的图片
盒子模型的演示
块级元素中的文本格式
块级元素div与内联元素span的对比
两个行内元素的margin
两个块级元素的margin
子div
span的margin设置为负数
盒子模型的演示
块元素背景，边框，颜色等布局
<html><head><title>border-style</title><style type="text/css">div{border-width:6px;border-color:#000000;margin:20px; padding:5px;background-color:#FFFFCC;}</style></head><body><div style="border-style:dashed">The border-style of dashed.</div><div style="border-style:dotted">The border-style of dotted.</div><div style="border-style:double">The border-style of double.</div><div style="border-style:groove">The border-style of groove.</div><div style="border-style:inset">The border-style of inset.</div><div style="border-style:outset">The border-style of outset.</div><div style="border-style:ridge">The border-style of ridge.</div><div style="border-style:solid">The border-style of solid.</div></body></html>
块元素ID选择器
<html><head><style type="text/css">#outerBox{width:200px;height:100px;border:2px black solid;border-left:4px green dashed;border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple; }</style></head><body><div id="outerBox"></div></body>
另一个例子
<html><head><style type="text/css">#outerBox{width:128px;height:128px;border:10px black dashed;background:silver;}</style></head><body><div id="outerBox"></div></body>
块元素中的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>演示</title><style type="text/css">#box{width:128px;height:128px;padding:0 20px 10px; /*上左右下*/padding-left:10px;border:10px gray dashed;}#box img{border:1px blue solid;} </style></head><body><div id="box"><img src="cup.gif"></img></div></body></html>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>盒子模型的演示</title><style type="text/css">body{margin:0 0 0 0;font-family:宋体;font-size:12px;}ul { background: #ddd; margin: 15px 15px 15px 15px;padding: 5px 5px 5px 5px;/* 没有设置边框 */}li { color: black;/* 黑色文本 */ background: #aaa; /* 浅灰色背景 */margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */list-style: none /* 取消项目符号 *//* 未设置边框 */}li.withborder {border-style: dashed;border-width: 5px; /* 设置边框为2像素 */border-color: black;margin-top:20px； }</style></head><body><ul><li>第1个列表的第1个项目内容</li><li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul><ul><li>第2个列表的第1个项目内容</li><li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul></body></html>
块级元素中的文本格式
<html><head><title>div 标记范例</title><style type="text/css">div{font-size:18px;/* 字号大小 */font-weight:bold;/* 字体粗细 */font-family:Arial;/* 字体 */color:#FFFF00;/* 颜色 */background-color:#0000FF;/* 背景颜色 */text-align:center;/* 对齐方式 */width:300px;/* 块宽度 */height:100px;/* 块高度 */}</style></head><body><div>这是一个div标记</div></body></html>
块级元素div与内联元素span的对比
<html><head><title>div与span的区别</title></head><body><p>div标记不同行：</p><div><img src="cup.gif" border="0"></div><div><img src="cup.gif" border="0"></div><div><img src="cup.gif" border="0"></div><p>span标记同一行：</p><span><img src="cup.gif" border="0"></span><span><img src="cup.gif" border="0"></span><span><img src="cup.gif" border="0"></span></body></html>
两个行内元素的margin
<html><head><title>两个行内元素的margin</title><style type="text/css">span{background-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;}span.left{margin-right:30px;background-color:#a9d6ff;}span.right{margin-left:40px;background-color:#eeb0b0;}</style></head><body><span class="left">行内元素1</span><span class="right">行内元素2</span></body></html>
两个块级元素的margin
<html><head><title>两个块级元素的margin</title><style type="text/css"><!--div{background-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;}--></style></head><body><div style="margin-bottom:50px;">块元素1</div><div style="margin-top:30px;">块元素2</div></body></html>
子div
<head><title>父子块的margin</title><style type="text/css"><!--div.father{/* 父div */background-color:#fffebb;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;border:1px solid #000000;height:40px;/* 设置父div的高度 */}div.son{/* 子div */background-color:#a2d2ff;margin-top:30px;margin-bottom:0px;padding:15px;border:1px dashed #004993;}--></style></head><body><div class="father"><div class="son">子div</div></div></body>
span的margin设置为负数
<head><title>margin设置为负数</title><style type="text/css">span{text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;border:1px dashed #000000;}span.left{margin-right:30px;background-color:#a9d6ff;}span.right{margin-left:-53px;/* 设置为负数 */background-color:#eeb0b0;}</style></head><body><span class="left">行内元素1</span><span class="right">行内元素2</span></body>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>盒子模型的演示</title><style type="text/css">body{margin:0 0 0 0;font-family:宋体;}ul { background: #ddd; margin: 15px;padding: 10px;font-size:12px;line-height:14px;}h1 { background: #ddd; margin: 15px;padding: 10px;height:30px;font-size:25px;}p,li { color: black;/* 黑色文本 */ background: #aaa; /* 浅灰色背景 */margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */list-style: none /* 取消项目符号 */}.withborder {border-style: dashed;border-width: 5px; /* 设置边框为2像素 */border-color: black;margin-top:20px; }</style></head><body><h1>标准流中的盒子模型演示</h1><ul><li>第1个项目内容</li><li class="withborder">第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容。</li></ul></body></html>
