新百伦官网页面制作

web_lyh

已于 2024-01-03 00:15:51 修改

阅读量620

点赞数 7

文章标签：前端 javascript html

于 2023-12-28 01:45:19 首次发布

本文链接：https://blog.csdn.net/weixin_42127685/article/details/135258990

版权

登录页面就不进行展示了，就是延用的之前的登录页面，下面的图片是登录进入之后的首页页面。

下面的是html页面代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>汤圆的家</title>
  </head>
  <body>
    <div class="topBox">
      <div class="topInner1">
        <img src="./img/home/logo.jpg" alt="" style="width:70px;">
        <span class="titleBox" onclick="titleClick()">新品上市</span>
        <span class="titleBox" onclick="titleClick()">男子</span>
        <span class="titleBox" onclick="titleClick()">女子</span>
        <span class="titleBox" onclick="titleClick()">男孩</span>
        <span class="titleBox" onclick="titleClick()">女孩</span>
      </div>
      <div class="topInner1">
        <div style="position: relative;">
          <input class="topInput" type="text" placeholder="搜索">
          <img class="topSearch" src="./img/home/search.png" alt="">
        </div>
        <div class="topInner1 shopBox">
          <img src="./img/home/shop.png" alt="">
          <span>您的购物车是空的</span>
        </div>
      </div>
    </div>
    <div class="bannerBox">
      <img src="./img/home/banner.jpg" alt="">
    </div>
    <div class="navBox">
      <div class="navCenBox">
        <div class="navInner1" onclick="titleClick()">
          <div class="navText1">Shop All ></div>
          <div class="navText2">男子</div>
        </div>
        <div class="navInner1" onclick="titleClick()">
          <div class="navText1">Shop All ></div>
          <div class="navText2">女子</div>
        </div>
        <div class="navInner1" onclick="titleClick()">
          <div class="navText1">Shop All ></div>
          <div class="navText2">男孩</div>
        </div>
        <div class="navInner1" onclick="titleClick()">
          <div class="navText1">Shop All ></div>
          <div class="navText2">女孩</div>
        </div>
      </div>
    </div>
    <div class="conBox">
      <img src="./img/home/banner2.jpg" alt="">
    </div>
    <div class="conBox">
      <img src="./img/home/banner3.jpg" alt="">
    </div>
    <div class="conBox">
      <img src="./img/home/banner4.jpg" alt="">
    </div>
    <div class="conBox2">
      <div class="conBox2Inner1">
        <img src="./img/home/banner5.jpg" alt="">
        <br>
        <span class="conBox2Text1">经典复古</span>
        <br>
        <span class="conBox2Text2">574</span>
        <br>
        <span class="conBox2Text3">即刻查看 ></span>
      </div>
      <div class="conBox2Inner1">
        <img src="./img/home/banner6.jpg" alt="">
        <br>
        <span class="conBox2Text1">舒适缓震</span>
        <br>
        <span class="conBox2Text2">1080</span>
        <br>
        <span class="conBox2Text3">即刻查看 ></span>
      </div>
    </div>
    <div class="conBox2">
      <div class="conBox2Inner1">
        <img src="./img/home/banner6.jpg" alt="">
        <br>
        <span class="conBox2Text1">简约舒适</span>
        <br>
        <span class="conBox2Text2">精选服饰</span>
        <br>
        <span class="conBox2Text3">即刻查看 ></span>
      </div>
      <div class="conBox2Inner1">
        <img src="./img/home/banner7.jpg" alt="">
        <br>
        <span class="conBox2Text1">千禧风格</span>
        <br>
        <span class="conBox2Text2">9060</span>
        <br>
        <span class="conBox2Text3">即刻查看 ></span>
      </div>
    </div>
    <div class="bannerBox">
      <img src="./img/home/banner9.jpg" alt="">
    </div>
    <div class="bottomBox">
      <div class="bottomInner1">
        <div>客服电话：0311-000000</div>
        <div>传真：0311-000000</div>
        <div>Email：http://tydj@cs.com</div>
        <div>地址：抖音搜索“汤圆的家”</div>
      </div>
      <div class="bottomInner2">
        Copyright © 2023.汤圆的家 冀IC备112020202
      </div>
    </div>
  </body>
  <link rel="stylesheet" href="./css/indexCss.css">
  <script>
    function titleClick(){
      window.location.href='./list.html'
    }
  </script>
</html>

下面的是css代码

*{
  margin:0;
  padding:0;
}
.topBox{
  background: white;
  padding:0px 40px 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:14px;
}
.titleBox{
  font-weight: bold;
  margin:0 20px;
  cursor: pointer;
}
.topInner1{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topInput{
  height: 32px;
  width: 250px;
  border: 1px solid #ccc;
  padding-left: 10px;
}
.topSearch{
  position: absolute;
  right: 5px;
  top: 7px;
  width: 23px;
}
.shopBox{
  margin-left: 50px;
  cursor: pointer;
}
.shopBox span{
  margin-left:10px;
}
.bannerBox img{
  width:100%;
}
.navBox{
  background: #EFEFEF;
  margin-top:5px;
}
.navCenBox{
  width:800px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:30px 0;
}
.navInner1{
  cursor: pointer;
}
.navText1{
  text-align: center;
  color:#7C7675;
  font-size: 14px;
}
.navText2{
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-top:2px;
}
.conBox{
  width:1200px;
  margin:10px auto;
}
.conBox img{
  width:1200px;
}
.conBox2{
  width:1200px;
  margin:10px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.conBox2 img{
  width:590px;
}
.conBox2Inner1{
  text-align: center;
}
.conBox2Text1{
  display: block;
  margin: 15px 0 0;
  font-weight: bold;
  font-size: 14px;
}
.conBox2Text2{
  display: block;
  margin: -20px 0 5px;
  font-weight: bold;
  font-size: 18px;
}
.conBox2Text3{
  display: block;
  margin: 3px 0 0;
  cursor: pointer;
  color:red;
}
.bottomBox{
  background: #232323;
  width: 100%;
  padding:50px 0;
  color:white;
  margin-top: -5px;
}
.bottomInner1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:800px;
  margin:20px auto;
}
.bottomInner2{
  text-align: center;
}

其他页面代码就不进行展示了，可以通过下方链接进行下载。

可以通过抖音扫码、哔哩哔哩搜索 web-lyh 观看教学视频