<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var oInputa=document.getElementById("search1"), oInputb=document.getElementById("search2"); oInputa.onclick=function(){ this.style.border="1px solid yellow"; oInputb.style.border="1px solid yellow"; } oInputa.onmouseout=function(){ this.style.border="1px solid blue"; oInputb.style.border="1px solid blue"; } oinputb.onclick=function(){ this.style.border="1px solid yellow"; oInputa.style.border="1px solid yellow"; } } </script> <style> body,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td,figure,figcaption{ margin: 0; padding: 0; font-family: 微软雅黑 } a{ text-decoration:none; color:#fff; } #header{ margin:0 auto; width: 1024px; height: 55px; } #header>ul,li{ float: left; list-style:none; line-height: 55px; } .menu-content{ margin: 0 auto; width: 1240px; height: inherit; } #h1{ float:left; margin-right:10px; text-indent: -9999px; background: #ff6700; width: 55px; height: 55px; line-height: 55px; } #h1>a{ display: block; background: url(images/logo-footer.png) no-repeat; } #header li>a{ display: block; padding:0 10px; } .list-content{ float:left; padding-left:50px; width: 700px; height: 55px } .list-content a{ color:black; transition:all 0.3s; } .list-content a:hover{ color:white; background:#ff6700; } .search{ float:left; width: 210px; height: 55px; } .search-txt{ margin-top:7px; float:left; width: 170px; height: 40px } .search-txt input{ padding:0 10px; width: 148px; height: 38px; border:1px solid red; } .search-input{ float:left; } .search-input input{ margin-top:7px; width: 38px; height: 40px; border:1px solid red; border-left:none; background: white; } .search-txt input,.search-input input{ background: white } .search-txt input,.search-input input:focus{ outline: none } .a{ border:1px solid red; } </style> </head> <body> <div id="header"> <div class="menu"> <div class="menu-content"> <h1 id="h1"><a href="#">小米商城</a></h1> <div class="list-content"> <ul> <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><a href="#">智能硬件</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> </ul> </div> <div class="search"> <div class="search-txt" id="search1"> <input type="text" placeholder="Search"> </div> <div class="search-input" id="search2"> <input type="button" value="click"> </div> </div> </div> </div> </div> </body> </html>
3 回答
- 3 回答
- 0 关注
- 1936 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消