DIV+CSS编程中各浏览器兼容问题

最新推荐文章于 2022-08-14 11:53:44 发布

Baiychenvip

最新推荐文章于 2022-08-14 11:53:44 发布

阅读量587

点赞数

分类专栏： Html-Css-JavaScript 文章标签：浏览器 CSS

本文链接：https://blog.csdn.net/Baiychenvip/article/details/8804433

版权

Html-Css-JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<title></title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}
.contain {
	width:980px;
	height:120px;
	padding:0px;
	margin:10px;
	background-position:center;
	background:URL("adv.png") no-repeat top;
	position:relative;
}
ul{
	height:105px;
	width:925px;
	margin:0px;
	list-style:none;
	padding:0px;
}
li{
	float:left;
	width:295px;
	height:105px;
	margin-left:10px;
	position: relative;
	padding:0px;
}
li div{
	height:100px;
	width:290px;
	cursor:pointer;
	float:left;
	margin:0px;
	padding:0px;
}
.adv{
	width:110px;
	height:26px;
	position: absolute;
	left:1px;
	top:87px;
	background:URL("adv2.jpg");
	margin:0px;
	padding:0px;
}
.adv:hover{
	background:URL("adv1.png");
}
</style>
</head>
<body>
<center>
<div class="contain">

<ul>
<li><a href="javascript:alert('1');"><div>
<div class="adv" style="left:81px;"></div>
</div></a></li>
<li><a href="javascript:alert('2');"><div>
<div class="adv" style="left:99px;"></div>
</div></a></li>
<li><a href="javascript:alert('3');"><div>
<div class="adv" style="left:108px;"></div>
</div></a></li>
</ul>

</div>
</center>
</body>
</html>

效果图：

标签包裹问题一定要注意postion：relative；样式

Baiychenvip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS编程中各浏览器兼容问题

代码： body{ margin:0px; padding:0px;}.contain { width:980px; height:120px; padding:0px; margin:10px; background-position:center; background:URL("adv.png") no-repeat top; position:relat
复制链接

扫一扫

专栏目录