如何快速的开发手机端的搜索栏
1.首先就是要写好一个基本的css
*,
*::before,
*::after{
/* 所有的标签和伪元素都被选中 */
margin: 0;
padding: 0;
/* 移动端常用布局时使用非固定像素的，规定盒子的宽度从边框开始算，-webkit移动主要浏览器内核 */
box-sizing: border-box;
--webkit-box-sizing:border-border-box ;
/* 去除点击高亮效果 */
tap-highlight-color:transparent ;
-webkit-tap-highlight-color: transparent;
}
body{
font-size: 14px;
/* sans-serif 设置手机端默认字体*/
font-family: "microsoft yahei",sans-serif;
/* #333就是#333333，如果六位都是同一个数值,代表灰色，接近黑色 */
color: #333;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
input,textarea{
border: none;
/* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */
outline: none;
/* 不允许改变textarea的尺寸 */
resize: none;
/* 去掉浏览器自带的外观 */
--webkit-appearance:none ;
}
/* 清除浮动 */
.fl { float: left; }
.fr { float: right; }
.clearfix::before,::after{
display: block;
clear: both;
content: "";
visibility: hidden; height: 0;
line-height: none;
}
.clearfix { zoom: 1; }
2.建好一个index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="jd_container">
<header class="jd_search">
<div class="jd_search_box">
<a href="" class="icon_logo"></a>
<form action="#" method="">
<span class="icon_search"></span>
<input type="search" name="" id="" value="" placeholder="占位符"/>
</form>
<a href="" class="login">登录</a>
</div>
</header>
</div>
</body>
</html>
3.在调整一下样式
jd_container{
min-width: 320px;
max-width: 640px;
width: 100%;
margin: 0 auto;
background: pink;
height: 1000px;
}
/* 顶部搜索 */
.jd_search{
width: 100%;
height: 40px;
position: fixed;
left: 0;
top: 0;
}
.jd_search .jd_search_box{
height: 40px;
background: rgba(201,21,35,0.85);
min-width: 320px;
max-width: 640px;
width: 100%;
margin: 0 auto;
position: relative;
}
.jd_search .jd_search_box .icon_logo{
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 40px;
}
.jd_search .jd_search_box .login{
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
}
.jd_search .jd_search_box form{
width: 100%;
padding-left: 60px;
padding-right: 60px;
}
.jd_search .jd_search_box .icon_search{
}
.jd_search .jd_search_box input{
width: 100%;
height: 30px;
margin-top: 5px;
background: #fff;
border-radius: 15px;
}
这样就好了哦
