夜光带你走进 前端工程师（十四）

夜光序言：

 

 

 

 

平静湖面之下 隐隐暗潮涌动 天使面容背后 笑容宛如恶魔

 

 

 

 

正文：

 

如何理解下面这句话：夜光

<li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a><span>新潮新品布料涤纶系列</span></li>

 

在图片下面添加：新潮新品布料涤纶系列

 

.cp_c  li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    width: 151px;
    height: 96px;
    overflow: hidden;
    position:relative;
}
.cp_c span{
    position: absolute;
}

---

.cp_c li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    width: 151px;
    height: 96px;
    overflow: hidden;
    position:relative;
}
.cp_c span{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
    height: 20px;
    width:131px;
    padding: 0 10px;
    color: #fff;
    background: darkred;
   /* color: #fff;*/  /*   //放在背景之上*/
}

---

来一个高级操作：

.cp_c span{
    display: none;         //关键
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
    height: 20px;
    width:131px;
    padding: 0 10px;
    color: #fff;
    background: darkred;
    overflow: hidden;
   /* color: #fff;*/  /*   //放在背景之上*/
}
.cp_c li a:hover span{        //关键
    display: block;                        //关键
} 

---

底部处理

 

/*
底部处理：夜光设计最后一步*/
.footer{
    height: 103px;
    width: 100%;
    background: url("footer_bg.jpg") repeat-x;
}