当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 又一个典型css实例

CSS样式表
css 简单区别ie6,ie7,firefox的写法
解决在IE6下文字溢出(多出一行字)的解决方法小结
纯css 鼠标移上查看大图的效果
css 完美清除浮动的两种解决方案
css 透明度的设置兼容所有浏览器
pre 自动换行的问题
CSS 图片定位的几种方式
div+css学习笔记(IE与fox好多不兼容的问题)
让你的页面对 IE6 显示出黑白色(多浏览器)
li 自适应宽度
样式表达式实现交替显示table行颜色
css 控制图片大小 小于固定值 控制大小
CSS 各种滤镜代码解释 用法案例
针对firefox ie6 ie7 ie8的css样式hack
CSS 样式 层裁剪图片
十个非常实用的CSS属性(IE不支持)
CSS渲染速度改善的十个方法与建议
css z-index 最大值
css z-index 在IE中的迷惑
IE与Firefox中兼容的html设计中使用CSS改变鼠标为手形

CSS样式表 中的 又一个典型css实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 129 ::
收藏到网摘: n/a

复制代码 代码如下:

<!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>

下载文件 下载此文件