达乐居视频网前台页面的总结

这几天在公司做静态页面，因为之前从来没有自己单独用div+css完成页面，趁着这个平台总结一下，以免遗忘。

第一天做页面因为不懂div的浮动所以一上午都是在捉摸不定，下午改用table做页面，虽然能很快的做好，但是好像不利于推广

周末回宿舍看会儿Dreamweaver然后周一上班显然比第一天好很多，用了6个小时做完一个页面虽然现在看还是觉得不美观，但还是学到了很多

1.div层叠、透明

1       <div class="f2"><img src="img2/f2.png"  class="f2"/></div>
2             <div class="blk">123</div>
3              <div class="text" >郑州七旬老人住坟场&nbsp;&nbsp;拒救助</div>

View Code

.f2
{
    z-index:1;
    width:481px;
    height:241px;
    position:relative;
}
.blk
{
        margin-top:-20px;
        background-image:url(../img2/black1.png);
        z-index:2;
        width:481px;
        alpha(opacity=50);  /*支持 IE 浏览器*/
        -moz-opacity:0.50; /*支持 FireFox 浏览器*/
        opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/      
        position:absolute;
}
.text
{
    z-index:3;
    color:#FFF;
    margin-top:-18px;
    position:absolute;
}

View Code

2.li中的设置

.ul1 {
    list-style-type:none;
    margin:0;
    padding:0;
}
.ul1 li {
    background: no-repeat  url(../img2/icon3.png) 5px;
    line-height: 25px;
    padding-left: 15px;
    list-style-type:none;
}
.ul1 li a{ color:#000000;}
.ul1 li a:hover{ color:#FF0000;}

View Code