HTML第八章定位网页元素上机题2-------带按钮的图片横幅广告

最新推荐文章于 2021-06-04 10:09:27 发布

倩倩之

最新推荐文章于 2021-06-04 10:09:27 发布

阅读量7.1k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36074113/article/details/52883842

版权

本文展示了一个HTML实例，用于创建一个带有按钮的图片横幅广告。使用了CSS进行定位，使得按钮位于横幅广告的右下角。广告图片大小为430px * 130px，通过CSS的`position:absolute`实现按钮的精确布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带按钮的图片横幅广告</title>
<link href="css/advert.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="adverImg"><img src="image/adver-01.jpg" alt="夏日商品促销" />
  <div id="number">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>
</body>
</html>





#adverImg {
	width:430px;
	height:130px;
	position:relative;
	overflow:hidden;
}
#nu

最低0.47元/天解锁文章

倩倩之

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
HTML第八章定位网页元素上机题2-------带按钮的图片横幅广告

带按钮的图片横幅广告 1 2 3 4 5 #adverImg { width:430px; height:130px; position:relative; overflow:hidden;}#number { position:absolute; right:5px
复制链接

扫一扫