IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

bootstrap布局，内外边距出现问题，布局崩溃

0

1

bottstrap 边距

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>

该问题已被官方收录

使用ul模拟下拉列表的时候，下拉列表背景出现透明

0

1

下拉菜单布局

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* CSS 代码 */
       .header {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 80px; }

        .header .select {
            width: 100%;
            height: 35px;
            background-color: #fff;
            border-bottom: 1px solid #eee; }

        .select:after {
            content: '';
            display: block;
            clear: both; }

        .select .adress,
        .select .eat,
        .select .condition {
            position: relative;
            float: left;
            width: 33.3%;
            font-size: 14px;
            line-height: 35px;
            margin: 0 auto;
            text-align: center; }

        .select .arrow {
            position: absolute;
            top: 15px;
            right: 5px;
            width: 10px;
            height: 8px;
            background: url(./img/task6.png) no-repeat -130px 0;
            -webkit-background-size: 250px;
            background-size: 250px; }

        .select .adlist,
        .select .eatlist,
        .select .conlist {
            height: 0;
            overflow: hidden;
            transition: all 0.5s ease; }

        .select .adlist li,
        .select .eatlist li,
        .select .conlist li {
            width: 100%;
            background-color: #fafafa;
            text-align: center; }

        .select .split {
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 35px;
            background: url(./img/task6.png) no-repeat -370px 50%;
            -webkit-background-size: 400px 35px;
            background-size: 400px 35px; }

        .select .adress:hover .adlist,
        .select .eat:hover .eatlist,
        .select .condition:hover .conlist {
            height: 180px; }

        .main {
            width: 100%;}

        .wrapper {
            width: 100%;
            position: absolute;
            top: 35px; }

        .list {
            width: 100%; }

        .list .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            font-size: 14px;
            border-bottom: 1px solid #ccc; }

        .item .info {
            width: 100%; }

        .item .info .date,
        .item .info .time,
        .item .info .local {
            position: relative;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 35px;
            width: 70%;
            color: #999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }

        .item .info .time {
            font-size: 12px;
            color: #000; }

        .item .price {
            position: relative;
            color: #e63b0e;
            margin-right: 25px;
            white-space: nowrap; }

        .item .date:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .local:before {
            position: absolute;
            top: 3px;
            left: 15px;
            content: '';
            display: block;
            width: 14px;
            height: 13px;
            background: url(./img/task6.png) no-repeat -62px 0;
            -webkit-background-size: 230px;
            background-size: 230px; }

        .item .price:after {
            position: absolute;
            top: 3px;
            right: -15px;
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border: 2px solid #5fc0cd;
            border-left: 2px solid rgba(95, 192, 205, 0);
            border-bottom: 2px solid rgba(95, 192, 205, 0);
            transform: rotateZ(45deg); }

<!-- html 代码 -->
 <header class="header">
        <div class="select">
            <ul>
                <li class="adress">
                    <p>所在地</p>
                    <div class="arrow"></div>
                    <ul class="adlist">
                        <li>定位</li>
                        <li>龙华区</li>
                        <li>龙岗区</li>
                        <li>宝安区</li>
                        <li>福田区</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="eat">
                    <p>食宿</p>
                    <div class="arrow"></div>
                    <ul class="eatlist">
                        <li>需要</li>
                        <li>不需要</li>
                    </ul>
                    <div class="split"></div>
                </li>
                <li class="condition">
                    <p>病人情况</p>
                    <div class="arrow"></div>
                    <ul class="conlist">
                        <li>健康</li>
                        <li>良好</li>
                        <li>一般</li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
    <main class="main">
        <div class="wrapper">
            <ul class="list">
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
                <li class="item">
                    <div class="info">
                        <p class="date">服务日期</p>
                        <p class="time">2015-7-5 至 2015-7-12</p>
                        <p class="local">北京·通州·果园</p>
                    </div>
                    <div class="price"><p>25元/小时</p></div>
                </li>
            </ul>
        </div>
    </main>

该问题已被官方收录

页面布局问题，十万火急！大佬速来！

1

1

布局

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        background: #ccc;
        width:500px;
        height:500px;
        position:absolute;
        left:-300px;
    }
</style>
<body>
    <div></div>
</body>
</html>

该问题已被官方收录

响应式布局出现滚动条

0

1

媒体查询

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./SCSS/task14-3/task14-3.css">
    <!-- 自己外部引用css文件 -->
</head>

<body>
    <header>
        <div class="container">
            <!-- 固定宽度，响应式布局 -->
            <div class="row headd">
                <!-- 栅格布局列部分 -->
                <div class="col-6 box-left">
                    <!-- 顶部盒子左边部分栅格布局 -->
                    <p class="call">客服热线：010-594-78634</p>
                </div>
                <!-- 网格系统左边部分 -->
                <div class="col-6 box-right">
                    <!-- 栅格布局右边部分 -->
                    <button class="WX"></button>
                    <button class="QQ"></button>
                    <button class="WB"></button>
                    <!-- 右边三个雪碧图 -->
                </div>
            </div>
        </div>
        <div style=" background-color: #1DB176;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="nav">
                            <div class="nav-brand">
                                <img src="./SCSS/img/home-logo-hs.png" style="width:200px">
                            </div>
                            <!-- 折叠按钮 -->
                            <input type="checkbox" id="nav-button">
                            <div class="nav-button-border">

                                <label for="nav-button"></label>
                            </div>
                            <!-- 折叠文本 -->
                            <div class="nav-text">
                                <ul class="navbar-nav" style=" padding-right: 15px;">
                                    <li>
                                        <a class="nav-link" href="task14-1.html">首 页</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="task14-3.html">职 业</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="task14-2.html">推 荐</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="#">关 于</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
@charset "UTF-8";
html {
  font-size: 625%;
}

body {
  margin: 0;
  font-size: .16rem;
  background: #fafafa;
}

button {
  padding: 0;
  border: none;
  outline-style: none;
  outline: none;
  background: transparent;
}

p {
  padding: 0;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

input {
  display: none;
}

table, th, td {
  border: 1px solid #999999;
}

table {
  border-collapse: collapse;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.col-1 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
  min-height: 1px;
}

.col-2 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
  min-height: 1px;
}

.col-3 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  min-height: 1px;
}

.col-4 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
  min-height: 1px;
}

.col-5 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 41.66667%;
          flex: 0 0 41.66667%;
  min-height: 1px;
}

.col-6 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  min-height: 1px;
}

.col-7 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58.33333%;
          flex: 0 0 58.33333%;
  min-height: 1px;
}

.col-8 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.66667%;
          flex: 0 0 66.66667%;
  min-height: 1px;
}

.col-9 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  min-height: 1px;
}

.col-10 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 83.33333%;
          flex: 0 0 83.33333%;
  min-height: 1px;
}

.col-11 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 91.66667%;
          flex: 0 0 91.66667%;
  min-height: 1px;
}

.col-12 {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  min-height: 1px;
}

@media (max-width: 360px) {
  .headd {
    -ms-flex-wrap: initial;
        flex-wrap: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (max-width: 360px) {
  .box-right {
    padding-right: 12%;
  }
}

@media (min-width: 360px) {
  .box-right {
    padding-right: 35px;
  }
}

.box-left {
  line-height: .3rem;
}

.call {
  width: 150px;
  margin: auto;
  margin-left: 0;
  font-size: 7px;
  color: green;
}

.box-right {
  margin: auto;
  margin-top: 6px;
  text-align: right;
  zoom: .8;
}

.WX {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprit00000es.png) no-repeat 95.777% 46.05%;
  zoom: .9;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图1设置 */
.QQ {
  width: 25px;
  height: 24px;
  border: 0;
  margin-left: 9.5px;
  margin-right: 9.5px;
  background: url(../img/css_sprit00000es.png) no-repeat no-repeat 95.777% 31.261%;
  zoom: .9;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图2设置 */
.WB {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprit00000es.png) no-repeat 95.777% 38.655%;
  zoom: .9;
  outline: none !important;
}

.bg-green {
  background-color: #1DB176;
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 575px) {
  .nav {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.nav .nav-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav .nav-button-border {
  display: none;
  margin: 5px;
  padding: 5px;
  border: .03rem solid #3fb886;
}

.nav .nav-button-border label {
  display: inline-block;
  padding: .06rem 0;
  width: .24rem;
  height: .18rem;
  border-top: .02rem solid #94d8bc;
  border-bottom: .02rem solid #94d8bc;
  background: #94d8bc;
  background-clip: content-box;
}

@media screen and (max-width: 575px) {
  .nav .nav-button-border {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.nav .nav-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-transition: height 1s;
  transition: height 1s;
}

@media screen and (max-width: 575px) {
  .nav .nav-text {
    height: 0;
  }
  .nav .nav-text li {
    height: 0 !important;
  }
  .nav .nav-text li .nav-link {
    height: 0 !important;
  }
}

@media screen and (max-width: 575px) {
  .nav .nav-text {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: center;
  }
}

.nav .nav-text .navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-right: -10px;
}

.nav .nav-text .navbar-nav li {
  -webkit-transition: height 1s;
  transition: height 1s;
  height: 0.6rem;
  margin-left: .8vw;
  padding: 0 10px;
}

.nav .nav-text .navbar-nav li .nav-link {
  -webkit-transition: height 1s;
  transition: height 1s;
  padding: 0;
  line-height: .575rem;
  font-size: .16rem;
  color: white;
  white-space: nowrap;
}

.nav .nav-text .navbar-nav li:hover {
  border-bottom: .02rem solid white;
}

@media screen and (max-width: 575px) {
  .nav .nav-text .navbar-nav li {
    margin-left: 0;
  }
}

@media screen and (max-width: 575px) {
  .nav .nav-text .navbar-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (max-width: 575px) {
  .nav #nav-button:checked ~ .nav-text {
    height: 2.4rem;
  }
  .nav #nav-button:checked ~ .nav-text li {
    height: .6rem !important;
  }
  .nav #nav-button:checked ~ .nav-text .nav-link {
    height: .575rem !important;
  }
}

该问题已被官方收录

怎么实现轮播图无限轮播

0

1

轮播

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

window.onload = function () {
    var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var timer;
    function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
       //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'vw';
        //无限滚动判断
        if (newLeft > -100) {
            list.style.left = -500 + 'vw';
        }
        if (newLeft < -500) {
            list.style.left = -100 + 'vw';
        }
    }
    function play() {
        //重复执行的定时器
        timer = setInterval(function () {
            next.onclick();
        }, 2000)
    }
    function stop() {
        clearInterval(timer);
    }
    function buttonsShow() {
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
            if (buttons[i].className == "on") {
                buttons[i].className = "";
            }
        }
        //数组从0开始，故index需要-1
        buttons[index - 1].className = "on";
    }
    prev.onclick = function () {
        index -= 1;
        if (index < 1) {
            index = 5
        }
        buttonsShow();
        animate(100);
    };
    next.onclick = function () {
        //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
        index += 1;
        if (index > 5) {
            index = 1
        }
        animate(-100);
        buttonsShow();
    };
    for (var i = 0; i < buttons.length; i++) {
        (function (i) {
            buttons[i].onclick = function () {
                /*   这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                /*   由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                var clickIndex = parseInt(this.getAttribute('index'));
                var offset = 100 * (index - clickIndex); //这个index是当前图片停留时的index
                animate(offset);
                index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
                buttonsShow();
            }
        })(i)
    }
    container.onmouseover = stop;
    container.onmouseout = play;
    play();
}

该问题已被官方收录

如果上传到自己的githup里面，那要怎么上传到公共的？

0

1

git 代码管理

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

上传图片的进度条

0

1

bottstrap

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML
<td>
<uib-progressbar value="progress" style="margin-bottom: 0;" type="null" animate="true" >{{progress}}%</uib-progressbar>
</td>
JS
//选择文件
$scope.fileReader = new FileReader();//创建FileReader接口
$scope.fileChanged = function(respond){
$scope.$apply(function(){
console.log(respond);
$scope.files = respond.files[0];//保存要上传的图片信息到files,.respond.files[0]表示选择第一个上传的文件的数据。input标签设置了multiple属性的话，当上传两个文件时，则ele.files[1]可以选择到第二个上传的文件的数据。
       console.log($scope.files);
$scope.input = respond; //保存input file这个DOM节点
       console.log($scope.input);
$scope.fileName = $scope.files.name;//文件的名
       console.log($scope.fileName);
$scope.fileSize = $scope.files.size/1024/1024;//文件大小
       console.log($scope.fileSize);
$scope.progress=0;
});
};

// 上传图片
$scope.upload = function(){
//创建FormData用来存放上传的参数
   var formData = new FormData();
//调用FileReader对象的方法，readAsDataURL该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
   $scope.fileReader.readAsDataURL($scope.files);
//用append()方法以键值对的形式把参数存入formData中，按照接口文档请求参数key为file，value为上传的文件
   formData.append("file",$scope.files);
console.log($scope.fileSize);
if($scope.fileSize <= 5242880){
$http({
method: 'post',
url: '/carrots-admin-ajax/a/u/img/task',
data: formData,
headers:{"Content-Type":undefined},
//将事件侦听器绑定到XMLHttpRequest上传对象。用来监听progress事件，这个事件会在读取中时会触发。
           uploadEventHandlers: {
progress: function(respond){
console.log(respond);
//respond.loaded为已上传文件的大小，respond.total为要上传文件的总大小。两者相除得到的$scope.progress值是用来表示进度条的
                   $scope.progress = (respond.loaded/respond.total)*100;
console.log($scope.progress);
}
}
}).then(function successCallback(respond){
$scope.status = respond.data.message;
$scope.src = respond.data.data.url;
console.log($scope.src);
$scope.okIcon=true;
});
}else{
alert('文件大于5MB');
$scope.removeIcon=true;
}
};

该问题已被官方收录

button宽度设置为100%，下方button设置浮动，出现横向滚动轴

0

1

表单元素

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
<header></header>
<button class="buttonlogon" type="button" >登录</button>
<button class="buttompasswprd">忘记密码</button>
<footer></footer>
</body>

.buttonlogon{
  width: 100%;
  height: 3rem;
  margin-bottom: 1rem;
  border: none;
  outline: none;
  color: #ffffff;
  background: #5fc0cd;

}
.buttompasswprd{
  float: right;
  padding: 0;
  border: none;
  margin-right:1rem ;
  color: #5fc0cd;
  outline: none;
  border-bottom: 1px solid #5fc0cd;
  background: #eff0f4;
}

该问题已被官方收录

如何配置nginx反向代理

0

1

nginx

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

没有代码

该问题已被官方收录

纯css 轮播图怎么实现充满整个屏幕做到自适应

0

1

表单元素

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{ 
             margin: 0;
             padding: 0; 
             text-decoration: none;
         }
        ul{
            list-style: none;
        }
        
        #container{
            position: relative;
            width: 100%;
            
            overflow: hidden;/*隐藏溢出的图片*/
        }
        .pic{
            width:400%;/*4张图的宽度*/
            position: absolute;/*基于父容器进行定位*/
            left:0;
            clear: both;
            animation-name: focusmap;
            animation-duration: 12s;
            animation-iteration-count: infinite;

        }
         @keyframes focusmap {
            0%,30%{
                left: 0;
            }
            35%,65%{
                margin-left: -100%;
            }
            70%,99%{
                margin-left: -200%;
            }
            100%{
                margin-left: -300%;;
            }
           
        }
        .pic li{
            width: 25%;
            float: left;
            background: #5dd94e;
        }

        .pic li img {
            width: 100%;
            
        }
    </style>

</head>

<body>

        <div id="container">
                <ul class="pic">
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg"></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li>
                    <li><a href="javascript:;"><img class="cursor-pointer" src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/d4ddb42c-5e07-4d86-809f-e08898aa800d.jpg" ></a></li><!-- 克隆第一张 -->
                </ul>
                
            </div>
</body>

</html>

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1