<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-image: url(bj.jpg)
height: 200px
width: 200px
margin-top: 0px
margin-right: auto
margin-bottom: 0px
margin-left: auto
}
-->
</style>
</head>
<body>
<img src="1240817594885.jpg" />
<p>关过道客厅卧室书房餐厅厨房阳台吧台花园卫生间儿童房新婚房衣帽间休息室地下室洗衣间化妆间健身房老人房工作间出租屋 <br />
</p>
</body>
</html>
可能路径不对 应该是这样了
效果是一样的，第一种写法个人感觉比较好，把公共的css都提取出来写在一起，避免代码的冗余显示效果上两个应该是一致的。
你可以自己进行测试下看看结果是否相同。
进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外，HTML5新增了 progress 标签，其重要程度可见一斑。
由于HTML的 progress 存在兼容性问题，本文主要讲解如何通过CSS实现一个简单的自定义进度条效果！
前端开发常用的进度条效果如下：
（环形进度条下次再讲！）
这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。
以第一个为例：
这种比较简单，只需要两个 div 标签就可以了（一个标签也可以实现，后文会讲到）
原理介绍：
外层 div 用来显示进度条总长度以及背景色；内层div用来显示当前进度条进度，和当前进度条颜色。
结构如下：
样式如下：
此时效果如下：
只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.
** 第二种带原点的进度条 **
此时实现原理跟第一种类似，只是背景色替换成了背景图片，图片如下：
这两个图片除了颜色不一样以外其他是一样大小的！
如果上面的能理解我想这个就不难理解了吧，不过为了显得文章完整还是简单做一个demo如下：
效果如下：
