每个网页的最上面的部分（图标+搜索+登录）

最新推荐文章于 2021-09-13 09:49:10 发布

蚂蚁妹妹

最新推荐文章于 2021-09-13 09:49:10 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/zsx930305/article/details/52640522

版权

ps:菜鸟的小笔记

html

<!DOCTYPE HTML>
<html>
<head>
<body>
<div id="container">
<!--最上面的图标、登录等-->
<header>
<div id="login"></div>

<input  type="text"  id="search"/>
<div id="zoom"></div>

<div id="enter">
<span>登录</span>
</div>

</header>
</body>
</html>

css

 *{
margin:0;
padding:0;
}
  #container{
width:100%;
min-width:1280px;
font-family:"Microsoft YaHei";
}
header{
width:100%;
height:60px;
background:#0066CC;
font-size:0;
}

header  #login{
width:10%;
height:60px;
display:inline-block;
position:relative;
vertical-align:middle;
left:3%;
background:url(../images/logo.png) no-repeat  left;
}
header #search{
width:25%;
height:30px;
border:0;
border-radius:10px;
vertical-align:middle;
display:inline-block;
position:relative;
left:40%;
}
header   #zoom{
background:url(../images/zoom.png) no-repeat left;
width:5%;
height:20px;
vertical-align:middle;
position:absolute;
left:52%;
top:20px;
box-sizing:border-box;
}
header #enter{
color:#fff;
font-size:14px;
width:7%;
height:60px;
display:inline-block;
vertical-align:middle;
text-align:center;
line-height:60px;
cursor:pointer;
position:relative;
left:50%;
background:url(../images/login.png) no-repeat left;
background-size:15px 18px;
}

ps:1.图片自行设置就好

2.display:inline-block;很重要，这样可以在一排显示。

3.vertical-align:middle; text-align:center可以设置水平对齐

4.position:relative可以固定

5.html中直接将图标设为背景，

6.最后的line-height：60px很重要！！！！（设为导航栏宽度）。不然会“”登录“”跑到上面不对齐哒。
效果图片：

蚂蚁妹妹

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
每个网页的最上面的部分（图标+搜索+登录）

ps:菜鸟的小笔记html登录css *{margin:0;padding:0;} #container{width:100%;min-width:1280px;font-family:"Microsoft YaHei";}header{width:100%;height:60px;background:#0066CC;
复制链接

扫一扫