【Web】简单的HTML实现百度搜索
生活随笔
收集整理的這篇文章主要介紹了
【Web】简单的HTML实现百度搜索
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
純HTML新手接到團隊的訓練任務，就著手開始寫了，沒用什么高大上的語法，都是最基本的語句實現的，僅供參考。
<!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設定當輸入框被點擊時，出現藍色外邊框text-indent: 11px;和padding-left: 11px;設定輸入的字符的起始位置與左邊框的距離--><style>input:focus {border: 2px solid rgb(62, 88, 206);}input {text-indent: 11px;padding-left: 11px;font-size: 16px;}</style><!--input初始狀態--><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初始狀態--><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'">學術</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實現跳轉--><form action=""><input type="text" class="input" name="input" /><input type="submit" class="button" value="百度一下" /></form></div></div></body> </html>
實現的功能有：
頂部標題超鏈接跳轉+鼠標放置其上時，顏色改變+搜索框+輸入內容時，邊框顏色改變+一些細節的實現
以上 如果此篇博客對您有幫助歡迎點贊與轉發 有疑問請留言或私信 2020/7/9
總結
以上是生活随笔為你收集整理的【Web】简单的HTML实现百度搜索的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot 博客开发 个人学
- 下一篇： web前端程序员到底值多少钱？