＜CSS练习＞淘宝轮播图案例含素材（CSS定位）

最新推荐文章于 2021-11-17 20:17:36 发布

April Story

最新推荐文章于 2021-11-17 20:17:36 发布

阅读量705

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS定位文章标签： css html 定位

本文链接：https://blog.csdn.net/weixin_47816527/article/details/118058520

该博客介绍了一个使用CSS定位实现的淘宝风格轮播图案例。内容包括如何设置大盒子、图片定位、左右按钮的布局以及底部指示点的创建。同时，讨论了CSS定位在转换元素display属性方面的作用，如inline-block、浮动和绝对定位，并提到了避免垂直外边距合并的方法。还涉及了圆角边框的设置规则。案例提供了实战操作和相关素材。

本案例综合了CSS定位的使用以及一些前端基础知识的结合
效果图如下：在这里插入图片描述
首先写一个大盒子里面放入主要图片
左按钮利用绝对定位设置在主要图片的左中位置
右按钮同理设置在右中位置
利用ul li设置下面的5个白点点放在主要图片的中中位置
参考上一篇博客：
＜CSS练习＞绝对定位的盒子居中
注：定位可以改变display属性：
没有width，仅内容可以调整块的宽度
1.可以用inline-block转化为行内块
2.可以用浮动float默认转化为行内块
3.绝对定位和固定定位也可以转化为行内块
盒子加了浮动或定位，不会有垂直外边距合并的问题

本案例中左按钮 :< 右按钮：>
圆角矩阵可以四个角分别设置圆度，但是有顺序的
可以理解成从左上角开始逆时针旋转

若4个角相同
border-radius：10px；

若分别设置4个角(如一：必须top在left前面）
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

左上角，左下角为圆角
border-radius:15px 0 0 15px;
等价于
border-top-left-radius:15px;
border-bottom-left-radius:10px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
    
    
				margin: 0;
				padding: 0;
			}
			li {
    
    
				list-style: none;
			}
			.taobao {
    
    
				/* 子绝父相 */
				positio