HTML 做百度搜索页图片覆盖了搜索框怎么解决

<!doctypehtml><html><head><metacharset="utf-8"><title>今日新鲜事_百度搜索</title><styletype="t... <!doctype html><html><head><meta charset="utf-8"><title>今日新鲜事_百度搜索</title> <style type="text/css"> *{ margin: 0; padding: 0; } .div01{ height: 50px; width: 100%; background: hsla(0,0%,100%,1.00); position: fixed; padding: 11px; padding-bottom: 20px; } .text01{ height: 40px; width:60%; max-width: 700px; min-width: 500px; font-size: 20px; } img{ position: relative; top: 9px; } .button01{ height: 44px; width: 125px; position:fixed; top: 20px; background: hsla(216,100%,60%,1.00); color: aliceblue;font-size: 20px; } .div02{ height: 44; width: 100%; padding-top:80px; padding-left: 110px; background: hsla(0,0%,97%,1.00); } ul li{ list-style: none; float: left; } li{ margin-left: 27px; font-size: 20px; line-height: 50px; color:hsla(0,0%,40%,1.00); display: block; } ul{ overflow: hidden; background: hsla(0,0%,97%,1.00); } .p1{ color:hsla(0,0%,40%,1.00); text-indent:138px; font-size: 13px; } .div03{ height: 160px; width: 600px; border:solid 1px hsla(0,0%,40%,1.00); margin: 10px 135px } .p2{ margin-left:160px; margin-top:-130px; color: hsla(210,9%,70%,1.00); } .p3{ margin-left:160px; margin-top: 10px; color: hsla(210,9%,40%,1.00); } .h1{ margin-left:160px; margin-top: 10px } .img1{ margin-left: 10px; } </style></head> <body> <div class="div01"> <form action="#" method="get"> <img src="../img/baidu_jgylogo.gif"> <input class="text01" type="text" value="今日新鲜事"> <input class="button01" type="button" value="百度一下"> </form> </div> <div class="div02"> <ul> <a href="#"><li><strong>网页</strong></li></a> <a href="#"><li>资讯</li></a> <a href="#"><li>视频</li></a> <a href="#"><li>图片</li></a> <a href="#"><li>知道</li></a> <a href="#"><li>文库</li></a> <a href="#"><li>贴吧</li></a> <a href="#"><li>采购</li></a> <a href="#"><li>地图</li></a> <a href="#"><li>更多»</li></a> </ul> </div> <p class="p1">百度为您找到相关结果约10,500,000个</p> <div class="div03"> <img src="../img/long.png" class="img1"> <p class="p2">2019年6月29日(星期六)</p> <h2 class="h1">龙船节</h2> <p class="p3">农历五月廿四至廿七是龙船节。苗族的端午节有龙舟竞渡的习俗，居住黔东南的台江、凯里、剑河、施秉、镇远...<a href="https://baike.baidu.com/item/%E9%BE%99%E8%88%B9%E8%8A%82?from=kg_qa">查看更多</a></p> </div></body></html> 展开





 我来答

2个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

23...7@qq.com
2019-07-02 · 超过19用户采纳过TA的回答

知道答主

回答量：54

采纳率：60%

帮助的人：14.9万

我也去答题访问个人页

关注

展开全部

<!doctype html><html><head>
<meta charset="utf-8"><title>今日新鲜事_百度搜索</title> <style type="text/css">
*{ margin: 0; padding: 0; }
.w {width: 1200px;margin:0 auto;}
.div01{ height: 80px; width: 100%; background: hsla(0,0%,100%,1.00); padding-bottom: 20px; }
.logo img {width: 150px; margin-right:30px;position: relative; top: 13px;}
.text01{ height: 40px; width:600px; font-size: 20px; }
.button01{ height: 44px; width: 125px; background:blue; color: aliceblue;font-size: 20px; }
.div02{width: 100%;background: #f5f5f5 } ul li{ list-style: none; float: left; }
.div02 ul{ overflow: hidden; background: hsla(0,0%,97%,1.00);}
.div02 li{ padding: 0 20px; font-size: 20px; line-height: 50px; color:#555; display: block;transition: all 1s }
.div02 li:hover {background: #1bb3cc}
.p1{ color:hsla(0,0%,40%,1.00); font-size: 13px;margin-top: 15px; }
.p2 {margin-bottom: 30px}
.div03{ border:solid 1px #ddd; margin-top: 10px;padding: 10px ;position: relative;}
.div03 .tmpimg {margin-right:20px}
.div03 img {width: 140px;height: 140px}
.div03>div {display: inline-block;height: 140px; float: left;}
.div03:after { clear: both; display: block; height: 0px; content: ".";}

</style></head>
<body>
<div class="div01">
<div class="logo w">
<form action="#" method="get"> <img src="../img/枣弯baidu_jgylogo.gif">
<input class="text01" type="text" value="今日新鲜事"><input class="button01" type="button" value="百度一下">
</form>
</div>
</div>
<div class="div02">
<ul class="w">
<a href="#"><li><strong>网页</strong></li></a>
<a href="#"><li>资讯<租兄/li></a>
<a href="#"><li>视频</li></a>
<a href="#"><li>图片</li></a>
<a href="#"><li>知道</li></a>
<a href="#"><li>文库</li></a>
<a href="#"><li>贴吧</li></a>
<a href="#"><li>采购</li></a>
<a href="#"><li>地图</li></a>
<a href="#"><li>更多»</li></a>
</ul>弊岩袭
</div>
<p class="p1 w">百度为您找到相关结果约10,500,000个</p>
<div class="div03 w">
<div class="tmpimg">
<img src="../img/long.png" class="img1">
</div>
<div>
<p class="p2">2019年6月29日(星期六)</p> <h2 class="h1">龙船节</h2> <p class="p3">农历五月廿四至廿七是龙船节。苗族的端午节有龙舟竞渡的习俗，居住黔东南的台江、凯里、剑河、施秉、镇远...<a href="https://baike.baidu.com/item/%E9%BE%99%E8%88%B9%E8%8A%82?from=kg_qa">查看更多</a>
</p>
</div>
</div>
</body></html>

已赞过 已踩过<

评论收起

要不断的粘痰
2019-07-01 · 超过19用户采纳过TA的回答

知道答主

回答量：109

采纳率：33%

帮助的人：32万

我也去答题访问个人页

关注

展开全部

给 div01 加这个 z-index: 99999; 属性可以吗？

追问

z-index这个属性我不知道诶 怎么用呢？

追答

直接加这里面试试呢 z-index 就是设置元素的堆叠顺序值越高越在上面！

本回答被提问者采纳

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

专注人像摄影AI创作平台，天使宝宝，浪漫花海，大梦敦煌，冰雪公主，小小士兵，魔法少年，多种写真邀您体验，注册即享免费生成，立即尝鲜!用AI技术定制你的专属魅力。

photo.baidu.com广告

图片内容搜索-批量搜索图片中文字的方法

图片内容搜索:在文件夹中搜索图片中的文字，也可在Word中搜索图片中的文字，快速找出含有搜索词的所有本地图片，支持图片分类，图片内文字查找/复制，功能齐全

www.zhsh10000.com广告

HTML 做百度搜索页图片覆盖了搜索框怎么解决

您可能关注的内容

其他类似问题

为你推荐：