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);
}

Html-小米官网头部相关推荐

小米官网详情页头部固定效果
最近研究小米官网一些基础css特效实现效果,通过研究别人的代码,自己也学到了很多,下面介绍下小米官网详情页页面头部固定效果页面滑动时候,顶部购买一栏会缓慢固定在头部,有类似动画效果,主要应用的是cs ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
小米官网项目制作——javascript知识分享上
目录前言一.整体架构二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子四.轮播图 1.本体的部件 ...
HTML5+CSS3实现小米官网（完整版）
前言小米官网其实是一个结构非常简单的网页,相比与小米商城,难度降低了很多很多.我也写过一次小米商城,可以移步到我的主页.本篇文章简单分析一下小米官网的静态结构,文章末尾附源代码和素材. 一.效果展示 ...
项目一：《小米官网》
一.项目介绍 "小米旗舰商城".二十一世纪是网络休闲生活的时代,在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式.如今信息网络的发展可以说是一日千里,透过网络的运用,可 ...
小米官网的一部分【前端知识】
写在前面的话: 本章内容:写出小米官网的顶部所利用的知识:综合今天,我们要模仿的是,如下图: 1.代码 <!DOCTYPE html> <html lang="zh-C ...
项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...

Html-小米官网头部

Html-小米官网头部

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

Html-小米官网头部相关推荐

最新文章

热门文章