轮播的样式

最新推荐文章于 2023-03-25 21:55:42 发布

原创最新推荐文章于 2023-03-25 21:55:42 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

注意看红色箭头，共有11个步骤，按顺序操作下去

1、首先，现在桌面新建一个文件夹，里面放html文档、css外部样式、js交互和图片。打开DW新建或者(ctrl+n)建立一个html，接下来就是设置页面了。在<title>标签改此页面在浏览器中的名称。转到<body>标签对。给个<div>标签。第一个<div>标签相当于包围圈，把所有内容都放在里面。第二个<div>标签放置的是图片。使用到<img>标签，把图片导进入就可以了。注意：图片要导对了，导错的话图片就显示不出来了。两个<div>标签都给了类。

2、接下来的<div>标签，放置轮播图片右下角的按钮。使用了<span>标签来表示按钮 <div>标签给了类，<span>标签给了index。最后两个按钮就是左右切换键。使用到了<a>标签也给了类。这个类只能定义左右箭头，不能定义其他的。箭头的标志用到“<”和“>”。然后引入js。

3、这是一个css外部样式，*表示通配符，设置内外边距都为0。因为html有使用到a标签，所以设置a标签的样式是none，没有样式的意思。这两个样式，能使整个页面都可以使用到。

4、这是设置包围圈的样式，设置外边距为40像素，相对定位。宽度为670像素、高度为320像素。Overflow:hidden设置内容溢出元素框隐藏可以用来去除浮动效果。接着就是html的第二个div的样式。用它的类定义，绝对定位，宽度是七张图片加起来的总数4690像素，高度还是那个高度。设置图片的样式，左浮动，宽高与上方一致。第二个div的样式就差不多设置完了。

5、到按钮的样式了，设置绝对定位。距离顶部265像素，距离右边15像素，到<span>标签了，行内元素与块级元素之间的相互转化：display，按钮的宽度和高度为20像素，行高也为20像素，内容居中，字体大小为12像素，再设置一下背景颜色就行了。

6、接着a标签，同样的行内元素与块级元素之间的相互转化：display，绝对定位、距离图片的顶部48%、宽度和高度与行高都是30像素，设置背景色，左右键的大小为30像素，内容居中，左右键的颜色为白色，左键距离左边为2%，右键距离右边同样为2%，行内元素与块级元素的转换，伪类。标签a的伪类设置背景色。

7、js部分，设置轮播。通过改变图片列表的left的属性值，来完成轮播效果，alert()浏览器弹出框。首先是左右切换，文档加载完成后执行里面的代码，var声明一个变量，通过document.getElementById()，通过ID获取对象。Console.log()控制台。获取到prev按钮和next按钮。