SOURCE

<p id="para1">Hello World!</p>
<ul class="border1">
  <li class="font1">ul</li>
  <ul>
  <li>设置列表样式类型为没有删除列表项标记</li>
  <li>设置填充和边距0px（浏览器兼容性）</li>
    </ul>
  <li class="font1">ul中所有li:</li>
  <ul>
  <li>设置图像的URL，并设置它只显示一次（无重复）</li>
  <li>您需要的定位图像位置（左0px和上下5px）</li>
  <li>用padding-left属性把文本置于列表中</li>
    </ul>
  </ul>
<div>
  This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.
  </div>

body{
  font-family:  "lucida calligraphy",arial,'sans serif';
  background-color:#b0c4de;
}
#para1
{
	text-align:center;
	color:red;
} 
.border1
{
  text-align:  left;
  color: blueviolet;
  font-family:  微软雅黑;
  border: 3px solid blue;
  margin-top: 3px;
  padding: 25px;
}
.font1
{
  font-size:  110%;
  line-height: 180%;
  text-shadow: 1px 1px #ff0000;
}
div 
{
  text-alignalign: left;
  background-color: lightgrey;
  border: 10px solid green;
  padding: 25px;
  margin: 25px;
}