Html-小米官网头部

最新推荐文章于 2023-03-22 19:24:40 发布

可可鸭~

最新推荐文章于 2023-03-22 19:24:40 发布

阅读量431

点赞数

分类专栏： html 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_43547255/article/details/121384251

版权

html 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

Html-小米官网头部

一、Html-小米官网头部练习

如下图
效果一

效果二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!--设置浏览器的分辨率窗口为设计稿的分辨率 -->
    <meta name="viewport" content="width=375, user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/mistyle.css" />
  </head>
  <body>
    <div class="header">
      <div class="headerTop">
        <div class="logo "></div>
        <div class="searchInput">
          <div class="icon "></div>
          <div class="inputcontent">
            <input type="text" class="inputstyle" placeholder="搜索商品名称" />
          </div>
        </div>
        <div class="headerUser "></div>
      </div>
      <div class="headerNav ">
        <a href=""  class="active">推荐</a>
        <a href=""  class="active">手机</a>
        <a href=""  class="active">电视</a>
        <a href=""  class="active">笔记本</a>
        <a href=""  class="active">智能</a>
        <a href=""  class="active">家电</a>
        <input type="checkbox" id="choose" hidden="hidden" name="choose" />
        <label for="choose" class="xhicon"></label>
        <div class="xhk">
          <div class="xhkmain">
            <div class="xhktop">
              全部
            </div>
            <div class="xhklist">
              <a href="">推荐</a>
              <a href="">手机</a>
              <a href="">电视</a>
              <a href="">笔记本</a>
              <a href="">智能</a>
              <a href="">家电</a>
              <a href="">生活周边</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

mistyle.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 74px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.header .headerTop {
  background-color: #f2f2f2;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
}
.header > .headerTop > .logo {
  width: 50px;
  height: 44px;
  background-image: url("../imag/milogo.png");
  background-position: center center;
  background-size: 25px auto;
  background-repeat: no-repeat;
}
.header .headerTop .searchInput {
  height: 33px;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 2px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}
.header .headerTop .searchInput .icon {
  background-position: center center;
  width: 31px;
  background-size: 15px auto;
  height: 31px;
  background-image: url("../imag/search.png");
  background-repeat: no-repeat;
}
.header .headerTop .searchInput .inputcontent {
  flex: 1;
  display: flex;
  font-size: 12px;
  font-family: "宋体";
}
.header .headerTop .searchInput .inputcontent input {
  flex: 1;
  border: none;
  outline: none;
  text-decoration: none;
}
.header > .headerTop > .headerUser {
  background-repeat: no-repeat;
  width: 50px;
  background-size: 25px auto;
  height: 44px;
  background-image: url("../imag/yonghu.png");
  background-position: center center;
}
.header .headerNav {
  margin-top: 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header .headerNav a {
  text-decoration: none;
  font-size: 12px;
  color: rgb(116, 116, 116);
  align-self: stretch;
  padding-top: 2px;
}
.header .headerNav a .active {
  color: rgb(237, 91, 0);
  border-bottom: 2px solid rgb(237, 91, 0);
}
.header .headerNav a:hover {
  text-decoration: underline;
}
.header .headerNav .xhicon {
  transition: transfrom 0.8s;
  z-index: 20;
  position: relative;
  width: 20px;
  height: 20px;
  background-image: url("../imag/jiantouxia.png");
  background-size: 18px auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.headerNav .xhk {
  width: 100vw;
  height: 0vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transition: height 0.8s;
}
.headerNav .xhk .xhkmain {
  position: absolute;
  top: 44px;
  left: 0;
  width: 375px;
  height: 130px;
  background: #f2f2f2;
  color: rgb(63, 63, 63);
  display: flex;
  flex-direction: column;
}
.xhkmain .xhktop {
  height: 30px;
  font-family: "微软雅黑";
  font-size: 14px;
  width: 375px;
  display: flex;
  align-items: flex-end;
  padding-left: 11px;
}
.xhkmain .xhklist {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  padding-left: 10px;
  align-content: space-evenly;
}
.xhkmain .xhklist a {
  border-radius: 4px;
  width: 80px;
  height: 30px;
  padding: 0;
  margin: 0;
  background-color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  border: 1px solid #e5e5e5;
  text-decoration: none;
  margin: 0 11px 10px 0;
}
.xhkmain .xhklist a:hover {
  text-decoration: none;
  border: 1.5px solid rgb(237, 91, 0);
  color: rgb(237, 91, 0);
}
#choose:checked ~ .xhk {
  height: 26vh;
}
#choose:checked ~ .xhicon {
  transform: rotate(180deg);
}

在这里插入图片描述

可可鸭~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html-小米官网头部

Html-小米官网头部一、Html-小米官网头部练习如下图效果一效果二<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />  <meta name="viewport" content="width=375, user-scalable=no" /> <
复制链接

扫一扫