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

在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>

如何上下对齐

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.partner{
    padding-top: 20px;
    /*box-shadow: 1px 1px 1px lightgrey;*/
    width: 1200px;
    margin: 0 auto;
}
.partner1{
    text-align: center;
    padding-bottom: 20px;
}

.logo1 {
    display: inline-block;
    width: 18%;
}
.logo1 img{
    /*margin: auto 20px;*/
    width: 100%;
    height: 150px;
}
ul{
    padding:0;
}

收缩分辨率的时候改变导航栏

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <header>
        <div class="coze ">
            <div class="phone">客服热线：010-594-78634</div>
            <div class="telephony">
                <div class="chat"></div>
                <div class="chew"></div>
                <div class="the"></div>
            </div>
        </div>
        <div class="tag">
            <div class="jinengshu"> 技能树</div>
            <div class="guanyu">
                <a href="#" class="zhiye">首页</a>
                <a href="#" class="zhiye">职业</a>
                <a href="#" class="zhiye">推存</a>
                <a href="#" class="zhiye">关于</a>
            </div>
        </div>
        <div class="mark"></div>
    </header>
    <main>
        <div class="tally">
            <span>首页></span>
            <span class="business">合作企业</span>

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

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%;}
        }
    }    
}

底部的按钮不能随着屏幕同步缩放

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <footer>
        <div class="end">
             <button class="stay">留言</button>
             <button class="coll">电话联系</button>
        </div>
    </footer>

.end{
    display:flex;
    justify-content:space-around; 
    position:fixed;
    bottom: 5px;
}
.stay {
    background-color: #ffffff;    
    color: #66cccc;
    padding: 8px 50px 8px 50px;
    margin: 0 5px 2px 12px;
    border-radius: 0.5rem;
    border-color: #66cccc;
}
.coll {
    background-color: #66cccc;    
    color: #ffffff;
    padding: 8px 48px 8px 48px;
    margin: 0  12px 2px 12px;
    border-radius: 0.5rem;
    border-color: #66cccc;
}

sass什么时候用？需要精通吗？

0

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

flash插入缓冲动画

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flash</title>
</head>
<style>
    embed{
        background-image: url("../image/onload.gif");
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>
<body>
<div id="showPcFlash" class="dn" style="width: 100%; height: 400px; display: block; " width="100%" height="400">
    <embed id="gameFlash" class="flash" src="game1-zhangxaioqian.swf" style="LEFT: 0px; POSITION: absolute; TOP:0px"  quality="high" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="400">
</div>
</body>
</html>

如何修改radio单选按钮的样式

1

radio

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body{
      max-width: 1200px;
      margin: 20px auto;
    }
    [type="radio"]{
      border: 0;
      background: white;
    }
  </style>
</head>
<body>
  <input type="radio" name="1">选项一
  <br>
  <input type="radio" name="1">选项二
</body>
</html>

去除inline-block元素间间距

1

内外边距布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box {
            width: 100%;
            height: 600px;
            background-color: red;
        }

        .box1{
            display: inline-block;
            width: 100px;
            height: 200px;
            background-color: blue;
        }


    </style>

</head>
<body>

<div class="box">
    <div class="box1">124124</div>
    <div class="box1">14124</div>
    <div class="box1">141414</div>

</div>
</body>
</html>

sass无法同步

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
  display: flex;
  flex-direction: row;


  margin: 0;
  background-color: rgba(240, 240, 240, 1);

  /*左拉菜单*/
  .menu {
    flex-basis: 55%;

    display: none;

    height: 6.2rem;
    font-size: .16rem;
    color: rgba(41, 189, 224, 1);
    background-color: #fff;


    ul {
      padding: 0;
      text-indent: 8px;
      list-style: none;


      li {
        line-height: 2.2;
        border-bottom: 1px solid rgba(225, 229, 231, 1);

        img {
          height: .22rem;
          vertical-align: -.05rem;
        }

        .menu-arrow {
          float: right;
          margin-top: .12rem;
          margin-right: .3rem;
          width: .1rem;
          height: .1rem;
          border-top: .02rem solid rgba(41, 189, 224, 1);
          border-right: .02rem solid rgba(41, 189, 224, 1);
          transform: rotate(45deg)
        }
      }
    }
  }

}

article {
  position: relative;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  
header {
  z-index: 5;
  width: 100%;
  height: .5rem;
  background-color: rgba(41, 189, 224, 1);

  .head-logo {
    position: relative;

    i {
      display: block;
    }

    .logo-line-1 {
      position: absolute;
      top: 17px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    .logo-line-2 {
      position: absolute;
      top: 33px;
      left: 20px;
      width: 23px;
      height: 5px;
      border-top: 2px solid #fff;
    }
  }
}


  .last-game {
    position: relative;
    margin-top: .15rem;
    width: 92%;
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    font-size: .17rem;
    border: .01rem solid #C9C9C9;
    color: rgba(154, 154, 154, 1);
    background-color: #ffffff;

    i {
      position: absolute;
      top: 35%;
      right: 3%;
      width: .13rem;
      height: .13rem;
      border-top: .03rem solid rgba(231, 231, 231, 1);
      border-right: .03rem solid rgba(231, 231, 231, 1);
      transform: rotate(45deg)
    }
  }



  main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 92%;
    height: 4.5rem;
    margin-top: .5rem;
    background-color: #ffffff;
    border: .01rem solid #C9C9C9;


    h3 {
      font-size: .12rem;
      color: #787878;
    }

    .game-begin {
      display: flex;
      height: 10%;
      width: 90%;
      justify-content: center;
      border-bottom: .01rem solid #FBB435;

      .game-btn {
        width: 100%;
        border-style: none;
        font-size: .19rem;
        outline: none;
        color: #FBB435;
        background-color: #fff;
      }
    }

    .edition {
      position: relative;
      margin-top: .2rem;
      width: 80%;
      height: 15%;
      outline: none;
      border-style: none;
      color: #fff;
      background-color: #69D1E9;
    }


    .arrow {
      position: absolute;
      right: -7px;
      top: 47%;
      height: 0;
      width: 0;
      border-width: 13px;
      border-style: solid;
      border-color: transparent transparent transparent #FBB435;
    }


    .bottom-circle {
      display: flex;
      height: .3rem;
      width: .6rem;
      justify-content: center;


      .circle {
        margin-left: .03rem;
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background-color: #F0F0F0;

        &:hover {
          background-color: #69D1E9;
        }

      }

    }

  }

}