HTML-CSS-JS实现卫龙辣条旗舰店网页

最新推荐文章于 2022-04-11 23:20:36 发布

TTLLZZHH

最新推荐文章于 2022-04-11 23:20:36 发布

阅读量768

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43797908/article/details/94402523

版权

前端专栏收录该内容

62 篇文章 0 订阅

订阅专栏

完成效果

点击链接

其实body主体部分都是图片，只导航栏用列表来实现，下边商品全部放图片，用a链接定位到各个商品处，点击商品，点击商品用CSS给a加一个蓝色边框

代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--------------------------------header--------------------------------->
<div id="header">
    <div class="container">
            <img src="images/header.png" alt="">
            <div>卫龙食品旗舰店</div>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">所有产品</a></li>
                <li><a href="#">99减50</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>
</div>
<!--------------------------------滑动广告--------------------------------->
<div id="slide">
    <!--<div class="left">&lt;</div>-->
    <!--<div class="right">&gt;</div>-->
    <div class="cicle">
        <span></span>
        <span></span>
    </div>
</div>
<!--------------------------------商品--------------------------------->
<div id="one">
    <a href="#" class="a"></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
    <a href="#" class="d"></a>
    <a href="#" class="e"></a>
</div>
<div id="two">
    <a href="#" class="a"></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
    <a href="#" class="d"></a>
</div>
<div id="three">
    <a href="#" class="a"></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
    <a href="#" class="d"></a>
</div>
<!--------------------------------bottom--------------------------------->
<div id="bottom">
    <p>卫龙食品天猫旗舰店，淘宝天猫人气食品品牌店铺。荆轲刺秦王，辣条在手我更狂！暴漫大礼包、王尼玛来了、辣条、还不发货。卫龙x暴漫联合发布暴漫大辣条，你们想我怎么做？QWER一套带走王尼玛？</p>
    <a href="#">移动站</a><span>-</span><a href="#"> 卫龙官网 - 卫龙旗舰店 | 辣条</a>
</div>
<script src="index.js"></script>
</body>
</html>

CSS部分

/*------------------------版心----------------------------*/

*{
    margin: 0;
    padding: 0;

}
body{
    background-color: #ffe7e5;

}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
/*------------------------header----------------------------*/
#header{
    height: 190px;
    background-color: #e9e9e9;

}
#header .container{
    width: 1000px;
    height: 190px;
    /*background-color: yellow;*/
    margin: 0 auto;
    overflow:hidden;
    text-align: center;
}
#header .container img{
    width:100px;
    height: 50px;
    margin-top: 20px;
    /*margin: 0 auto;*/
}
#header .container div{
    width: 200px;
    margin: 20px auto;
    color: #373737;
    cursor: default;
}
#header ul{
    height: 50px;
    margin: 20px auto 0;
    border-top: 1px solid #aeaeae;
}
#header ul li{
    float: left;
    width: 120px;
    height: 50px;
   text-align: center;
    line-height: 50px;
    border:1px solid #e9e9e9;
}
#header ul li a{
    color: #373737;
    font-size:16px;
}
/*------------------------滑动广告----------------------------*/
#slide{
    height: 580px;
    background-color: #facac6;
    background-image: url("images/滑动页1.jpg");
    background-position: center;
    position: relative;
}
/*#slide .left{*/
    /*position: absolute;*/
    /*width: 200px;*/
    /*height: 300px;*/
    /*left: 20px;*/
    /*top:50px ;*/

/*}*/
#slide .cicle{
    position: absolute;
    width: 100px;
    height: 20px;
    left: 47%;
    bottom:10px;

}
#slide .cicle span{
    width: 12px;
    height: 12px;
    display: block;
    float: left;
    border-radius: 50%;
    background-color: white;
    margin-left: 30px;
}
/*------------------------one----------------------------*/
#one{
    height: 736px;
    width: 800px;
    background-color: #fecdc9;
    margin: 0 auto;
    background-image: url("images/one.jpg");
    background-position: center;

    position: relative;
}
#one .a,
#one .b{
    position: absolute;
    display: block;
    width: 350px;
    height: 140px;
    top: 146px;
}
#one .e,
#one .d{
    position: absolute;
    display: block;
    width: 356px;
    height: 125px;
    left: 407px;
}
#one .c{
    position: absolute;
    display: block;
    width: 359px;
    height: 264px;
    top: 444px;
    left: 31px;

}
#one .a{
    left: 44px;
}
#one .b{
    left: 406px;
}
#one .d{
    top: 445px;
}

#one .e{
    top: 583px;
}
#one .a:active{
    border:1px solid blue;
}
#one .b:active{
     border:1px solid blue;
 }
#one .c:active{
    border:1px solid blue;
}
#one .e:active{
    border:1px solid blue;
}
#one .d:active{
    border:1px solid blue;
}

/*------------------------two----------------------------*/
#two{
    height: 884px;
    width: 800px;
    background-color: #fecdc9;
    margin: 0 auto;
    background-image: url("images/two.jpg");
    background-position: center;
    /*border: 1px solid red;*/
    position: relative;

}
#two .a{
    position: absolute;
    display: block;
    width: 734px;
    height: 382px;
    top:93px;
    left: 35px;

}
#two .b{
    position: absolute;
    display: block;
    width: 360px;
    height: 384px;
    top:491px;
    left: 36px;



}
#two .c,
#two .d{
    position: absolute;
    display: block;
    width: 360px;
    height: 185px;
    left: 408px;

}
#two .c{
    top:491px;
}
#two .d{
    top:690px;
}
#two .a:active{
    border:1px solid blue;
}
#two .b:active{
    border:1px solid blue;
}
#two .c:active{
    border:1px solid blue;
}
#two .d:active{
    border:1px solid blue;
}
/*------------------------three----------------------------*/
#three{
    height:797px;
    width: 800px;
    background-color: #fecdc9;
    margin: 0 auto;
    background-image: url("images/three.jpg");
    background-position: center;
    /*border: 1px solid red;*/
    position: relative;

}
/*重复代码*/
/*------------------------bottom----------------------------*/
#bottom{
    height: 80px;
    border-top: 1px solid #aeaeae;
    text-align: center;
    overflow: hidden;
    margin-bottom: 2px;
    background-color: white;
}
#bottom p{
    font-size: 12px;
    margin-top:20px;
    margin-bottom:10px;
    color: #aeaeae;

}
#bottom a{
    font-size: 12px;

}

JS部分：

function myGetElementId(id){
    return document.getElementById(id);
}
//------------------------- header----------------------------
var liObjs=myGetElementId("header").getElementsByTagName("li");
for(var i=0;i<liObjs.length;i++){
    liObjs[i].onclick=function () {
        for(var j=0;j<liObjs.length;j++){
            liObjs[j].style.border="1px solid #e9e9e9" ;
        }
        this.style.border="1px solid blue" ;
    };
}

TTLLZZHH

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS-JS实现卫龙辣条旗舰店网页

完成效果点击链接其实body主体部分都是图片，只导航栏用列表来实现，下边商品全部放图片，用a链接定位到各个商品处，点击商品，点击商品用CSS给a加一个蓝色边框代码：HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫