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

用雪碧图制作图标时位置不准，无法调背景图的位置。

0

1

定位 CSS Sprite 雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="btn-group">
        <button type="button" class="btn btn-default">找雇主</button>
        <button type="button" class="btn btn-default">找护工</button>
    </div>
    <button class="map"></button>

css：
.map{
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    width: 0.42rem;
    height:0.45rem;
    border: 0;
    background-size: 4.92rem 0.96rem;
    background: url(img.png) no-repeat;
    background-position:  -2.44rem 0;
    border: none;
    outline: none;
}

怎么将公司的github和自己的github关联起来

2

1

git 代码管理

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

测

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

测

在屏幕缩放时怎么才可以固定高度的情况下保持图片的清晰度

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

CSS
.depth {
    width: 100%;
    height: 100%;
    .inner {
        width: 100%;
        height: 100%;
    }
}
HTML
        <div class="depth">
            <img class="inner" src="./images/hand.png" alt="">
        </div>

angular-ui-sortable拖动排序的配置问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1

如何css手写轮播+点击的轮播图

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <section class="header-slider-contaner">
    <ul class="header-slider">
      <li class="header-slider-item slider-item1"></li>
      <li class="header-slider-item slider-item2"></li>
      <li class="header-slider-item slider-item3"></li>
      <li class="header-slider-item slider-item4"></li>
      <li class="header-slider-item slider-item5"></li>
    </ul>
    <div class="header-focus-container">
      <ul class="clearfix">
        <li>
          <div class="header-focus-item focus-item1"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item2"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item3"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item4"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>




  ul,li{
  list-style: none;
  }
  /*css reset end*/
  
  /*css public start*/
  .clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
}
  /*css public end*/
  
  /*slider start*/
  .header-slider-contaner{
  width:100%;
  position:relative;
  }
  .header-slider-item {
  opacity:0;
  }
  .header-slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  }
  .header-focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  width: 1rem;
  left:0;
  right:0;
  }
  .header-focus-container li{
  width:0.1rem;
  height:0.1rem;
  border-radius:50%;
  float:left;
  margin-right:0.05rem;
  margin-left: 0.05rem;
  background:#fff;
  }
  .header-focus-item{
  width:100%;
  height:100%;
  border-radius:inherit;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  }
  .focus-item2,.focus-item3,.focus-item4,.focus-item5{
  opacity:0;
  }

  /*设置轮播焦点的位置*/
  .header-focus-container{
  bottom:2%;
  }
  /*设置当前图片焦点的颜色*/
  .header-focus-item{
  background:#51B1D9;
  }
  /*设置动画，请根据实际需要修改秒数*/
  .header-slider-item,.header-focus-item{
  animation-duration: 20s;
  }
  .slider-item1,.focus-item1{
  animation-delay: -1s;
  }
  .slider-item2,.focus-item2{
  animation-delay: 3s;
  }
  .slider-item3,.focus-item3{
  animation-delay: 7s;
  }
  .slider-item4,.focus-item4{
  animation-delay: 11s;
  }
  .slider-item5,.focus-item5{
  animation-delay: 15s;
  }
  @keyframes fade{
  0%{
  opacity:0;
  z-index:2;
  }
  5%{
  opacity:1;
  z-index: 1;
  }
  20%{
  opacity:1;
  z-index:1;
  }
  25%{
  opacity:0;
  z-index:0;
  }
  100%{
  opacity:0;
  z-index:0;
  }
  }
  /*设置背景，响应式请利用媒体查询根据断点修改路径*/
  .slider-item1{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item2{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item3{
  background-image:url(../start-a-project/sss/CSS/task8/picture-2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item4{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item5{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
  .header-slider,.header-slider-item{
  padding-bottom:31%;
  }

轮播图能否不使用绝对定位

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.frame{
    box-sizing: border-box;
    position: fixed;
    overflow:hidden; 
    padding-bottom: 30%;
    min-width: 100%;
    .photos {  
        position: absolute;
        width: 100%;
        overflow: hidden;
        .roll { 
            float: left;
            width: 100%;
        }
        .boil {
            background: url(./images/Image.png) no-repeat;
            background-size:100% 100%;
        }
        .boil-one {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tow {
            animation: myfirst 10s ease  infinite normal;
        }
        .boil-tir {
            animation: myfirst 10s ease  infinite normal;
        }
        @keyframes myfirst {
            30%,50% {margin-left: -100%;}
            55%,75% {margin-left: -200%;}
            80%,100% {margin-left: -300%;}
        }
    }    
}

在flex布局中，text-overflow：ellipsis不生效的问题

1

页面显示 flex

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css代码
.txt2{
    width: 50%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom: 1.3rem;
    margin-top: 1.3rem;
    font-size: 1.4rem;
}
.listtxt{
    position: relative;
    display: flex;
    padding-left: 1.5rem;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: end;
    width: 100%;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #e1e5e7
}
html代码
<div class="listtxt">
<div class="txt2">
        <p>2015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-122015-7-5至2015-7-12</p>
    </div>
</div>

任务一审核3天了

0

1

通用

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

swf文件在本地不能完全加载

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<embed src="game/pc1.swf" type="application/x-shockwave-flash" height="200" width="200">