一、快速导航搜索区

input:（输入） button（按钮） :focus（选取获得焦点）

float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距）

:hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）

text-shadow: 1px 1px 1px red(红); 阴影效果
可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)

代码：

        <header class="xzq"><div class="tbk"><a href="#"  class="xmtp"><img src="./img/小米图标.png" alt=""></a></div><div class="cpl1"><ul class="sj zfd"><li class="Xiaomi"><a href="#">Xiaomi手机</a></li><div class="sjxlk"><div class="sjxl"><div class="cp tpkz ybk"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div><div class="cp ybk"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div><div class="cp ybk"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div><div class="cp ybk"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div><div class="cp ybk"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div><div class="cp"><a href="#"><img src="./img/手机图片.PNG" alt=""></a></div></div></div></ul></div><div><ul class="zfd"><li><a href="#">Redmi红米</a></li></ul></div><div><ul class="zfd"><li><a href="#">电视</a></li></ul></div><div><ul class="zfd"><li><a href="#">笔记本</a></li></ul></div><div><ul class="zfd"><li><a href="#">平板</a></li></ul></div><div><ul class="zfd"><li><a href="#">家电</a></li></ul></div><div><ul class="zfd"><li><a href="#">路由器</a></li></ul></div><ul class="zfd"><li><a href="#">服务中心</a></li></ul><ul class="zfd"><li><a href="#">社区</a></li></ul><div class="ssk"><input type="text" placeholder="手机"><button><a href="#"><i class="fa fa-search" aria-hidden="true" ></i></a></button><ul class="search_drop"><li><a href="#" target="_blank">全部商品</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="#">Redmi G 2021</a></li><li><a href="#">电视</a></li><li><a href="#">黑沙</a></li></ul></div></header>

写代码时格式架构尽量清晰，这样便于后期自己和他人浏览，太乱的话可能自己都找不到想要去的内容，不利于后期的修改。

标签也有多种，标签的书写看个人习惯或者需求。

css样式：

.tbk{width: 234px;height: 100px;background-color: #fefefe;float: left;
}
/* 图标盒子 */
.xmtp>img{width: 55px;height: 55px;padding-top: 22px;
}
/* 图标尺寸 */
.zfd>li{line-height: 100px;float: left;margin-right: 22px;font-size: 15px;
}
/* 行高、左浮动、右外间距、字体大小 */
.zfd>li>a{color: rgb(63, 62, 62);
}
/* 字体色 */
.zfd>li:hover a{color: orangered;
}
/* 鼠标触字体发色 */
.ssk{width: 290px;height: 50px;background-color: orange;float: right;margin-top: 25px;position: relative;
}
/* 搜索框规格样式 */
.ssk input{width: 240px;height: 48px;border: 1px #9a9899 solid;float: left;outline: none;text-indent: 10px;
}
/* 文本框规格样式 */
.ssk button{width: 48px;height: 50px;float: left;background-color: white;border: 1px #9a9899 solid;border-left: none;position: absolute;
}
/* 按钮样式规格 */
.ssk button>a>i{font-size: 16px;color: #9a9899;
}
/* 按钮图标大小、颜色 */
.ssk button:hover,.ssk button:hover i{background-color: #f0782c;color: white;
}
/* 悬停字体、图标变色 */
.ssk input:focus {border: 1px solid #ed732e;
}
/* 文本边框 */
.ssk input:focus+button {border: 1px solid #ed732e;border-left: none;
}
/* 点击搜索文本框、按钮框变色 */
.search_drop{width: 240px;border: 1px #ed732e solid;position: absolute;z-index: 12;top: 50px;border-top: none;background-color: white;
}
/* 搜索下拉框 */
.search_drop a{line-height: 30px;padding-left: 10px;font-size: 12px;color: #9a9899;
}
/* 字体样式,颜色 */
.search_drop>li:hover{background-color: #f5f4f4;
}
/* 背景 */
.search_drop{display: none;
}
/* 隐藏 */
.ssk input:focus+button+.search_drop{display: block;
}
/* 搜索框点击下拉效果 */

在写完后可能会出现下拉框被下方内容遮挡住的情况：

这个时候可以给下拉框的父元素设置相对定位，子元素（下拉框）设绝对定位+z-index: ;（填写数字）提高子元素（下拉框或侧拉框）的层级，只要比遮挡子元素的层级高就可以显示出下拉框了。

代码实现效果：

可以自己尝试调设z-index: ;的数值来改变层级，观看网页效果

css、HTML制作小米商城网页（二）相关推荐

基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
基于HTML+CSS+JavaScript制作学生网页——海贼王网站 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
css、HTML制作小米商城网页（一）
一.顶部导航栏制作首页导航栏属性: float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素)margin(外边距) :hover(悬浮变色)bord ...
css、HTML制作小米商城网页（三）
input:(输入) button(按钮) :focus(选取获得焦点) float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素)margin(外边距 ...
中秋之美——html+css+js制作中秋网页
前言八月十五,秋已过半,是为中秋. "但愿人长久,千里共婵娟",中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令.古人把圆月视为团圆的象征,因此,又称八月十五为 ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
基于HTML+CSS+JavaScript制作学生网页——斗破苍穹动漫(6页) 排版整洁，内容丰富，主题鲜明
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

css、HTML制作小米商城网页（二）

一、快速导航搜索区

css样式：

代码实现效果：

css、HTML制作小米商城网页（二）相关推荐

最新文章

热门文章