1、打开Dreamweaver软件，新建一个html页面，保存成为html。
2、在body中进行书写，先写div如图，写三个div板块。
3、用css对div进行控制，一种方式是直接使用内联样式，也就是直接在html中的style中进行书写div的css样式。
4、保存，运行，测试效果，在chrome浏览器中打开。
5、新建一个css样式，保存为style.css。在style.css中书写css样式。
6、保存，运行，测试效果，在浏览器打开。
不行，如果是使用css自带的list-style属性定义前面的小圆点则不同浏览器，不同版本均有自己的解析方法，无法通过css实现具体控制，淘宝的是背景图片，使用css的list-style定义不确定因素太大，如果要求严格美观的页面布局应该在整个css中预先就清除列表元素的list-style属性然后用背景图片实现效果可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto就可以实现了；现在来看下面一段代码：
CSS样式设置：
#info_main{text-align:centerborder:1px solid
#CCCwidth:620px}
#info_main li{width:autofloat:leftmargin:0px 8px
padding:0pxborder:1px solid #CCC}
网页代码：
<div
id="info_main">
<ul>
<li>时间：{dede:field name='pubdate'
function='strftime("%Y-%m-%d %H:%M","@me")'
/}</li>
<li>来源：{dede:field.source/}</li>
<li>作者:{dede:field.writer/}</li>
<li>点击:<script
src="{dede:field
name='phpurl'/}/count.php?view=yes&aid={dede:field
name='id'/}&mid={dede:field name='mid'/}"
type='text/javascript'
language="javascript"></script>次</li>
</ul>
</div>
显示效果如下图：
