ACCP 8.0 jQuery 第八章上机练习

最新推荐文章于 2022-12-01 22:47:05 发布

Andy丶小海

最新推荐文章于 2022-12-01 22:47:05 发布

阅读量757

点赞数 1

文章标签： jquery css html

本文链接：https://blog.csdn.net/qq2104418373/article/details/118355136

版权

这篇博客详细介绍了ACCP 8.0 jQuery课程的四个上机练习，包括对应的CSS样式和HTML结构。通过这些练习，读者可以深入理解jQuery在实际网页开发中的应用。

摘要由CSDN通过智能技术生成

上机练习1：

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;

}

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>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $(".box dl").hover(function(){
            $(this).addClass("hoverstyle");
        },
        function(){
            $(this).removeClass("hoverstyle");
        }
        )
    })
</script>
</html>

上机练习2：

CSS:

* {
    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 {
    word-break: break-all;
    background-color: darkgray;
    border-radius: 5px;
}

HTML:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="U

最低0.47元/天解锁文章

Andy丶小海

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ACCP 8.0 jQuery 第八章 上机练习

上机练习1：

CSS:

HTML:

上机练习2：

CSS:

HTML:

ACCP 8.0 jQuery 第八章上机练习