時(shí)間：2023-07-05 22:39:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-05 22:39:01 來源：網(wǎng)站運(yùn)營
HTML+CSS制作簡易百度首頁：
在線咨詢
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度一下，你就知道</title> <style type="text/css"> #img1{ position: relative; left: 650px; } ul li{ float:left; list-style: none; padding: 5px; } a{ padding: 5px; text-decoration:none; } #baidu{ text-align: center; } #input1{ font-size: 30px; width: 560px; } #db{ position:fixed; bottom:0; } #div1{ position: absolute; bottom: 0; right: 0; } #rebang{ font-size: 25px; position: relative; left: 610px; } ul li div{ display: none; } ul li:hover div{ display: block; } #C{ font-size: 20px; float: left; } #B{ position: absolute; margin-left: 260px; display: none; } #A{ font-size: 20px; width: 1000px; } #A:hover #B{ display: block; } #D{ font-size: 20px; float: right; } #F{ position: absolute; display: none; } #D:hover #F{ display: block; } #G{ height: 50px; float: right; } #H{ background-color: blue; } #J{ position: absolute; right: 800px; top: 300px; display: none; z-index: 2; } #G:hover #J{ display: block; } #Z{ width: 100px; height: 30px; } #W{ font-size: 22px; } </style> </head> <body> <div id="C"> <a href="http://news.baidu.com/" target="_blank">新聞</a> <a href="https://www.hao123.com/" target="_blank">hao123</a> <a href="https://map.baidu.com/@12126927,4038819,13z/" target="_blank">地圖</a> <a href="https://haokan.baidu.com/?sfrom=baidu-top/" target="_blank">視頻</a> <a href="https://tieba.baidu.com/index.html/" target="_blank">貼吧</a> <a href="https://xueshu.baidu.com//" target="_blank">學(xué)術(shù)</a> </div> <div id="A"> <a href="https://www.baidu.com/more//" target="_blank">更多</a> <div id="B"> <ul> <li><a href="https://pan.baidu.com/" target="_blank"><img src="imgs/wangpan.png"></img><br>網(wǎng)盤</a></li> <li><a href="https://zhidao.baidu.com/" target="_blank"><img src="imgs/zhidao.png"></img><br>知道</a></li> <li><a href="https://baike.baidu.com/" target="_blank"><img src="imgs/baike.png"></img><br>百科</a></li> <li><a href="https://image.baidu.com/" target="_blank"><img src="imgs/tupian.png"></img><br>圖片</a></li> </ul> <ul> <li><a href="https://baobao.baidu.com/" target="_blank"><img src="imgs/baobao.png"></img><br>寶寶</a></li> <li><a href="https://wenku.baidu.com/" target="_blank"><img src="imgs/wenku.png"></img><br>文庫</a></li> <li><a href="https://jingyan.baidu.com/" target="_blank"><img src="imgs/jingyan.png"></img><br>經(jīng)驗(yàn)</a></li> <li><a href="http://music.taihe.com/" target="_blank"><img src="imgs/yinyue.png"></img><br>音樂</a></li> </ul> </div> </div> <div id="G"> <a href="#"><input type="button" value="登錄"></input></a> <div id="J"> <img src="imgs/JJJ.png" > </div> </div> <div id="D"> <a href="#">設(shè)置</a> <div id="F"> <a href="#">搜索設(shè)置</a><br> <a href="#">高級搜索</a><br> <a href="#">關(guān)閉預(yù)測</a><br> <a href="#">隱私設(shè)置</a><br> </div> </div> <div id="img1"> <img src="imgs/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> </div> <div id="baidu"> <a href="#"><input id="input1" type="text" id="" value="" /><input id="Z" type="button" value="百度一下" /></a> </div> <div id="rebang"> <a href="http://top.baidu.com/?fr=mhd_card">百度熱榜</a> </div> <div id="resou" align="center"> <table id="W" border="0" cellspacing="5" cellpadding="25"> <tr> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%89%B9%E6%9C%97%E6%99%AE%E7%A7%B0NBA%E5%83%8F%E4%B8%80%E4%B8%AA%E6%94%BF%E6%B2%BB%E7%BB%84%E7%BB%87&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">1.特朗普炮轟NBA</a></td> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%AE%98%E6%96%B9%E8%B0%83%E6%9F%A5%E5%A5%B3%E6%95%99%E5%B8%88%E4%B8%BE%E6%8A%A5%E6%A0%A1%E9%95%BF%E6%80%A7%E9%AA%9A%E6%89%B0&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">4.官方調(diào)查女教師</a></td> </tr> <tr> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%94%A1%E8%8E%89%E4%B8%8D%E5%86%8D%E6%8B%85%E4%BB%BB%E6%AD%A6%E6%B1%89%E5%B8%82%E4%B8%AD%E5%BF%83%E5%8C%BB%E9%99%A2%E4%B9%A6%E8%AE%B0&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">2.蔡麗不再擔(dān)任杭州市醫(yī)院書記</a></td> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%99%88%E9%98%BF%E5%96%9C%E5%8E%BB%E4%B8%96&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">5.陳阿喜去世</a></td> </tr> <tr> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%85%A8%E7%90%83%E8%BF%9110%E4%BA%BF%E4%BA%BA%E5%8F%97%E7%B2%BE%E7%A5%9E%E5%81%A5%E5%BA%B7%E9%97%AE%E9%A2%98%E5%BD%B1%E5%93%8D&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">3.全球近10億人受精神健康問題影響</a></td> <td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E5%A2%83%E5%A4%96%E8%BE%93%E5%85%A59%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">6.31省區(qū)市新增境外輸入9例</a></td> </tr> </table> </div> <div id="db"> <ul> <li>設(shè)為首頁</li> <li>關(guān)于百度</li> <li>About Baidu</li> <li>百度營銷</li> <li>使用百度前必讀</li> <li>意見反饋</li> <li>幫助中心</li> </ul> </div> <div id="div1"> <ul> <li>@2020 Baidu</li> <li>(京)-經(jīng)營性-2017-0020</li> <li>京公網(wǎng)安備11000002000001號</li> <li>京ICP證030173號</li></ul> </div> </body></html>以上結(jié)果輸出如下圖：關(guān)鍵詞：簡易
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
