【Web】简单的HTML实现百度搜索
生活随笔
收集整理的這篇文章主要介紹了
【Web】简单的HTML实现百度搜索
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
純HTML新手接到團(tuán)隊(duì)的訓(xùn)練任務(wù)，就著手開始寫了，沒用什么高大上的語法，都是最基本的語句實(shí)現(xiàn)的，僅供參考。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Baidu</title><!--input:focus設(shè)定當(dāng)輸入框被點(diǎn)擊時(shí)，出現(xiàn)藍(lán)色外邊框text-indent: 11px;和padding-left: 11px;設(shè)定輸入的字符的起始位置與左邊框的距離--><style>input:focus {border: 2px solid rgb(62, 88, 206);}input {text-indent: 11px;padding-left: 11px;font-size: 16px;}</style><!--input初始狀態(tài)--><style class="input/css">.input {width: 40%;height: 45px;vertical-align: top;box-sizing: border-box;border: 2px solid rgb(207, 205, 205);border-right: 2px solid rgb(62, 88, 206);border-bottom-left-radius: 10px;border-top-left-radius: 10px;outline: none;margin: 0;display: inline-block;background: url(camera.png) no-repeat 0 0;background-position: 565px 7px;background-size: 28px;padding-right: 49px;padding-top: 10px;padding-bottom: 10px;line-height: 16px;}</style><!--button初始狀態(tài)--><style class="button/css">.button {height: 45px;width: 130px;vertical-align: middle;text-indent: -8px;padding-left: -8px;background-color: rgb(62, 88, 206);color: white;font-size: 18px;outline: none;border: none;border-bottom-right-radius: 10px;border-top-right-radius: 10px;margin: 0;padding: 0;}</style></head><body><!--包含table的div--><div><tableborder="0"cellpadding="8.2px"cellspacing="5px"width="420px"class="table"><tr><th><font size="2px" face="宋體"><ahref="http://news.baidu.com/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">新聞</a></font></th><th><font size="2px" face="仿宋"><ahref="https://www.hao123.com/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">hao123</a></font></th><th><font size="2px" face="宋體"><ahref="http://map.baidu.com/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">地圖</a></font></th><th><font size="2px" face="宋體"><ahref="https://haokan.baidu.com/?sfrom=baidu-top"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">視頻</a></font></th><th><font size="2px" face="宋體"><ahref="http://tieba.baidu.com/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">貼吧</a></font></th><th><font size="2px" face="宋體"><ahref="http://xueshu.baidu.com/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">學(xué)術(shù)</a></font></th><th><font size="2px" face="宋體"><ahref="http://www.baidu.com/more/"style="text-decoration: none; color: black;"οnmοuseοver="this.style.color = 'rgb(62, 88, 206)'"οnmοuseοut="this.style.color = 'black'">更多</a></font></th></tr></table></div><!--包含input和button的div--><div style="font-size: 0px;"><div align="center" style="margin-top: 0px;"><img src="baidu.gif" alt="百度" width="280px" class="pic" /></div><div align="center"><!--action實(shí)現(xiàn)跳轉(zhuǎn)--><form action=""><input type="text" class="input" name="input" /><input type="submit" class="button" value="百度一下" /></form></div></div></body> </html>
實(shí)現(xiàn)的功能有：
頂部標(biāo)題超鏈接跳轉(zhuǎn)+鼠標(biāo)放置其上時(shí)，顏色改變+搜索框+輸入內(nèi)容時(shí)，邊框顏色改變+一些細(xì)節(jié)的實(shí)現(xiàn)
以上 如果此篇博客對您有幫助歡迎點(diǎn)贊與轉(zhuǎn)發(fā) 有疑問請留言或私信 2020/7/9
總結(jié)
以上是生活随笔為你收集整理的【Web】简单的HTML实现百度搜索的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot 博客开发 个人学
- 下一篇： 2022年工具钳工（技师）最新解析及工具