轮播图如下:
图片素材可在淘宝下,记得在代码中设定为相应的图片像素大小。
思路:
- 大盒子可以设置类名为: tb-promo 淘宝广告
- 里面先放一张图片。
- 左右两个按钮用链接就可以。 左箭头 prev 右箭头 next
- 底侧小圆点ul 继续做。 类名为 promo-nav
需要注意的是:相对定位不脱离标准流,可以通过margin: auto
实现居中。但绝对定位和固定定位不可以,所以他们有相应的算法。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图做法</title>
<style>
* {