音悦Tai-音悦商城项目（头部、首页部分以及购物须知部分）

最新推荐文章于 2024-11-06 22:41:26 发布

执笔丶画苍生

最新推荐文章于 2024-11-06 22:41:26 发布

阅读量792

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_63716324/article/details/126042574

版权

本文详细介绍了音悦Tai音悦商城项目的前端实现，涵盖头部组件，包括官方介绍、搜索栏和导航栏的HTML及CSS代码；首页的设计与样式；以及购物须知页面的HTML和CSS部分。

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

一、头部部分

头部部分由三部分组成：上边官方介绍、中间搜索栏、下边导航栏

头部html部分

<body>
    <header>
         <!--官方介绍-->
        <div class="head_1">
            <img src="./img/head/log.png" alt="">
            <ul>
                <li><a href="#">官方微博</a>
                    <img src="./img/head/weibo.png" alt="">
                </li>
                <li><a href="#">关注微信</a>
                    <img src="./img/head/weixin.jpg" alt="">
                </li>
                <li><a href="#">购物须知</a></li>
            </ul>
        </div>
         <!--搜索栏-->
        <div class="head_2">
            <img src="./img/head/logo.png" alt="">
            <div class="search">
                <input type="text" placeholder="搜索偶像、商品">
                <a href="#"></a>
            </div>
            <ul>
                <li>
                    <img src="./img/head/avatar.png" alt="">
                    <a href="">登录</a>
                </li>
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <img src="./img/head/cart.png" alt="">
                    <a href="">购物车</a>
                </li>
            </ul>
        </div>
  <!--导航栏-->
        <div class="head_3">
            <a href="#">艺人分类</a>
            <ul>
                <li><a href="./shop.html">首页</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>
    </header>

头部css部分

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  overflow: auto;
  background-color: #222;
}
header .head_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 100px;
}
header .head_1 ul li {
  display: inline-block;
  width: 150px;
  border: 1px solid white;
  text-align: center;
  line-height: 30px;
}
header .head_1 ul li a {
  text-decoration: none;
  color: #ccc;
}
header .head_1 ul li img {
  width: 130px;
  height: 130px;
  border: 10px solid white;
  display: none;
  position: absolute;
}
header .head_1 ul li:hover img {
  display: block;
}
header .head_1 ul li:hover {
  background-color: #fff;
  color: #222;
}
header .head_1 ul li:nth-child(3):hover {
  background-color: black;
}
header .head_1 ul li:nth-child(3):hover:nth-child(3):hover a {
  color: #fd026b;
}
header .head_2 {
  height: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .search {
  position: relative;
}
header .search input {
  width: 444px;
  height: 44px;
  padding-left: 20px;
  border: none;
  background: url(../img/head/search_icon.png) 0 -40px;
  outline: none;
}
header .search input:focus {
  background: url(../img/head/search_icon.png) 0 0px;
}
header .search input:focus + a {
  background: url(../img/head/search_icon.png) -456px -51px;
}
header .search a {
  width: 30px;
  height: 30px;
  position: absolu