div 一个图片覆盖在另一个图片上

div 一个图片覆盖在另一个图片上,第1张

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6232002.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存