html css 模仿小米官网搜索框

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

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

搜索放大镜的图片：

效果图：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
margin:0 auto;
padding:0;
}
#search
{
border:1px solid #dfdfdf;
height:38px;
width:384px;
font-size:11pt;
color:#a9a9a9;
-moz-user-select:none;
text-indent:14px;
}

.form
{
margin:0 auto;
width:300px;
position:absolute;
top:100px;
right:250px;
}
#glass a
{
position:absolute;
top:0px;
right:-126px;
border:1px solid #dfdfdf;
width:40px;
height:40px;
display:block;
background:url(glass_two.png);
}
#glass a:hover
{
background-position:0 -40px;
}
#ul
{
position:absolute;
top:-6px;
right:-150px;
width:280px;
display:block;
}
ul li
{
list-style-type:none;
float:left;
width:62px;
height:20px;
background-color:#f3f3f3;
margin-right:8px;
text-align:center;
font-size:9pt;
font-family:"微软雅黑";
color:#333333;
}
ul li:hover
{
background-color:#dfdfdf;
}
</style>
</head>
<body>
<div class="form">
<form>
<input type="text" name="input" id="search" value="搜索您需要的商品"></input>
</form>
<div id="nav">
<ul id="ul">
<a href="#"><li>小米手机4</li></a>
<a href="#"><li>小米电视</li></a>
<a href="#"><li>小米手机3</li></a>
</ul>
</div>
<div id="glass">
<a href="#"></a>
</div>
</div>
</body>
</html>

html css 模仿小米官网搜索框相关推荐

HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...
Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
小米官网搜索框部分详解
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...

html css 模仿小米官网搜索框

html css 模仿小米官网搜索框相关推荐

最新文章

热门文章