HTML特效之团购页面效果

用户9184480

发布于 2024-12-19 09:44:50

10600

代码可运行

文章被收录于专栏：云计算linux

运行总次数：0

代码可运行

HTML页面代码

<!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;
}

效果展示：