由HTML和CSS寫的Google頁面

時間 2019-11-07

標籤 html css 寫的 google 頁面欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 100%; height: 32px; text-decoration: none; font-size: 13px; line-height: 30px; background-color: #2D2D2D; } .main a{ text-decoration: none; color: #fff; } .main1{ text-decoration: none; float:right; clear: right; } .main ul li{ color: #fff; font-family: 微軟雅黑; list-style-type: none; margin-left: 10px; float: left; } .top{ width: 100%; height: 45px; font-size: 13px; line-height: 40px; background-color: #F2F2F2; margin-top: 52px; } .top a{ text-decoration: none; } .toptwo{ float:right; clear: right; } .body{ width: 600px; height: 300px; margin-left: 350px; margin-top: 250px; text-align: center; } .sousuo input{ width: 450px; height: 20px; } .submit input{ width: 80px; height: 30px; background-color: #F3F3F3; border: none; margin-top: 20px; opacity: 0.6; } .bodytop{ font-size: 10px; margin-top: 40px; } .bodytop a{ font-size: 10px; } .submit input:hover{ opacity: 1; } .top a:hover{ text-decoration: underline; } .main ul li:hover{ background-color: #6d6d6d; } </style> </head> <body> <div class="main"> <ul> <li><a href="">+你</a></li> <li><a href="">搜索</a></li> <li><a href="">地圖</a></li> <li><a href="">圖片</a></li> <li><a href="">Play</a></li> <li><a href="">You Tube</a></li> <li><a href="">新聞</a></li> <li><a href="">Gmeil</a></li> <li><a href="">更多</a></li> <div class="main1"><a href="#">登錄</a> </div> </ul> </div> <div class="body"> <div class="body1"> <img src="logo11w.png" width="300" height="150" /> <label>谷歌</label> </div> <div class="sousuo"> <input type="text" value="搜索"/> </div> <div class="submit"> <input type="submit" value="Google搜索"/> <input type="button" value="手氣不錯"/> </div> <div class="bodytop"> <label>Google.com.hk 使用下列語言：</label> <a href="">中文(繁體)</a> <a href="">English</a> </div> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div class="top"> <a href=""> 廣告</a> <a href=""> 商務</a> <a href=""> Google大全</a> <div class="toptwo"> <a href="">新的隱私權政策和條款 </a> <a href=""> 設置</a> <a href=""> Google.comn </a> </div> </div> </body> </html>