<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>百度搜索</title> <link rel="stylesheet" type="text/css" href="css/baidu.css" /> </head> <body> <div id="head"> <h1>百度搜索</h1> </div> <div id="main"> <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" /> <input type="text" name="" id="input" value="" placeholder="百度一下..." /> <input type="button" name="" id="bth" value="搜索" onclick="bth()" /> </div> </body> </html> <script type="text/javascript"> var text = document.getElementById("input"); // var bth = document.getElementById("bth"); //点击事件 function bth(){ var txt = text.value; location.href = "https://www.baidu.com/s?wd=" + txt + ""; } // 绑定回车事件 document.onkeydown = function(e){ if(!e){ e = window.event; } if((e.keyCode || e.which) == 13){ bth(); } } </script>
css代码：
@charset "utf-8"; * { margin: 0; padding: 0; outline: none; } h1 { font-weight: 300; font-family: 华文彩云; line-height: 50px; } #head { width: 100%; height: 50px; text-align: center; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); } #main { width: 100%; height: 100px; text-align: center; } #input { width: 480px; height: 40px; background-color: #eee; border: 2px solid #000; font-size: 16px; border-radius: 8px; } @media screen and (min- 500px) { #main img { position: relative; top: 11px; left: 0; } #input { width: 480px; height: 40px; background-color: #eee; border: 2px solid #999; font-size: 16px; border-radius: 8px; } } @media screen and (max- 500px) { #input { width: 400px; height: 40px; background-color: #999; border: 2px solid #fff; font-size: 16px; border-radius: 8px; background-image: linear-gradient(90deg, #08AEEA 0%, #2AF598 100%); } } #bth { width: 100px; height: 40px; margin-top: 10px; border: 2px solid #fff; border-radius: 10px; font-size: 19px; background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%); font-family: 华文彩云; }
