1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建图层1，同时设置div的class为div1，主要用于下面通过该class来设置css样式。
3、在test.html文件内，再使用div标签创建图层2，同时设置div的class为div2。
4、在css标签内，对页面的div元素进行样式统一设置，定义它们的宽度和高度都为250px。
5、在css标签内，对类名div1的div（图层1）进行样式设置，使用position设置div为相对定位，使用background设置div背景颜色为红色，使用z-index设置div层级为1。
6、在浏览器打开test.html文件，查看实现的效果。
实现的方法和详细的 *** 作步骤如下：
1、第一步，打开 *** 作软件并使用DW定义内部CSS样式，见下图，然后进入下一步。
2、其次，完成上述步骤后，看一下背景图片的效果，见下图，然后进入下一步。
3、接着，完成上述步骤后，将img添加到div并输入以下代码，见下图，然后进入下一步。
4、最后，完成上述步骤后，就获得了想要的结果了，如下图所示。这样，问题就解决了。
<!doctype html><html><head><meta charset="utf-8"><title>今日新鲜事_百度搜索</title> <style type="text/css">
*{ margin: 0 padding: 0 }
.w {width: 1200pxmargin:0 auto}
.div01{ height: 80px width: 100% background: hsla(0,0%,100%,1.00) padding-bottom: 20px }
.logo img {width: 150pxmargin-right:30pxposition: relative top: 13px}
.text01{ height: 40px width:600px font-size: 20px }
.button01{ height: 44px width: 125px background:blue color: alicebluefont-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: blocktransition: all 1s }
.div02 li:hover {background: #1bb3cc}
.p1{ color:hsla(0,0%,40%,1.00) font-size: 13pxmargin-top: 15px }
.p2 {margin-bottom: 30px}
.div03{ border:solid 1px #ddd margin-top: 10pxpadding: 10px position: relative}
.div03 .tmpimg {margin-right:20px}
.div03 img {width: 140pxheight: 140px}
.div03>div {display: inline-blockheight: 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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）