又一个典型css实例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› HTML›HTML/CSS编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="zh-CN" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="Author" Content="PR，qq:50198763" /> 
<title>PR</title> 
<style type="text/css" media="screen"> 
<!-- 
@charset "gb2312"; 
/* PR css 全局设置 */ 
body,a,strong,input,button,h1,h2,h3,h4,h5,h6,h7 {font:12px "Arial","宋体","Tahoma","QQ 50198763",sans-serif;}/*12px大，字体优先：Arial,然后:宋体,Tahoma,族科:sans-serif*/ 
html,body {height:100%;}/*设置浏览器高度为100%*/ 
body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 {padding:0;margin:0;}/*设置body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6内外补丁为0*/ 
div,p {display:block;}/*所有div,p为块元素*/ 
ul,ol,dl {list-style:none;}/*所有项目符号显示无*/ 
img {border:0;}/*所有图片边框无*/ 
a {text-decoration:none;}/*所有链接无修饰[上,下划线,虚线...]*/ 
a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/ 
button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/ 
/* 全局设置完毕 */ 

/* 布局 */ 
#box { width:548px; padding-bottom:8px; } 
#box h3 { height:17px; padding-top:10px; } 
#box .bg { padding:5px 10px 0; } 
/* 修饰 */ 
#box { background:url("images/left-btm.gif") no-repeat center bottom; } 
#box h3 { font-weight:bolder; font-size:12px; text-indent:2.5em; background:url("images/left-toptle.gif") no-repeat; } 
#box .bg { background:url("images/left-mid.gif") repeat-y; } 
--> 
</style> 
</head> 

<body> 
<div id="box"> 
    <h3>小狗无道</h3> 
    <div class="bg"> 
    <p>测试内容</p> 
    <p>测试内容</p> 
    <p>测试内容</p> 
    </div> 
</div> 
</body> 
</html> 