在前端网页制作中，使用最多的一个便是新闻列表。所以在这堂课中，介绍的就是如果制作符合标准化，易于控制，易用性较强的新闻列表。
新闻列表一：两端对齐之新闻列表
两端对齐之新闻列表，使用position的相对和绝对定位，来打造效果相对比较稳定的新闻列表。如下例子：
提示：你可以先修改部分代码再运行。
其中在dd中有如下设置，可以避免文字叠加
dl.news dd{
margin:0 5px;
padding:2px 70px 0 0;/* 70px 是预留给右边时间的宽度 */
position:relative;
height:auto;
min-height:22px;
_height:22px;
line-height:18px;
border-bottom: dashed 1px #ddd;
}
神奇创意相框！ 是的，主要利用position的relative, absolute, z-index属性。结合Photo Frame（相框）的不规则性，来“裁剪”出具有不同Magic（神奇？）的相框效果。
先看例一，如果让Photo Frame（相框）遮罩目标的相片？
提示：你可以先修改部分代码再运行。
在这里，主要应用magic1的背景图片，结合具有相对定位元素的em，再加上z-index。使得em中的背景可以遮罩在相片之上。
接着，我们需要修饰下，希望鼠标浮动的时候会产生提示效果的文字，并且结合半透明的css参数
filter:alpha(opacity=70); /* for ie */
-moz-opacity: 0.7; /* for ff */
opacity: 0.7; /* for other */
使得鼠标浮动到照片上，出现遮罩效果，并且出现提示文字。再次看例子：
提示：你可以先修改部分代码再运行。
怎么样，效果是不是不错呢？既然不错的效果，顺便发挥下思维方向，扩散思维模式。再次做跟多的例子：
提示：你可以先修改部分代码再运行。
嗯，看到例子，你想说写什么呢? 创意，在于思考与练习中产生，就这样。
常用的CSS控制的导航菜单中，使用频率最多的无序列表添加float:left来使得li位于一行。
然而，在li元素进行float:left操作后，菜单的水平居中就成为一个比较棘手的话题。以下文章中，
使用以上方案调整后，具有float:left的菜单就可以实现水平居中效果。
具体看float:left后的水平居中菜单实例:
提示：你可以先修改部分代码再运行。