" target="_blank" >http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg
) no-repeatbackground-position: centerbackground-attachment: fixed} /*版权所有cole,coleyinhe@163.com,QQ356572960,允许复制，但请保留该版权信息，否则将动用技术手段破坏！*//*注释说明：如需要修改各分类或者评论以及友情连接这些的那框的高度，超过高度后自动出现滚动条的，那么这个高度设置就是下边注释中 height:500px 这里，height代表高度的意思，500px代表高度尺寸，可以自己设置成1000px 2000px 100px等等*//*色彩配置的注释说明：如需要修改各地段色彩类，请修改代码内如#FFFFFF的，这里使用的是16进制的，可以在一些做图的软件上的调色板里，找到你要的颜色，一般上边都会有一个代码，这个就是这里写的代码了*//*其实CSS样式表的语法格式很简单的，即使不会的人，上边很多语法都是用英文单词的，还有一些参数值，会ASP这些技术的人应该都会啦。。*/#header{height:89pxbackground:url() repeat-x }/*这里是蓝色的那块，就是LOGO后边的那，他是一个小图片，然后拉伸得到的，你也可以直接放大图，但尽量是1024长度的，不然会出现多个相同图片的效果*/#header div.lc{}#header div.rc{background:url(http://zz53.com/images/111.gif) no-repeat top right}/*这里是蝴蝶的那LOGO的地方修改里边的地址即可修改LOGO*/#header div.tit{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}#header div.tit a.titlink{color:#FFFFFFtext-decoration:none}#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}#header div.desc{top:33pxleft:20pxcolor:#FFFFFFfont-size:13px}#tabline{top:89px}/*#tab{top:67pxbackground:#0186E9}*/#tab{top:67pxbackground:filter:alpha(opacity=50)} /*这里有部分是那导航栏的*/#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:0pxline-height:22pxbackground-color:#7CC7FFcolor:#000000font-size:14px}#tab span{color:#FFFFFFfont-size:14px}#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px} #tab2{background:#DAE9F5}#tab2 span{color:#000000font-size:12pxfont-weight:bold}#tab2 a{font-size:12px}#tab2 a:link{color:#0000CC}#tab2 a:visited{color:#0000CC} /*这里这堆是顶部的*//* .stage{background:url(http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg
" target="_blank" >http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg
) bottom no-repeat }*/ /*这里是背景图片*/.stage{}#comm_info{color:#666666font-family:Arialtext-align:left}#comm_info div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECECbackground:url(http://www.ip.cn/s.php) no-repeat bottompadding-bottom: 40pxmargin-bottom: 10px}background:url(http://www.ip.cn/s.php) no-repeat bottompadding-bottom: 40pxmargin-bottom: 10px#comm_info a{color:#1A991E}#page{height:30pxfont-size:14pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#000000font-size:14pxfont-weight:bold}#page a.pc{color:#1A991Efont-size:14pxfont-weight:bold}#page a.pc:visited{color:#1A991E}#page a.pi{padding:3pxcolor:#1A991Efont-size:14px}#page a.pi:visited{color:#1A991E}.mod{margin-bottom:10px}.modhandle{cursor:move}.modth{height:24px}.modhead{padding:4px 4px 0 4px}.modopt{padding:4px 4px 0 0}.modtit{color:#0092FFfont-size:12pxfont-weight:bold}a.modtit{color:#0092FF}a.modtit:visited{color:#0092FF}.modtitlink{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtitlink{color:#FFFFFFtext-decoration:none}a.modtitlink:visited{color:#FFFFFFtext-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:underline}.modact{color:#0092FFfont-size:12px}a.modact:link{color:#0092FF}a.modact:visited{color:#0092FF}.modbox{padding:10px 10px 0 10pxbackground-color:#FFFFFFborder-left:1px solid #FFFFFFborder-right:1px solid #FFFFFF}.modtl{background:url(http://img.baidu.com/hi/temp7/ptitl.gif) no-repeat top leftline-height:1px}.modtc{background:url(http://img.baidu.com/hi/temp7/ptitc.gif) repeat-x}.modtr{background:url(http://img.baidu.com/hi/temp7/ptitr.gif) no-repeat top rightline-height:1px}.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=60)-moz-opacity:0.8width:auto !importantwidth:100%}/*上面这行是透明度的设置，也就是页面和背景的透明度，opacity=60这里可以自己修改，60表示60%的意思*/.modbl{background-color:#FFFFFFborder-left:1px solid #FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}.modbc{background-color:#FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}.modbr{background-color:#FFFFFFborder-right:1px solid #FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}#m_blog{overflow-y:autoheight:500pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*文章的那滚动条*/#m_blog div.tit{color:#8A3506font-size:14pxfont-weight:boldbackground:url(http://zz53.com/images/222.gif) no-repeat top lefttext-indent: 22pxheight:70pxline-height:75px}#m_blog div.tit a{color:#1A991Efont-size:14pxfont-weight:bold}#m_blog div.tit a:visited{color:#1A991E}#m_blog div.date{margin:5px 0 8px 0color:#999999}#m_blog div.cnt{color:#666666line-height:20pxfont-size:14px}#m_blog div.more{margin:14px 0 16px 0}#m_blog div.more a{color:#1A991Efont-size:14px}#m_blog div.more a:visited{color:#1A991E}#m_blog div.opt{color:#999999font-size:12px}#m_blog div.opt a{color:#1A991Efont-size:12px}#m_blog div.opt a:visited{color:#1A991E}#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#m_blog div.none{padding:100px 0 100px 0color:#666666font-size:14px}/*标题的框*/#m_pro a{color:#1A991E}#m_pro a:visited{color:#1A991E}#m_pro div.image{text-align:center}#m_pro div.act{margin-top:10px}#m_pro div.user{margin-top:10pxcolor:#666666font-size:12pxfont-weight:bold}#m_pro div.desc{color:#666666font-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#m_pro td{color:#666666line-height:24pxfont-size:14px}#m_album{overflow-x:autoheight:250px} /*这里因为如果没有此限制参数，大图片的时候可能造成整个框架的变形，所以务必保留此项，如不喜欢可以在前面加/*或直接删除即可*/#m_album{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*这里是图片也就是像册的那滚动条*/#m_album div.image{text-align:center}#m_album div.page{color:#666666font-size:12pxtext-align:center}#m_album div.page a{color:#0000CCfont-size:12px}#m_album div.page a:visited{color:#0000CC}#m_links{overflow-y:autoheight:200pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*友情连接的那里*/#m_links div.item{color:#666666font-size:12px}#m_links div.item a{color:#1A991Efont-size:12pxtext-decoration:none}#m_links div.item a:visited{color:#1A991E}#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_artclg{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*文章分类的那滚动条*/#m_artclg div.item{color:#666666font-size:12px}#m_artclg div.item a{color:#1A991Efont-size:12px}#m_artclg div.item a:visited{color:#1A991E}#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_filed div.item{color:#666666font-size:12px}#m_filed div.item a{color:#1A991Efont-size:12px}#m_filed div.item a:visited{color:#1A991E}#m_filed div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_comment{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*最新评论的那滚动条*/#m_comment div.item{color:#666666font-size:12px}#m_comment div.item a{color:#1A991Efont-size:12px}#m_comment div.item a:visited{color:#1A991E}#m_comment div.item a.cnt{color:#666666font-size:12pxtext-decoration:none}#m_comment div.item a.cnt:visited{color:#666666text-decoration:none}#m_comment div.item a.cnt:hover{color:#666666text-decoration:underline}#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_albumlist div.note{color:#666666font-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#666666font-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #ECECEC}#m_albumlist div.tit{margin:6px 0 7px 0color:#666666font-size:14px}#m_albumlist div.tit a{color:#1A991Efont-size:14px}#m_albumlist div.tit a:visited{color:#1A991E}#m_albumlist span.count{color:#666666font-size:12pxfont-weight:bold}#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#1A991Efont-size:12px}#m_albumlist a.act:visited{color:#1A991E}#m_albumlist a.page{color:#0000CCfont-size:14px}#m_albumlist a.page:visited{color:#0000CC}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#FFFFFF}/*这里是像册列表的，就是点导航栏后进入的像册*/#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#666666font-size:12px}#m_friend div.user a{color:#1A991Efont-size:12px}#m_friend div.user a:visited{color:#1A991E}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #ECECEC}#m_setting a{color:#1A991E}#m_setting a:visited{color:#1A991E}#m_setting{line-height:22pxcolor:#666666font-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#666666}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #ECECEC}#m_sysinfo a{color:#1A991E}#m_sysinfo a:visited{color:#1A991E}#m_sysinfo{line-height:22pxcolor:#666666font-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#666666font-size:14px}#m_setbase{color:#666666font-size:14px}#m_setbase td{color:#666666font-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#in_comment{width:710px}#in_comment div.tit{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#666666font-size:12px}#in_comment div.user a{color:#1A991Efont-size:12px}#in_comment div.user a:visited{color:#1A991E}#in_comment div.user span.date{color:#666666font-size:12px}#in_comment div.desc{color:#666666font-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#in_send div.tit{margin:10px 0 10px 0color:#666666font-size:14pxfont-weight:bold}
给你做了一个，美化的工作交给你啦，不过我看还可以，兼容性没什么问题。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#zhuti{
width:280px
}
#uu{
margin:0px
padding:0px
}
.h{
width:280px
margin:0px
list-style-type: none
font-size:13px
color:#0066FF
line-height:39px
padding-left:15px
}
.xianshi{
width:280px
height:45px
border:2px #FF9900 solid
background-color:#FFF3E8
padding-top:10px
margin:0px
list-style-type: none
font-size:12px
font-weight:bold
color:#0066FF
padding-left:15px
display:none
}
-->
</style>
<script>
var num=12//确定li数量。
function a() //网页加载的时候设置li背景颜色。
{
var a=document.getElementById("uu").getElementsByTagName("li")
for(var i=0i<numi++)
{
if((i%2)==1) a[i].style.display="none"
if((i%4)==0) a[i].style.backgroundColor="#dddddd" //设置li的背景颜色。
}
}
function over(n)
{
var a=document.getElementById("uu").getElementsByTagName("li")
for(var i=0i<numi++) //一个循环让鼠标经过的li显示对应的装有详细内容的li。
{
if((i%2)==1) a[i].style.display="none"
else
a[i].style.display="block"
}
a[n].style.display="none"
a[n+1].style.display="block"
}
</script>
</head>
<body onload="a()">
<div id="zhuti">
<ul id="uu">
<li class="h" onmouseover="over(0)">知性OL－简约大方通勤必备 </li>
<li class="xianshi">知性OL－简约大方通勤必备知性OL－简约大方通勤必备<br /><font color="#CC0000">淘宝价：xx</font></li>
<li class="h" onmouseover="over(2)">淑女系－可爱小女生最爱 </li>
<li class="xianshi">淑女系－可爱小女生最爱淑女系－可爱小女生最爱<br /><font color="#CC0000">淘宝价：xx</font></li>
<li class="h" onmouseover="over(4)">时尚派－柱形手提斜挎女包 </li>
<li class="xianshi">时尚派－柱形手提斜挎女包时尚派－柱形手提斜挎女包<br /><font color="#CC0000">淘宝价：xx</font></li>
<li class="h" onmouseover="over(6)">蝴蝶结－闪金淡蓝可爱单鞋 </li>
<li class="xianshi">蝴蝶结－闪金淡蓝可爱单鞋蝴蝶结－闪金淡蓝可爱单鞋<br /><font color="#CC0000">淘宝价：xx</font></li>
<li class="h" onmouseover="over(8)">坡跟鞋－韩版甜美坡跟凉鞋 </li>
<li class="xianshi">坡跟鞋－韩版甜美坡跟凉鞋坡跟鞋－韩版甜美坡跟凉鞋<br /><font color="#CC0000">淘宝价：xx</font></li>
<li class="h" onmouseover="over(10)">高跟鞋－复古小名媛圆头鞋 </li>
<li class="xianshi">高跟鞋－复古小名媛圆头鞋高跟鞋－复古小名媛圆头鞋<br /><font color="#CC0000">淘宝价：xx</font></li>
</ul>
</div>
</body>
</html>
这是用html和css写出的页面
怎么才能达到这种效果
先看源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title></title>
</head>
<body>
<div>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了，一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回
迷藏。风轻悄悄的，草绵软软的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已
经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，
像眼睛，像星星，还眨呀眨的。</p>
</div>
</body>
</html>
div{
height: 600pxwidth: 416px /*定义盒子高度和宽度*/
border: solid 1px red /*border-width, border-style,和border-color.*/
padding: 115px 4em 0
/*为了避免背景图像重复平铺到边框区域，应禁止他平铺*/
background: url(../img/p3.jpg) no-repeat
/*设计背景图像的定位坐标点为元素边框上的左上角*/
background-origin: border-box /*相对位置*/
background-size: cover
overflow: hidden /*overflow属性指定如果内容溢出一个元素的框，会发生什么。*/
/*visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/
}
/*定义标题*/
div h1{
font-size: 18pxfont-family: "幼圆"
text-align: center
}
/*定义文章*/
div p{
text-indent: 2em/*text-indent 属性规定文本块中首行文本的缩进*/
line-height: 2em/*行高*/
font-family: "楷体"
margin-bottom: 2em
}
后面的细节慢慢挑出来演示一下。
