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

最新推荐文章于 2019-07-10 15:32:04 发布

不觉清倦

最新推荐文章于 2019-07-10 15:32:04 发布

阅读量3.1k

点赞数 3

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

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

版权

上机一
样式

body,ul,li,div,p,h1,h2{margin: 0;padding: 0;}
ul,li{list-style: none;}
.content{width: 810px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    background: url("../Image/sj1(2).jpg") no-repeat;
    height: 414px;
    overflow: hidden;
}
.cartList ul{
    float: right;
    width: 100px;
    margin-top: 110px;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}
.cartList ul li:nth-of-type(3){margin-top: 60px;}
.cartList ul li:nth-of-type(5){margin-top: 80px;}
.cartList span{
    display: inline-block;
    float: right;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    margin-top: 5px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;
}

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>广告页面</title>
</head>
<body>
    <img src="../image/adver.jpg" />;
</body>
</html>

<!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_adv();">
<div class="content">
    <div class="logo">
        <img src="../image/sj1(1).jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li onclick="shouc()">移入收藏</li>
            <li onclick="deletes()">删除</li>
            <li onclick="shouc()">移入收藏</li>
            <li onclick="deletes()">删除</li>
            <li><span onclick="jiesuan()">结 算</span></li>
        </ul>
    </div>
    <script type="text/javascript" >
        //弹出窗口
        function open_adv() {
            window.open("GuangKao.html", "", "height=500,width=600,left=500,top=300");
        }
        //关闭窗口
        function close_plan() {
            window.close();
        }
        //收藏
        function shouc(){
            var flag = confirm("移入收藏后,将不在购物车显示,是否继续操作?");
            if (flag == true) {
                alert("移入收藏成功!");
            } else {
                alert("移入收藏取消!");
            }
        }
        //删除
        function deletes(){
            var flag = confirm("您确定要删除商品吗?");
            if (flag == true) {
                alert("删除成功!");
            } else {
                alert("删除取消!");
            }
        }
        //结算
        function jiesuan(){
            var flag = confirm("您本次购买的商品信息如下:\n商品名称:白岩松\n商品数量:2件\n商品总计:46.00元\n运费:0元\n请确认以上信息是否有误!!!");
            if (flag == true) {
                alert("您的订单已提交!");
            } else {
                alert("您的订单已取消!");
            }
        }
    </script>
</div>
</body>
</html>

上机二
代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>秋天</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        img {
            border: 0;
            padding: 5px;
        }

        td {

最低0.47元/天解锁文章

不觉清倦

关注

3
点赞
踩
18

收藏

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

上机一样式body,ul,li,div,p,h1,h2{margin: 0;padding: 0;}ul,li{list-style: none;}.content{width: 810px; margin: 0 auto;}.logo{margin: 10px 0;}.logo span{ display: inline-block; float: right; ...
复制链接

扫一扫