码迷,mamicode.com
首页 > Web开发 > 详细

团购网站开发页面

时间:2020-05-09 00:52:58      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:tle   效果   pad   img   text   sheet   size   link   jpg   

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>今日团购模块 </title> <link rel="stylesheet" href="css/shopping.css"> </head> <body> <div id="pruduce"> <div class="top"></div> <div class="main"> <div class="box"> <dl> <dt><img src="images/pic1.jpg" /></dt> <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd> </dl> <div class="btprice_1"></div> </div> <div class="box"> <dl> <dt><img src="images/pic2.jpg" /></dt> <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div class="btprice_2"></div> </div> <div class="box"> <dl> <dt><img src="images/pic3.jpg" /></dt> <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd> </dl> <div class="btprice_3"></div> </div> </div> </div> <script src="js/jquery-1.12.4.js" ></script> <script> $(document).ready(function(){ $(".box dl").hover(function(){ $(this).addClass("hoverstyle"); },function(){ $(this).removeClass("hoverstyle"); }); }); </script> </body> </html>

CSS:

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
#pruduce{
    width:947px;
    background-color:#F2F2F2;
}
.top{
    height:55px;
    background:url(../images/top.jpg) no-repeat 10px 10px;
}
.main{
    text-align:center;
    height:309px;
}
.box{
    width:300px;
    height:285px;
    border:1px solid #999;
    margin:0px 6px;
    float:left;
    cursor:pointer;
}
dl{
    padding-top:3px;

}
dd{
    line-height:30px;
}

div.btprice_1{
    height:50px;
    background:#FFF2CE url(../images/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
    height:50px;
    background:#FFF2CE url(../images/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
    height:50px;
    background:#FFF2CE url(../images/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
    background-color:#D51938;
    color:#fff;
}

效果:
技术图片

团购网站开发页面

标签:tle   效果   pad   img   text   sheet   size   link   jpg   

原文地址:https://blog.51cto.com/2096101/2493331

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!