<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">//css样式
*{
margin:0;
padding:0;
}
body{
100%;
height:100%;
background-image: url("img/bj.jpg");
background-size:100% 100%;
overflow: hidden;
position: relative;
}
.wk{
300px;
height:50px;
float:left;
background: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(255,255,255,0.8) 20%,
rgba(255,255,255,0.8) 70%,
rgba(0,0,0,0) 100%);
position: absolute;
top:-130px;
z-index: 1;
}
.wether{
300px;
height:50px;
color:white;
}
#dh{
100%;
height:50px;
list-style: none;
float:right;
border: none;
position: absolute;
top:-130px;
/*margin-top: -100px;*/
background:rgba(0,0,0,0.3);
line-height: 50px;
}
#dh li{
50px;
height:30px;
float:left;
margin-right:20px;
font-size:14px;
color:white;
text-decoration:underline;
}
a{
color:white;
}
#dh li:first-child{
margin-left:810px;
}
.logo{
300px;
height:100px;
background-image: url("img/bd.png");
background-size:100% 100%;
margin:80px auto;
}
.dk{
600px;
height:220px;
margin:130px auto;
}
#cha{
500px;
height:40px;
float:left;
text-indent: 6px;
}
#bd{
100px;
height:40px;
background: #46B8DA;
border:1px solid #46B8DA;
color:white;
float:right;
}
#ul{
500px;
display: none;
}
#ul li{
list-style: none;
500px;
float:left;
font-size:14px;
color:white;
background: rgba(255,255,255,0.3);
text-indent: 6px;
line-height: 30px;
}
.erweima{
100px;
height:100px;
background-image: url("img/erweima.jpg");
background-size: 100% 100%;
margin:0 auto;
}
.dhdown{
350px;
height:30px;
margin:0 auto;
list-style: none;
margin-top:10px;
}
.dhdown li{
font-size:12px;
float:left;
margin-left:20px;
text-decoration:underline;
}
.zhezhao{
100%;
height:40px;
text-align: center;
background: rgba(0,0,0,0.3);
overflow: hidden;
}
.yj{
font-size:14px;
color:whitesmoke;
}
</style>
</head>
<link href="img/bd.icon.jpg" rel="shortcut icon" />
<body>
//天气预报插件
<div class="wk">
<iframe class="wether" allowtransparency="true" frameborder="0" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=1&v=0&d=1&bd=0&k=&f=<f=009944&htf=cc0000&q=1&e=1&a=0&c=71264&w=180&h=36&align=center"></iframe>
</div>
//上部导航栏
<ul id="dh">
<li><a href="https://news.baidu.com/">新闻</a></li>
<li><a href="https://www.hao123.com/">好123</a></li>
<li><a href="http://j.map.baidu.com/GcHzb">地图</a></li>
<li><a href="http://v.baidu.com/">视频</a></li>
<li><a href="https://tieba.baidu.com/index.html">贴吧</a></li>
<li><a href="#" onclick="alert('暂不允许登录！')">登录</a></li>
<li><a href="#" onclick="alert('暂不允许设置！')">设置</a></li>
</ul>
//中间部分
<div class="dk">
<div class="logo"></div>//百度logo
<input type="text" id="cha" placeholder="朋友，做头发么？"/>//输入框
<button id="bd">百度一下</button>//按钮
<ul id="ul">
<a href="#"><li class="li"></li></a>
<a href="#"><li class="li"></li></a>
<a href="#"><li class="li"></li></a>
</ul>
</div>
//二维码部分
<div class="erweima"></div>
//下部导航栏
<div class="zhezhao">
<ul class="dhdown">
<a href="https://www.baidu.com/cache/sethelp/help.html"><li>把百度设为主页</li></a>
<a href="http://home.baidu.com/"><li>关于百度</li></a>
<a href="http://home.baidu.com/"><li>About Baidu</li></a>
<a href="http://cas.baidu.com/?tpl=www2&fromu=http%3A%2F%2Fwww2.baidu.com%2F"><li>百度推广</li></a>
</ul>
</div>
<center class="yj">Copyright © 2016 |京ICP备16040279号-1</center>
</body>
//JS部分
<script type="text/javascript">
var baidu=document.querySelector("#bd");//获取按钮
var sou=document.getElementsByClassName("li");//获取下拉
var cha=document.getElementById("cha");//获取input
baidu.onclick=dazi;
function dazi(){
var cha=document.getElementById("cha").value;
if(cha!=""){
for(var i=2;i>=0;i--){
if(i==0){
sou[i].innerHTML=cha;
}else{
sou[i].innerHTML=sou[i-1].innerHTML
}
}
}
}
//聚焦状态
baidu.onfocus=cha.onfocus=function(){
var ul=document.getElementById("ul");
ul.style.display="block";
}
//失焦状态
baidu.onblur=cha.onblur=function(){
var ul=document.getElementById("ul");
ul.style.display="none";
}
</script>
</html>