北大青鸟 JQuery制作特效 第二章 (上机练习

这篇博客是北大青鸟JQuery特效制作的第二章上机练习,包括四个部分:一、创建简易当当购物车页面;二、展示一年四季变化的交互效果;三、进一步完善购物车页面;四、实现12进制时钟特效。通过这些实践,读者将加深对JQuery的理解和应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

北大青鸟 JQuery制作特效 第二章 (上机练习

练习一丶制作简易的当当购物车页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作简易的当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body onload="open();">

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="closeAll()">关闭</span>
    </div>
    <div class="cartList">
        <ul7>
            <li>移入收藏</li>
            <li>删除</li>
            <li>移入收藏</li>
            <li>删除</li>
            <li><span>结 算</span></li>
        </ul7>
    </div>
    <script type="text/javascript">
        //开
        function open(){
            window.open("adv.html","","");
        }
        function closeAll(){
            window.close();
        }
    </script>
</div>
</body>
</html>

//这是adv.html内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <h1><span>我是弹出来的</span></h1>
</body>
</html>

练习二丶查看一年四季的变化
主页面:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>查看一年四季的变化</title>
<style type="text/css">
table{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top:1px #cccccc solid;
	border-left:1px #cccccc solid;
	width:400px;
	}
img{
	border:0;
	padding:5px;    
	}
td{
	font-size:14px;
	line-height:25px;
	text-align:center;
	border-bottom:1px #cccccc solid;
	border-right:1px #cccccc solid;
	}
</style>
</head>

<body><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/1.jpg" /></td>
    <td><img src="images/2.jpg
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值