效果图
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟百度一下</title>
<link rel="stylesheet" type="text/less" href="style/index.less">
<script src="js/less.min.js"></script>
</head>
<body>
<div class="header">
<ul class="header_nav">
<li><a href="###">新闻</a></li>
<li><a href="###">hao123</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="###">登录</a></li>
<li><a href="###">设置</a></li>
<li class="nav-more"><a href="###">更多产品</a></li>
</ul>
<div class="content">
<img src="image/bd_logo.png" alt="">
<div class="con-input">
<span></span>
<input type="text" class="search"><input type="button" class="btn" value="百度一下">
</div>
</div>
</div>
</body>
</html>
less样式部分
*{
margin: 0;
padding: 0;
font-family:'微软雅黑';
}
@color-blue: #398bfb;
.header{
1000px;//给定宽度，就不会随窗口大写而改变
height: 40px;
line-height: 40px;
margin: 0 auto;
vertical-align: middle;
.header_nav{ //导航栏部分
float: right;
li{
list-style: none;
float: left;
margin-right: 10px;
font-size: 16px;
font-weight:bold;
a{
color:black;
}
}
.nav-more{ //更多产品样式的重写
86px;
height: 32px;
font-size: 13px;
line-height: 32px;
text-align: center;
background: @color-blue;
a{
text-decoration: none;
color: #ffffff;
}
}
}
.content{ //中间搜索区域部分
position: relative;
clear: both;
height: 62%;
min-height: 181px;
margin-top: 100px;
text-align: center;
img{ //logo部分
270px;
height: 129px;
}
.con-input{ //input框
margin-left: 20%;
position: absolute;
.search{
521px;
height: 20px;
padding: 7px;
vertical-align: middle;
}
.btn{ //百度一下按钮
102px;
height: 38px;
background: @color-blue;
text-align: center;
line-height: 38px;
color: #ffffff;
font-size: 16px;
font-weight: normal;
cursor: pointer;
border: none;
vertical-align: middle;
}
span { //相机部分
background: url("../image/camera_new_5606e8f.png");
background-position: 0 0;
height: 18px;
18px;
display: inline-block;
zoom: 1;
vertical-align: top;
position: absolute;
top: 14px;
right: 112px;
&:hover {
background-position: 0 -18px;
}
}
}
}
}