html轮播图兼容ie8,兼容IE8的响应式带标题带缩略图的图片轮播

最新推荐文章于 2021-06-16 05:07:15 发布

HylaruCoder

最新推荐文章于 2021-06-16 05:07:15 发布

阅读量288

点赞数

文章标签： html轮播图兼容ie8

本文详细介绍了一套CSS样式的设置方法，包括全局样式清除、背景颜色设定、字体样式、链接样式等，并针对不同屏幕尺寸进行了适配调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

html {

background: #222;

}

body {

_width: 70%;

color: #888;

font: 14px/20px Helvetica, Arial, sans-serif;

margin: 20px auto 0;

max-width: 800px;

text-align: center;

text-shadow: 0 -2px 1px #000;

-webkit-font-smoothing: antialiased;

}

p {

text-align: left;

max-width: 540px;

margin: 0 auto 20px;

}

a {

color: #fff;

text-decoration: none;

}

#wrapper {

padding: 20px;

}

.rslides {

margin: 0 auto 40px;

}

#slider2,

#slider3 {

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

margin: 0 auto;

}

.rslides_tabs {

list-style: none;

padding: 0;

background: rgba(0, 0, 0, .25);

box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px #000;

-moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px #000;

-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px #000;

font-size: 18px;

list-style: none;

margin: 0 auto 50px;

max-width: 540px;

padding: 10px 0;

text-align: center;

width: 100%;

}

.rslides_tabs li {

display: inline;

float: none;

margin-right: 1px;

}

.rslides_tabs a {

width: auto;

line-height: 20px;

padding: 9px 20px;

height: auto;

background: transparent;

display: inline;

}

.rslides_tabs li:first-child {

margin-left: 0;

}

.rslides_tabs .rslides_here a {

background: rgba(255, 255, 255, .1);

color: #fff;

font-weight: bold;

/* Callback example */

}

.events {

list-style: none;

}

.callbacks_container {

margin-bottom: 50px;

position: relative;

float: left;

width: 100%;

}

.callbacks {

position: relative;

list-style: none;

overflow: hidden;

width: 100%;

padding: 0;

margin: 0;

}

.callbacks li {

position: absolute;

width: 100%;

left: 0;

top: 0;

}

.callbacks img {

display: block;

position: relative;

z-index: 1;

height: auto;

width: 100%;

border: 0;

}

.callbacks .caption {

display: block;

position: absolute;

z-index: 2;

font-size: 20px;

text-shadow: none;

color: #fff;

background: #000;

background: rgba(0, 0, 0, .8);

left: 0;

right: 0;

bottom: 0;

padding: 10px 20px;

margin: 0;

max-width: none;

}

.callbacks_nav {

position: absolute;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

top: 52%;

left: 0;

opacity: 0.7;

z-index: 3;

text-indent: -9999px;

overflow: hidden;

text-decoration: none;

height: 61px;

width: 38px;

background: transparent url("themes.gif") no-repeat left top;

margin-top: -45px;

}

.callbacks_nav:active {

opacity: 1;

}

.callbacks_nav.next {

left: auto;

background-position: right top;

right: 0;

}

#slider3-pager a {

display: inline-block;

}

#slider3-pager img {

float: left;

}

#slider3-pager .rslides_here a {

background: transparent;

box-shadow: 0 0 0 2px #666;

}

#slider3-pager a {

padding: 0;

}

@media screen and (max-width: 600px) {

.callbacks_nav {

top: 47%;

}