CSS综合案例——淘宝轮播图/焦点图布局的制作

最新推荐文章于 2024-04-16 17:05:02 发布

VIP文章我吃饭很慢.

最新推荐文章于 2024-04-16 17:05:02 发布

阅读量799

点赞数 1

分类专栏： CSS综合案例文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45586870/article/details/121386739

版权

轮播图如下：在这里插入图片描述
图片素材可在淘宝下，记得在代码中设定为相应的图片像素大小。

思路：

大盒子可以设置类名为： 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>

最低0.47元/天解锁文章

我吃饭很慢.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS综合案例——淘宝轮播图/焦点图布局的制作

轮播图如下：图片素材可在淘宝下，记得在代码中设定为相应的图片像素大小。思路：大盒子可以设置类名为： tb-promo 淘宝广告里面先放一张图片。左右两个按钮用链接就可以。左箭头 prev 右箭头 next底侧小圆点ul 继续做。类名为 promo-nav需要注意的是：相对定位不脱离标准流，可以通过margin： auto实现居中。但绝对定位和固定定位不可以，所以他们有相应的算法。代码如下：<!DOCTYPE html><html lang="en">&
复制链接

扫一扫