WEB前端-CSS-静态购物页面V3

最新推荐文章于 2021-11-25 11:06:34 发布

白金牧场

最新推荐文章于 2021-11-25 11:06:34 发布

阅读量2.5k

点赞数 2

分类专栏： Web-Dev相关 WEB三把刀使用介绍文章标签： javascript web前端购物页面-css html 罩着层

本文链接：https://blog.csdn.net/qq_34409701/article/details/52253584

版权

介绍了静态购物页面的第三次迭代，本次更新包括一个纯HTML-CSS实现的注册页面，并添加了遮罩层。计划下一步结合JavaScript&DOM，实现前端交互功能。

摘要由CSDN通过智能技术生成

这是之前静态页面的第三版

相对于第二版，这一版新增了一个纯html-css实现的简易注册页面，并增加了遮罩层，明天会将这个注册页与JavaScript&DOM结合，实现web前端的简易交互。

<!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:800px;
            height:700px;
            position: fixed;
            top:50%;
            left:50%;
            font-size:20px;
            font-weight:700;
            margin-top:-350px;
            margin-left:-400px;
            background:#F1F1F1;
            border:2px dashed gray;
            z-index: 12;
        }
        /*顶部项目区*/
        .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;
            font-family:微软雅黑;
            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