<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
100%;
height: 100%;
background-image: url(img/bj.jpg);
}
body{margin:0; padding:0}
#to_top{
position:absolute;
cursor:pointer;
}
*{
padding: 0px;
margin: 0px;
}
.ss{
margin:56px auto;
/*margin-left: 368px;
margin-top: 249px;*/
600px;
}
.xks{
458px;
height: 36px;
float: left;
}
.bd{
color: white;
font-size: 18px;
background: #398bfb;
100px;
height: 39px;
border: none;
float: left;
}
ul{
display: none;
list-style: none;
/*position: relative;*/
}
li{
460px;
background: rgba(255,255,255,1);
}
.logo{
282px;
height: 120px;
margin-left: 139px;
}
.xj{
position: absolute;
top: 34%;
right: 39%;
28px;
height: 25px;
}
.dh{
100%;
height: 30px;
/*border-bottom: 1px solid white;*/
background: rgba(255,255,255,0.3);
}
.dh p{
color: white;
line-height: 30px;
float: left;
margin-right: 19px;
}
a{
color: white;
}
.dh span{
float: right;
line-height: 30px;
margin-left: 19px;
}
</style>
</head>
<body>
<div class="dh">
<p>太原:</p>
<img src="img/yun.png" style=" 20px; height: 20px;float: left;margin: 6px 0 0 5px;"/>
<p>-3°</p>
<p style="color: #badc00">良</p>
<p>87</p>
<p>|</p>
<p><a href="">换肤</a></p>
<p><a href="">消息</a></p>
<span style=" 86px;height: 30px;background:#398bfb;text-align: center;color: white;">更多产品</span>
<span><a href="">设置</a></span>
<span><a href="">你算哪块小饼干!</a></span>
<span><a href="">学术</a></span>
<span><a href="">贴吧</a></span>
<span><a href="">视频</a></span>
<span><a href="">地图</a></span>
<span><a href="">hold123</a></span>
<span><a href="">新闻</a></span>
</div>
<div class="ss">
<img src="img/dulogo.png" class="logo"/>
<input type="text" value="" class="xks" id="sj" />
<img src="img/xj.jpg" class="xj" />
<button class="bd"/>百度一下</button>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="to_top"style=" 30px;height: 30px;border-radius:30px 0 30px 0 ;background: red;"></div>
<!--<div style="margin: 270px 0 0 615px;"><img src="img/QQ图片20180120234642.jpg" style="90px;height:90px;"/></div>-->
<script>
var dj=document.querySelector(".bd");//按钮
var lis=document.querySelectorAll("li");//li
dj.onclick=function(){
var zhi=document.getElementsByClassName("xks")[0].value;
if(zhi!=""){
for(var i=lis.length-1;i>=0;i--){
if(i==0){
lis[0].innerText=document.querySelector(".xks").value;
}else{
lis[i].innerText=lis[i-1].innerText;
}
}
}
}
var sj=document.getElementById("sj");//input
dj.onfocus=sj.onfocus=function(){
var jj=document.querySelector("ul");
jj.style.display="block";
}
dj.onblur=sj.onblur=function(){
var sj=document.querySelector("ul");
sj.style.display="none";
}
window.onload = function(){
var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
}
</script>
</body>
</html>