本案例综合了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