8.1轮播图学习

VIP文章 LIN861246

已于 2022-08-21 22:33:33 修改

阅读量72

点赞数

文章标签：前端 html

于 2022-08-17 19:34:07 首次发布

本文链接：https://blog.csdn.net/LIN861/article/details/126392901

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           /*
           * 设置outer的样式
           */
           #outer{
               /*设置宽和高*/
               width: 520px;
               height: 333px;
               /*居中*/
               margin: 50px auto;
               /*设置背景颜色*/
               background-color: greenyellow;
               /*设置padding*/
               padding: 10px 0;
               /*开启相对定位*/
               position: relative;
               /*裁剪溢出的内容*/
               overflow: hidden;
           }

           /*设置imgList*/
           #imgList{
               /*去除项目符号*/
               list-style: none;
               /*设置ul的宽度*/
               /*width: 2600px;*/
               /*开启绝对定位*/
               position: absolute;
               /*设置偏移量*/
               /*
               * 每向左移动520px，就会显示到下一张图片
               */
               left: 0px;
           }

           /*设置图片中的li*/
           #imgList li{
               /*设置浮动*/
               float: left;
               /*设置左右外边距*/
               margin: 0 10px;
           }

           /*设置导航按钮*/
           #navDiv{
               /*开启绝对定位*/
               position: absolute;
               /*设置位置*/
               botto