js-withjq_website
/
shz_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keyword" content="博豪书店">
    <meta name="description" content="博豪书店专卖正版">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="icon" href="images/favicon.ico">
    <title>商品详情</title>
    <style>
        .detail{
            border: 1px solid #cccccc;
            position: relative;
        }
        .details{
            width: 500px;
            line-height: 30px;
        }
        .j_jie{
            position: absolute;
            top: 20px;
            left: 160px;
        }
        .miao_kill{
            position: relative;
            top: 20px;
            border: 1px solid #cccccc;
        }
        .m_s{
            position: absolute;
            top: 0 ;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="nav">
        <div>
            <ul>
                <li><span id="collection">★收藏本站</span></li>
                <li><span id="welcome"></span>您好，欢迎光临博豪书店！</li>
                <li><a href="login.html">登录</a><a href="register.html">|注册</a></li>
                <!--                <li><a href="new.html">新手入门</a><b></b></li>-->
                <!--                <li><a href="myCount.html">我的账户</a><b></b></li>-->
                <li><a href="help.html">帮助中心</a><b></b></li>
                <li><a href="write.html">留言板🖊</a></li>
            </ul>
        </div>
    </div>
</div></div>
    <div class="C_T" style="width: 1200px;height: 650px;margin: 20px auto">
        <div><h1 style="font-size: 30px">商品详情</h1></div><br>
        <div class="detail">
            <img src="images/shz.jpg" alt="红楼梦" style="height: 200px;width: 150px; border: 2px solid red" class="shop">
            <div class="m_s" style="background-color: #cccccc;opacity: 0.5;height: 0px;width: 150px;"></div>
            <div class="j_jie" style="width: 1200px">
                <span><strong>商品名称：<span style="color: #ff760f">《水浒传》</span></strong></span><br>
                <span><strong>简介：</strong></span><p style="width: 1040px" class="details">《水浒传》，中国古代四大名著之一章回体长篇小说，成书于1784年（清乾隆四十九年），梦觉主人序本正式题为《红楼梦》。其原名有《石头记》、《情僧录》、《风月宝鉴》、《金陵十二钗》等。前80回曹雪芹著，后40回无名氏续，程伟元、高鹗整理。本书是一部具有高度思想性和高度艺术性的伟大作品，作者具有初步的民主主义思想，他对现实社会、宫廷、官场的黑暗，封建贵族阶级及其家族的腐朽，对封建的科举、婚姻、奴婢、等级制度及社会统治思想等都进行了深刻的批判，并且提出了朦胧的带有初步民主主义性质的理想和主张。</p>
                <span style="color: darkorange;font-size: 10px"><span><strong>优惠:</strong></span>【6.8折抢购】</span>
            </div>
        </div>
        <div class="miao_kill">
            <p style="background-color: #cc6f1f">书籍秒杀</p>
            <span><span style="font-size: 18px">价格：</span><span style="text-decoration:line-through;opacity: 0.7;font-size: 12px">￥1099</span><span style="font-size: 18px;color: darkorange">￥600元</span></span>
            <div>
                <button id="bnt" style="margin-top: 20px">加入购物车</button>
            </div>
        </div>
    </div>
    <div class="navService">
        <a href="index.html" class="mywinxuan"></a>
        <a href="Cart.html" class="cart"></a>
        <a href="write.html" class="service J_service_nav"></a>
    </div>
</div>
<div class="footer">
    <span>Copyright(c):张德豪 版权所有 0898-26805653</span>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
<script src="js/index_jQueryCode.js"></script>
<script>
    $(document).ready(function () {
        $('#more').click(function(){
            $('#details').css('display','block');
            $('#more').css('display','none');
        });
        $('.shop').hover(function () {
            $('.m_s').animate({height:'200px'},1000);
        },function () {
            $('.m_s').animate({height:'0px'},1000);
        });
        $('#bnt').click(function(){
            alert('加入购物车成功！');
        });
    });
</script>
</body>
</html>