HTML+CSS制作简易百度首页（代码）-天涯论坛

wrjc1hod 发表于 2024-7-27 22:31:48

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{
 bac公斤round-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">学术</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>网盘</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>经验</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="#">设置</a>
<div id="F">
<a href="#">搜索设置</a><br>
<a href="#">高级搜索</a><br>
<a href="#">关闭预测</a><br>
<a href="#">隐私设置</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.官方调查女教师</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.蔡丽再也不担任武汉市医院书记</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省区市新增境外输入9例</a></td>
</tr>
</table>
</div>
<div id="db">
<ul>
<li>设为首页</li>
<li>关于百度</li>
<li>About Baidu</li>
<li>百度营销</li>
<li>运用百度前必读</li>
<li>意见反馈</li>
<li>帮忙中心</li>
</ul>
</div>
<div id="div1">
<ul>

<li>@2020 Baidu</li>
<li>(京)-经营性-2017-0020</li>
<li>京公网安备11000002000001号</li>
<li>京ICP证030173号</li></ul>
</div>
</body>
</html>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">以上代码写出来的结果如下图：</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/fe8c7e783304457eb8f972226ac4619d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664117&x-signature=vd3p22yYscp%2FTpWHz8ET3OmH7qU%3D" style="width: 50%; margin-bottom: 20px;"></div>
新手勿喷！！！

7wu1wm0 发表于 2024-10-3 21:38:58

你的话语如春风拂面，温暖了我的心房，真的很感谢。

wrjc1hod 发表于 2024-10-10 02:01:08

我完全同意你的观点，说得太对了。

页: [1]

天涯论坛's Archiver

HTML+CSS制作简易百度首页（代码）