html css 模仿小米官网搜索框

最新推荐文章于 2023-04-08 20:20:36 发布
置顶 最新推荐文章于 2023-04-08 20:20:36 发布
阅读量4.8k 收藏 10
点赞数 2
分类专栏： Web前端开发 文章标签： html css 小米 搜索框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Love_L_C/article/details/39081663
版权
本文通过HTML和CSS代码实战演示如何模仿小米官网的搜索框效果，涵盖了浮动、导航条、鼠标经过、定位等CSS知识点。虽然目前的代码仅实现了基本样式，未涉及JavaScript交互如鼠标经过、点击事件和光标定位，但已能展示搜索框的基本形态。
摘要由CSDN通过智能技术生成

            写网页效果，掌握html，css，唯一的捷径就是多模仿，多练习。小米官网的搜索框效果看似简单，实际写代码的时候才发现要掌握好多css知识才能完成效果。浮动、导航条、鼠标经过、定位、文字框效果实现、js效果实现等等。下面这段代码仅仅用html、css写出了基本的样子，js效果，鼠标经过、点击事件，光标定位效果都还没有实现。

效果原图见小米官网：http://www.mi.com


搜索放大镜的图片：


最低0.47元/天 解锁文章
betterBESTbetter
关注
专栏目录
【每日一练】小米搜索框
qq_46580087的博客
03-06 549
三月的天书都印错，竟无人知晓。
css、HTML制作小米商城网页（二）
m0_70516782的博客
07-07 1976
input:（输入） button（按钮） :focus（选取获得焦点） float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距） :hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）text-shadow: 1px 1px 1px red(红); 阴影效果 可选值: 水平效果(必填)，垂直效果(必填)
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
HTML&CSS设计小米导航栏
egg_er的博客
10-23 1829
小米导航栏： 准备工作： 把需要实现的设计图放到ps中，量取需要的宽度高度间距值； 话不多说：直接上代码： <div class="box"> // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号 <a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</s
javascript实现小米搜索框
m0_62181310的博客
05-04 1278
鼠标点击出现下拉菜单 效果展示: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-s.
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
HTML5+CSS仿小米金融首页文件
01-25
HTML5和CSS是现代网页开发的核心技术，它们的结合使得开发者能够创建出功能丰富、视觉效果出众的网页。...通过分析和模仿小米金融的网页设计，可以提升前端开发者的综合能力，并为未来更复杂的项目打下坚实的基础。
小米商城采用HTML+CSS搭建基本框架
03-14
在构建小米商城的页面时，HTML将用于创建商品展示区、导航菜单、搜索框、购物车等关键部分。例如，`<div>`标签可以用来组织页面布局，`<img>`标签插入图片，`<a>`标签创建链接，而`<form>`则用于创建用户交互表单，...
vue2模仿小米商城官网
03-15
在模仿小米商城的过程中，可以创建如商品列表、购物车、导航栏等组件。 3. **指令系统**：Vue.js提供了丰富的指令，如`v-if`、`v-for`、`v-bind`和`v-on`，用于数据绑定和条件逻辑处理。 4. **计算属性和侦听器**...
小米官网前端页面代码
01-10
小米官网前端页面代码
手敲小米官网主页（HTML css3 js）
05-04
静态网页模拟，HTML源码，css源码，js源码
web html 网页css 设计参照小米主页的登陆页面
11-19
web html 网页 设计参照小米主页的登陆页面 运用了CSS
CSS案例之小米首页样面
qq_43430343的博客
02-19 518
小米首页样面 学了几天的css，做了一个小实例。那先来说说感受：发现做一个页面说简单也简单，说不简单也不简单。对于刚开始学习的我，里面的每个小数据都要经过几次修改（无奈）。有的时候看着视频里的老师做的那么轻松简单，我都有一种复杂的感情（捂脸哭）。我发现这个没法插入表情真的不太好哎。在制作的过程中有一个小地方真的要把我气吐血了，就是有的时候呢父盒子不好定高度，而子盒子又浮动，所以导致父盒子高度就变成...
前端实现小米商城网页2（竖排导航、搜索框的实现）
weixin_44584059的博客
08-25 2572
实现小知识点给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行 小知识点 给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果 z-index:10; 注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行 ...
基于javascript 的小米搜索框
qq_59068879的博客
03-07 706
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
小米官网搜索框部分详解
最新发布
longjunx的博客
04-08 244
2299元起2299元起2299元起2299元起
CSS——小米首页悬浮栏效果
NanChen的博客
10-05 588
这种悬浮效果该如何制作？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
小米商城网页制作大全之搜索引擎(input,Font Awesome)
tomorrownan的博客
09-27 3340
导读： 原来的自己大多时候是通过视频和书本资料自学，很少有动手实践，也就会有眼高手低的毛病，每次做一个小功能来练手的时候都会遇到各式各样的问题，也正是在想方设法解决这些问题的过程中收获是最大的，不仅是解决问题的能力，更重要的是学习这些的兴趣会更浓，坚持下去的动力更足。 小米网页的搜索框是通过input标签实现，右边搜索图标使用Font Awesome图标实现，鼠标悬停背景色变为小米主流颜色黄色这些...
小米官网静态网页设计：CSS+HTML源码详解
本资源是一个基于CSS和HTML构建的静态网页，模仿了小米官网的布局与风格。该网页使用了flex布局技术，这是一种CSS3中的布局方式，能够更加灵活和有效地对页面中的元素进行排列和对齐。通过下载的压缩包文件，学习者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值