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

最新推荐文章于 2024-04-02 16:11:50 发布

SpicyStriplt

最新推荐文章于 2024-04-02 16:11:50 发布

阅读量1.5w

点赞数 19

分类专栏： JQuery 文章标签：北大青鸟 JQuery制作特效第二章（上机练习

本文链接：https://blog.csdn.net/SpicyStriplt/article/details/94855058

版权

北大青鸟 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" /></td>
  </tr>
  <tr>
    <td><a href="javascript:location.href = 'spring.html'">春</a></td>

最低0.47元/天解锁文章

SpicyStriplt

关注

19
点赞
踩
107

收藏

觉得还不错? 一键收藏
4
评论
北大青鸟 JQuery制作特效第二章（上机练习

北大青鸟 JQuery制作特效第二章（上机练习练习一丶制作简易的当当购物车页面<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>制作简易的当当购物车页面</title> <link type="tex...
复制链接

扫一扫