使用JQuery快速高效制作网页交互特效第八章所有上机

最新推荐文章于 2022-07-07 01:33:56 发布

VIP文章不觉清倦

最新推荐文章于 2022-07-07 01:33:56 发布

阅读量1.1w

点赞数 11

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44269168/article/details/94394863

版权

上机一

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
#pruduce{
    width:947px;
    background-color:#F2F2F2;
}
.top{
    height:55px;
    background:url(../Image/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(../Image/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
    height:50px;
    background:#FFF2CE url(../Image/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
    height:50px;
    background:#FFF2CE url(../Image/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
    background-color:#D51938;
    color:#fff;
}

<!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="../Image/pic1.jpg" /></dt>
                <dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
            </dl> 
            <div class="btprice_1"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="../Image/pic2.jpg" /></dt>
                <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> 
            </dl> 
             <div class="btprice_2"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="../Image/pic3.jpg" /></dt>
                <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
            </dl> 
             <div class="btprice_3"></div>
        </div>
    </div> 
</div>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
       $(".main div").mouseover(function(){
           $(this).find("dl").addClass("hoverstyle");
       }).mouseout(function(){
           $(this).find("dl").removeClass("hoverstyle");
       })
    })
</script>
</body>
</html>

上机二

* {
    margin: 0;
    padding: 0;
    line-height: 22px;
    font-family: "Arial", "微软雅黑";
}

#chat {
    margin: 3px auto 0 auto;
    width: 436px;
    border: 1px #999999 solid;
}

.chatBody {
    width: 100%;
    height: 220px;
    overflow: auto;
}

.chatText {
    border: none;
    width: 100%;
    height: 50px;
}

.btn {
    text-align: right;
}

.btn span {
    display: inline-block;
    padding: 0 10px;
    height: 25px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 5px;
    background-color: #069dd5;
    font-size: 12px;
    margin-right: 3px;
    cursor: pointer;
}
.a {
    background-color: grey;
    border-radius: 5px;
}
 .chatBody div{display: inline-block}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="../cs

最低0.47元/天解锁文章

不觉清倦

关注

11
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery快速高效制作网页交互特效第八章所有上机

上机一*{ margin:0px; padding:0px; font-size:12px;}#pruduce{ width:947px; background-color:#F2F2F2;}.top{ height:55px; background:url(../Image/top.jpg) no-repeat 10px 10px...
复制链接

扫一扫