HTML制作banner图片上添加左右按钮代码

 时间:2024-10-22 21:37:07

1、这里的结构主要是一个大盒子,里面套着三个小盒子,小盒子一个是装着图片banner,两个小盒子分别是左右按钮

HTML制作banner图片上添加左右按钮代码

2、现在基本样子,效果如图所示,然后需要将下面的左右按钮定位到左右两侧

HTML制作banner图片上添加左右按钮代码

3、先对左右两个按钮,添加下效果,背景颜色,以及文字设置

HTML制作banner图片上添加左右按钮代码

4、整改后效果,如图所示

HTML制作banner图片上添加左右按钮代码

5、对父级以及两个小盒子分别添加相对定位、绝对定位设置

HTML制作banner图片上添加左右按钮代码

6、定位后的图形如图所示;因为两个按钮设置的是绝对定位,已经没有了他们的位置,所以并排叠在了一起

HTML制作banner图片上添加左右按钮代码

7、然后分别对左右按钮,添加左右的定位设置

HTML制作banner图片上添加左右按钮代码

8、最后就做成了如图所示的两个按钮效果了。

HTML制作banner图片上添加左右按钮代码
  • HTML用代码制作虚线框方法
  • 网页设计HTML中如何插入背景图片
  • HTML网页怎么设置圆角边框
  • 如何让图片在div中居中显示
  • html设置网页背景图片
  • 热门搜索
    山西运城旅游景点 深圳南澳岛旅游攻略 云南旅游酒店 环球旅游平台 北京密云旅游景点 国际旅游节 江苏盐城旅游景点 焦作旅游网 顺德旅游景点大全 大明山旅游攻略