WEB前端-JS-动态购物页面V1

最新推荐文章于 2024-03-09 23:58:33 发布
VIP文章白金牧场
最新推荐文章于 2024-03-09 23:58:33 发布
阅读量3.7k
点赞数 6
分类专栏： Web-Dev相关 WEB三把刀使用介绍文章标签： javascript web前端 css html 动态页面
本文链接：https://blog.csdn.net/qq_34409701/article/details/52333514
版权
终于将静态页面改成动态了，本次主要使用js&dom、jquery等来实现，目前只是将部分功能动态了，代码看这里：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
    <meta http-equiv="refresh" Content="300"/>
    <meta name="keywords" content="shopping_car"/>
    <title>MyShopCar</title>
    <link rel="shortcut icon" href="p3.png"/>
    <!--css start-->
    <style type="text/css">
        /*返回顶部*/
        .b3_backtotop {
            border:2px solid burlywood;
            width:50px;
            height:50px;
            position:fixed;
            bottom:0;
            right:0;
            background-image:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D8a7e333a43166d223877159c76220945%2Fe9e336d3d539b600e576bb46e950352ac75cb7b1.jpg&thumburl=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1974011879%2C1336495790%26fm%3D21%26gp%3D0.jpg);
            background-position:-107px -90px;
            cursor:pointer;
        }
        /*背景*/
        .b4{
            display:block;
            margin:0 auto 0;
            padding:0;
            background:#fff;
            clear:both;
            z-index: 9;
        }
        /*失效效果*/
        .hide{
            display:none;
        }
        /*遮罩层*/
        .shadow{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:gray;
            opacity:0.6;
            z-index: 10;
        }
        /*对话框*/
        .b1{
            width:900px;
            height:400px;
            position: fixed;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-450px;
            font-size:18px;
            font-weight:700;
            background:#F1F1F1;
            border:2px dashed gray;
            overflow:auto;
            z-index: 12;
        }
        .b1 table{
            width:900px;
            text-align: center;
            background-color:pink;
            border-top:1px solid indianred;
            border-bottom:1px solid indianred;
        }
        .b1 table thead tr th{
            padding:0 5% 0 5%;
            line-height: 24px;
            height:26px;
            font-size:20px;
            font-weight:600;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
            text-align: center;
        }
        .b1 table tbody tr td{
            padding:0 10px 0 10px;
            line-height: 24px;
            height:26px;
            font-size:14px;
            font-weight:400;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
            text-align: center;
            cursor:pointer;
        }
        .b1 table tbody tr td div{
            padding:0;
            width:180px;
            height:25px;
            float:right;
        }
        .b1 table tbody tr td div div{
            padding:0;
            margin:0;
            width:25px;
            height:25px;
            background-color: white;
            text-align: center;
            float:left;
        }
        .b1 table tbody tr td div input{
            padding:0;
            width:126px;
            height:25px;
            border:0;
            float:left;
        }
        /*顶部项目区*/
        .b5_top{
            width:100%;
            height:250px;
            position: relative;
        }
        .b5_top .b5_top_target{
            margin:0 auto 0;
            width:1350px;
            height:30px;
            font-size:14px;
            overflow: hidden;
        }
        .b5_top .b5_top_target .b5_top_target_left{
            margin-left:30px;
            width:90px;
            line-height:30px;
            float:left;
            cursor:pointer;
        }
        .b5_top .b5_top_target .b5_top_target_right{
            margin-right:10%;
            width:600px;
            height:30px;
            float:right;
        }
        ul{
            margin:0;
            list-style-type:none;
        }
        .b5_top .b5_top_target .b5_top_target_right .b5_top_target_right_tip{
            line-height:30px;
            border-left:1px dashed gray;
            border-right:1px dashed gray;
            padding:0 14px 0 14px;
            cursor:pointer;
            float:left;
        }
        .b5_top .b5_top_target .b5_top_target_right .b5_top_target_right_tip:hover{
            background-color:snow;
            color:darkred;
        }
        .b5_top_display{
            margin:0 auto 0;
            width: 1350px;
            background:wheat url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fp3.gexing.com%2FG1%2FM00%2FCE%2F15%2FrBACFFKUV3zwxtFiAAY9um227e0611.jpg&thumburl=http%3A%2F%2Fimg5.imgtn.bdimg.com%2Fit%2Fu%3D37066705%2C642523342%26fm%3D21%26gp%3D0.jpg) 100% -234px no-repeat;
            height:70px;
        }
        .b5_top_display_content{
            margin-left:20%;
            padding:10px 30px 10px 30px;
            height:40px;
            width:800px;
            font-size:40px;
            font-weight:800;
            color:black;
            float:left;
        }
        .b5_top_search{
            margin:0 auto 0;
            width:1350px;
            height:150px;
            background-color:#fff;
        }
        .b5_top_search .b5_top_search_logo{
            /*display:block;*/
            float:left;
            width:240px;
            height:150px;
            background:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fp3.gexing.com%2Ftouxiang%2F20121211%2F1456%2F50c6d91119b0e_200x200_3.jpg&thumburl=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1058562824%2C3247128813%26fm%3D21%26gp%3D0.jpg) no-repeat;
            cursor:pointer;
        }
        .b5_top_search .b5_top_search_search{
            margin-left:5%;
            float:left;
            width:540px;
            height:150px;
        }
        .b5_top_search .b5_top_search_search .b5_top_search_search_button{
            border:1px solid darkred;
            line-height:34px;
            width:80px;
            background-color:darkred;
            font-size:21px;
            position:relative;
            font-weight:700;
            color:white;
            float:right;
            cursor:pointer;
        }
        .b5_top_search .b5_top_search_search .b5_top_search_search_search{
            height: 30px;
            width:450px;
            float:left;
        }
        .b5_top_search .b5_top_search_note{
            margin:0;
            width:450px;
            height:30px;
        }
        .b5_top_search .b5_top_search_note .b5_top_search_note_ul{
            margin:0;
            list-style-type: none;
        }
        .b5_top_search .b5_top_search_note .b5_top_search_note_ul .b5_top_search_note_li{
            padding:0 8px 0 8px;
            border-right:1px dashed grey;
            font-size:12px;
            font-weight:300;
            color:gray;
            float:left;
        }
        .b5_top_search .b5_top_search_note .b5_top_search_note_ul .b5_top_search_note_li:hover{
            color:red;
            cursor:pointer;
        }
        .b5_top_search .b5_top_search_shoppingcar{
            border:1px solid grey;
            margin-top:60px;
            margin-left:9%;
            width:141px;
            height:45px;
            background-image:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Ft1.ituba.cc%2Fmm8%2Ftupai%2F20150909%2F211932514.jpg&thumburl=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3180836057%2C1724796458%26fm%3D21%26gp%3D0.jpg);
            background-position:-46px 180px;
            float:left;
            cursor:pointer;
        }
        /*中部导航区*/
        .b2_menu{
            margin:0 auto 0;
            width:1350px;
            background-color:#fff;
            height:44px;
        }
        .b2_menu .b2_menu_left{
            padding:8px 20px 2px 20px;
            height:34px;
            width:200px;
            font-size:18px;
            font-weight:500;
            color:#fff;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
            background-color:#B1191A;
            cursor:pointer;
            float:left;
        }
        .b2_menu .b2_menu_right{
            margin-left:20px;
            width:800px;
            height:44px;
            float:left;
        }
        .b2_menu .b2_menu_right .b2_menu_right_li{
            padding:10px 10px 10px 10px;
            width:100px;
            height:24px;
            font-size:16px;
            font-weight:400;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
            float:left;
        }
        .b2_menu .b2_menu_right .b2_menu_right_li:hover{
            color:#B1191A;
            cursor:pointer;
            height:16px;
            border-right:1px dashed gray;
        }
        /*主展示区*/
        .b5_main{
            margin:0 auto 0;
            width:1350px;
            overflow: auto;
        }
        /*左边菜单区*/
        .b5_left{
            width:238px;
            height:480px;
            float:left;
            background-color:#cc2954;
            border:1px solid #cc2954;
        }
        .b5_left .b5_left_menu{
            padding:10px 10px 10px 20px;
            width:210px;
            height:60px;
            font-size:16px;
            font-weight:400;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
            color:#fff;
            cursor:pointer;
        }
        .b5_left .b5_left_menu:hover{
            background-color:#fff;
            color:#cc2954;
            font-size:18px;
            font-weight:400;
            font-family: "Microsoft YaHei",tahoma,arial,