tx5-网易轮播图01css部分

来源：互联网发布：软件开发的账务处理编辑：程序博客网时间：2024/06/10 07:56

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="wy-css.css"/></head><body>    <div class="w-slider">        <div class="slider">        </div>        <div class="slider-ctrl">            <span class="slider-ctrl-prev"></span>            <span class="slider-ctrl-con current"></span>            <span class="slider-ctrl-con"></span>            <span class="slider-ctrl-con"></span>            <span class="slider-ctrl-con"></span>            <span class="slider-ctrl-con"></span>            <span class="slider-ctrl-con"></span>            <span class="slider-ctrl-next"></span>        </div>    </div></body></html>

css部分 wy-css

*{    margin: 0;    padding: 0;}.w-slider{    width: 310px;    height: 265px;    background-color: pink;    margin: 100px auto;    position: relative;}.slider{    width: 310px;    height: 220px;    background-color: purple;}.slider-ctrl{    text-align: center;    padding-top: 5px;}.slider-ctrl-con{    width: 24px;    height: 20px;    display: inline-block;    background:url("images/w-icon.png") no-repeat -24px -782px;    margin: 0 5px;    cursor: pointer;}.current{    background-position: -24px -762px;}.slider-ctrl-prev,.slider-ctrl-next{    width: 30px;    height: 35px;    background: url("images/w-icon.png") no-repeat 6px top;    position: absolute;    top: 50%;    margin-top: -35px;    opacity: 0.7;}.slider-ctrl-prev{    left: 0;}.slider-ctrl-next{    right: 0;    background-position: -6px -44px;}

0 0