html+css+js——仿京东页面

最新推荐文章于 2024-05-09 14:52:26 发布
Hu：
最新推荐文章于 2024-05-09 14:52:26 发布
阅读量818
点赞数
分类专栏： js 文章标签： javascript css html5 html
本文链接：https://blog.csdn.net/snjxh/article/details/118074075
版权
js 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18 不负每一分热爱</title>
</head>
<body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .d1{
        width: 100%;
    }
    .d1 .u1{
        height: 35px;
        background-color: #e3e4e5;
        padding-left: 200px;
    }
    .d1 .u1 li{
        position: relative;
        float: left;
        list-style-type: none;
        margin-left: 40px;
    }
    .d1 .u1>li>a {
        display: inline-block;
        line-height: 35px;
        font-size: 13px;
        text-decoration: none;
        color: black;
    }
    .d1 .u1>li>a:hover{
        color: #f3313b;

    }
    .d1 .u1 .l2 .u11{
        position: absolute;
        width: 400px;
        background-color: #CCCCCC;
        display: none;
    }
    .d1 .u1>li .u11 li{
        width: 50px;
        height: 30px;
        float: left;
        list-style-type: none;
    }
    .d1 .u1>li .u11 li a{
        display: inline-block;
        width: 40px;
        text-decoration: none;
        font-size: 14px;
        line-height: 30px;
    }
    .d1 .u1>li .u11 li a:hover{
        color: #f3313b;
        background-color: #CCCCCC;
    }
    .d2{
        /*border-bottom-color: #f3313b;*/
        padding-top: 50px ;
        padding-left: 400px;

    }
    .d2 input{
        width: 550px;
        height: 40px;
        border: 1px solid red;
        color: #CCCCCC;
    }
    .d2 button{
        height: 40px;
        width: 80px;
        background-color: #f3313b;
    }
    .d2 span{
        /*display: inline-block;*/
        margin-left: 60px;
        /*width: 200px;*/
        /*height: 40px;*/
        /*background-color: #CCCCCC;*/
    }
    .d2 span a{
         display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        background-color: #CCCCCC;
        padding-left: 40px;
        text-decoration: none;
        color: red;
    }
    .d2 span a:hover{
        box-shadow: 2px 2px 5px #7d7d7d;
    }
    .u2{

        overflow: hidden;
      padding-left: 100px;
        padding-top: 50px;
        border-bottom:2px solid red;
    }
    .u2 li{
        float: left;
        list-style-type: none;
        margin-right: 40px;
    }
    .u2>li a{
        text-decoration: none;
        color: black;
        font-weight: 800;
    }
    .u2 li a:hover{
        color: #f3313b;
    }

    .u2 .li1>a{
      display: inline-block;
        width: 150px;
        height: 30px;
        padding-left: 30px;
        background-color: #f3313b;
        font-weight: 400;
        color: white;
        line-height: 30px;
    }
    .u2 .li1>a:hover{
        color: white;
    }
    .u2 .li1 .uu2{
        position: absolute;
        width: 180px;
        background-color: #7d7d7d;
        display: none;
    }
    .u2 .li1 .uu2 li{
      float: left;
    }
    .u2 .li1 .uu2 li a{
        display: block;
        width: 180px;
        font-weight: 400;
        color: white;
    }
    .u2 .li1 .uu2 li a:hover{
    background-color: #eca6a6;
    }
    .d3{
        background-image:  url("img/jingdong.jpg");
        background-repeat: no-repeat;
        background-position: center;
        height: 827px;
    }
    .d3 ul{
        margin-right: 300px;
    }
    .d3 ul li{
        float: right;
        list-style-type: none;
        width: 50px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 5px;
        background-color: #CCCCCC;
        margin-top: 20px;
        margin-left: 20px;
    }
    .d3 ul li:hover{
        cursor: pointer;
        box-shadow: 2px 2px 5px #7d7d7d;
    }
    .d4{
        position: relative;
        width: 100%;
        background-color: #7baefc;
    }
    .d4 h1{
        text-align: center;
        padding-top: 40px;
    }
    .d4 .u3{
        height: 80px;
        margin-top:40px;
        margin-left: 230px;
    }
    .d4 .u3 li{
        float: left;
        list-style-type: none;
    }
    .d4 .u3 li a{
        display: inline-block;
        width:180px;
        height: 80px;
        padding-left: 80px;
        line-height: 80px;
        background-color: #eebab8;
        text-decoration: none;
        color: white;
        font-weight: 800;
        font-size: 18px;
        border-radius: 10px;
    }
    .d4 .u3 li a:hover{
        background-color:#fde7ca ;
    }
    .d4 .d41{
        width: 1040px;
        height: 360px;
        margin-left: 230px;
        margin-top: 5px;
        background-color: #f3313b;
    }
    .d4 .d41 .item{
        display:none;
    }
    .e1{
        position: fixed;
        right: 5px;
        top:100px;
    }
    .e1 img{
        display: block;
       width: 30px;
       height: 30px;
        margin-top: 5px;
        background-color: #7bc6fc;
    }
    .e1 img:hover{
        box-shadow: 2px 2px 5px #7d7d7d;
    }
</style>

<div class="d1">
    <ul class="u1">
        <li class="l1"><a href="#">京东首页></a></li>
        <li class="l2"><a href="#">河南></a>
            <ul class="u11">
                <li><a href="">北京</a></li>
                <li><a href="">上海</a></li>
                <li><a href="">天津</a></li>
                <li><a href="">山西</a></li>
                <li><a href="">河北</a></li>
                <li><a href="">山东</a></li>
                <li><a href="">湖南</a></li>
                <li><a href="">湖北</a></li>
                <li><a href="">广东</a></li>
                <li><a href="">福建</a></li>
                <li><a href="">江西</a></li>
                <li><a href="">贵州</a></li>
            </ul>
        </li>
        <li class="l3"><a href="#">你好，请登录></a></li>
        <li><a href="#">免费注册></a></li>
        <li><a href="#">我的订单></a></li>
        <li><a href="#">我的京东></a></li>
        <li><a href="#">京东会员></a></li>
        <li><a href="#">企业合作></a></li>
        <li><a href="#">客户服务></a></li>
        <li><a href="#">网站导航></a></li>
        <li><a href="#">手机京东></a></li>
    </ul>
    <div class="d2">
        <input type="text" value="狗东人 狗东魂 狗东都是人上人">
        <button>搜索</button>
        <span><a href="#">我的购物车</a></span>

    </div>
    <ul class="u2">
        <li class="li1"><a href="#">全部商品分类</a>
        <ul class="uu2">
            <li><a href="#">家用电器</a></li>
            <li><a href="#">电脑办公</a></li>
            <li><a href="#">男装女装</a></li>
            <li><a href="#">母婴玩具</a></li>
        </ul>
        </li>
        <li><a href="#">京东服饰</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">京东国际</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
    </ul>
    <div class="d3">
     <ul>
         <li>攻略</li>
         <li>规则</li>
     </ul>
    </div>
    <div class="d4">
        <h1>好物限时秒</h1>
        <ul class="u3">
            <li class="current"><a href="">10:00</a></li>
            <li><a href="">12:00</a></li>
            <li><a href="">14:00</a></li>
            <li><a href="">16:00</a></li>
        </ul>
        <div class="d41">
            <div class="item" style="display: block">10</div>
            <div class="item">12</div>
            <div class="item">14</div>
            <div class="item">16</div>
        </div>
        <h1>预售爆品抢先订</h1>
            <ul class="u3">
                <li class="current"><a href="">10:00</a></li>
                <li><a href="">12:00</a></li>
                <li><a href="">14:00</a></li>
                <li><a href="">16:00</a></li>
            </ul>
            <div class="d41">
                <div class="item" style="display: block">10</div>
                <div class="item">12</div>
                <div class="item">14</div>
                <div class="item">16</div>

    </div>
        <em class="e1">
            <img src="img/gwc.png" title="购物车">
            <img src="img/yh.png" title="个人中心">
            <img src="img/xx.png" title="我的消息">
            <img src="img/xh.png" title="我的喜欢">
            <img src="img/zj.png" title="我的足迹">
            <img src="img/zd.png" title="置顶" class="img1">
        </em>
    </div>
</div>
<script>
    var u1=document.querySelector('.d1').querySelector('.u1')
    var lis=u1.children;
    for(var i=0;i<lis.length;i++) {
        lis[i].onmouseover = function () {
            this.children[1].style.display = 'block';
        }
    }
    for(var i=0;i<lis.length;i++) {
        lis[i].onmouseout = function () {

            this.children[1].style.display = 'none';
        }
    }
var ipt=document.querySelector('input');
    ipt.onfocus=function () {
        if(ipt.value==='狗东人 狗东魂 狗东都是人上人'){
            ipt.value=''
        }
    }
    ipt.onblur=function () {
        if(ipt.value===''){
            ipt.value='狗东人 狗东魂 狗东都是人上人'
        }
    }
    var li1 =document.querySelector('.d1').querySelector('.u2').querySelector('.li1');
    li1.onmouseover=function (){
        li1.children[1].style.display='block';
    }
    li1.onmouseout=function (){
        li1.children[1].style.display='none';
    }
    var lis=document.querySelector('.u3').querySelectorAll('li');
    var item=document.querySelectorAll('.item');
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onmouseover=function (){
            var index=this.getAttribute('index');
            for(var i=0;i<item.length;i++){
              item[i].style.display='none'
            }
            item[index].style.display='block';
        }
    }
    var search=document.querySelector('input');
    document.addEventListener('keyup',function (e){
       if(e.key==='s'){
           search.focus();
       }
    })
</script>
</body>
</html>
效果图如下：
在这里插入图片描述
Hu：
关注
0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html+css+js——仿京东页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>18 不负每一分热爱</title></head><body><style> *{ margin: 0; padding: 0; } .d1{ width: 100%;
复制链接

扫一扫