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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用css画的圆形显示会变形，不报错但是圆形的形状会改变

2

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  .circle1{
            display: inline-block;
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            /*border: 1px solid #e1e5e7;*/
            background-color: #e1e5e7;
            position: absolute;
            left: 40%;
            top: 80%;
            /*z-index: 4;*/
        }

该问题已被官方收录

hover子元素(div="bastard")没有办法居中

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css:
.grandpa{ 
    background: #29bde0;
    /*width: 90%;
    height: 90%;*/
    
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: row;
    margin: 10px auto;
  }  
      
  .dad{
      width: 31vw;
      height: 31vw;
      background: #29bde0;
  }  
  
  .son{
      width: 20vw;
      height: 20vw;
      background: yellow;
      margin: 0 auto;
      display: flex;
      flex-direction:column;
      background: #f5c97b;
      border: 2px solid white;
  }
  .para1{
      flex:2;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .para2{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #83b09a;
      color: white;
  }
  
  .bastard{
      width: 20vw;
      line-height: 10vw;
      margin: 0 auto;
      background: #29bde0;
      display: none;
      
  }
  .bastard img{
      width: 4vw;
      height: 4vw;
      margin-right: 1px;
  }
  /*hover the son element*/
  .dad:hover>.bastard{
      display: block;
  }
  
html:
<div class="grandpa">

        <div class="dad">
            <div class="son">
                <span class="para1">水民</span>
                <span class="para2">1号</span>
            </div>
            <div class="bastard">
                <img src="./p2-sprite1.png"><img src="./p2-sprite2.png"><img src="./p2-sprite3.png"><img src="./p2-sprite4.png">
            </div>
        </div>

该问题已被官方收录

如何设置蒙版

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无代码

该问题已被官方收录

给小箭头设置旋转后，小箭头浮动在上面的fixed定位的上面

1

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 .arrows {
  width: .2rem;
  height: .2rem;
  border-top: 2px solid #5fc0cd;
  border-right: 2px solid #5fc0cd;
  transform: rotate(45deg);
}

该问题已被官方收录

使用checkbox绑定侧边栏后，侧边栏却出现了显示异常

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="mmm">
    <div class="m-border"></div>
    <div class="m1">
        <div class="ma">
            <img src="images-task13/1.png" width="24" />
            <span class="ma1">公告</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>
    <div class="m1">
        <div class="ma">
            <img src="images-task13/2.png" width="24" />
            <span class="ma1">设置</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>

    <div class="m1">
        <div class="ma">
            <img src="images-task13/3.png" width="24" />
            <span class="ma1">帮助</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>

    <div class="m1">
        <div class="ma">
            <img src="images-task13/4.png" width="24" />
            <span class="ma1">关于</span>
        </div>
        <div class="ma">
            <img src="images-task13/5.png" height="23" width="14"/>
        </div>
    </div>
</div>

<div class="checkbox1">

    <input type="checkbox" value="1" id="check1" name="" />
    <label for="check1"></label>
</div>
    <div class="nnn">

<div class="head">
    <div class="h-img"></div>
</div>

label {
  @include position(absolute,top,17px,left,25px);
  @include sprite(34px,27px,
          url(images-task13/t.png) -185px -307px no-repeat,
          scale(0.9));
  transition: all .6s ease;
  cursor: pointer;
  z-index: 3;
}
input {
  @include position(absolute,top,0px,left,0px);
}

.checkbox1 {
  @include position(absolute,top,0px,left,0px);
  width: 100%;
  overflow: hidden;
}

.checkbox1 input[type=checkbox]:checked ~ label {
  left: 80%;
}
.checkbox1 input[type=checkbox]:checked ~ .nnn{
  transform: translateX(80%);
}

.nnn {
  @include bg-c(#f0f0f0);
  transition: all .6s ease;
  height: 900px;
  z-index: 2;
}
.mmm {
  position: absolute;
  @include flex(flex,column,flex-start,center);
  @include bg-c(#fff);
  @include font(1.2em,#69D1E9,left,normal);
  @include box(80%,900px);
}
.m1 {
  @include flex(flex,row,space-between,center);
  @include padding(20px 0);
  @include box(100%,20px);
  border-bottom:1px solid #c0c0c0;
}
.ma {
  margin: 0 20px;
}
.ma1 {
  margin-left:15px;
}
.m-border{
  position: absolute;
  @include box(100%,100%);
  border-right:20px solid #29bde0;
}
input[type=checkbox] {
  visibility: hidden;
}

该问题已被官方收录

sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用

0

1

媒体查询 sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//计算rem基准字体
$rem-base-font-size:100px;
//UI设计图的分辨率宽度
$UI-width:720px;
// 需要适配的屏幕宽度
$device-width:320px,375px,425px,768px;

// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size {
    @each $current-width in $device-width {
        @media only screen and (max-width:$current-width) {
            $x:$UI-width/$current-width; // // 计算出是几倍屏
            font-size: $rem-base-font-size/$x;
        }
    }
}
@include html-font-size();

@media only screen and (max-width: 320px) {
  font-size: 44.44444px;
}

@media only screen and (max-width: 375px) {
  font-size: 52.08333px;
}

@media only screen and (max-width: 425px) {
  font-size: 59.02778px;
}

@media only screen and (max-width: 768px) {
  font-size: 106.66667px;
}

该问题已被官方收录

input标签小圆点的改变

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{margin:0;height:100%;}
ul{margin:0;}
button{border:0;outline: none;}
button:hover{outline: none;}
.fl{float: left;}
.fr{float:right;}
.clear{clear: both;}
html{font-size: 312.5%;}

@media screen and (max-width:767px) {
    .nav_ul{float: none!important;}
    .nav_ul li{padding-right:.3rem;}
    main{width: 100% !important;}
    .center{width:90%!important;}
    .xz_box {display: flex;
         flex-direction: column;
    }
    .subnav{margin: auto!important; }
    .ft-right{float: none !important;}
    .xz_box label{display:flex;}
}
@media screen and (min-width:768px){
    .flex-end{
        display: flex;
        justify-content: flex-end;
    }
    .xz_box {    display: flex;
        align-items: center;
        justify-content: flex-start;
        height:.4rem;
   }
  
}
@media screen and (min-width:1024px){ .ft-right{
    float: right;
}}

header{
    width:100%;
    background-color: #1d7ad9;
    height:.4rem;
}
header p{color:white;}
.center{width:62.5%;margin: 0 auto;}
.sign{
    display:inline-block;
    width:.8rem;
    height: 0.38rem;
    font-size: .16rem;
    background-color: #1d7ad9;
    border-left:0.2rem white soild;
    text-align: center;
    vertical-align:middle;
    color:white;
}
.sign:hover{
    width:1.6rem;
    color:#1d7ad9;
    background-color: white;
    border-left: 1px solid white;
    text-align: center;
    vertical-align: center;
}
.navbar-nav{margin:0;}
.nav button{
    width: 100%;
    font-size:.16rem;
    padding:.1rem;
    line-height: 15px;
    vertical-align: center;
    background-color: white;
    border:1px solid #e1e5e7;
    border-radius:5px;
}
.nav_ul button:hover{
    background-color:#1d7ad9;
}
.nav_ul {
    float:right;
    padding-right: none;
}
.nav_ul li{
   padding-left:.3rem;
}
.navbar-collapse{
    padding:0;
    line-height:1rem;
    vertical-align: middle;
}
.yuan{
    position:absolute;
    top:-.15rem;
    left:50%;
    display: block;
    border-radius: 50%;
    width:.3rem;
    line-height:.3rem;
    text-align: center;
    transform:translate(-50%,0);
    background-color: #d4d4d4;
    color: white;
}
.subnav{
    position: relative;
    border-top:.06rem solid #d4d4d4;
    width:1.4rem;
    height:1rem;
    font-size: .18rem;
    color:#CCC;
}

.subnav p{
    text-align: center;
    height:1rem;
    line-height: 1rem;
    vertical-align: middle;
}
.subnav:hover{
    border-top:.06rem solid #f1a750;
    color: #f1a750;
}
.subnav:hover  .yuan{
background-color: #f1a750;
}
.navfont{
    font-size: .22rem;
    color:#333;
}
.Vertical{
    margin-right:.06rem;
  height: .22rem;
  border-left:.04rem  #1D7AD9 solid;
  }

  .table_nav{
    width: 100%;
    height:.46rem;
    font-size: .18rem;
    line-height:.46rem;
    vertical-align: center;
    background-color:#E6E6E6;
    color: #1d7ad9;
    border: 1px #E8E8E8 solid;
}
.box{
    width:.18rem;
    height:.14rem;
    margin:0 .18rem;
}
.sel {
    border:.02rem solid  #E8E8E8;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("./images/xl.png") no-repeat scroll right  transparent;
    padding: .1rem .5rem .1rem .1rem;
    font-size:.14rem;
    position: absolute;
    top:50%;
    right:.2rem;
    transform:translate(0,-50%);
    color:#999;
}
.table-main{
    position: relative;
    background-color: #FBFCFF;
    padding:.36rem .2rem;
    border: 1px #E8E8E8 solid;
}
.table-input{
    margin: 0 .16rem;
    width:.7rem;
    height:.3rem;
}
form span{
    margin-left: .1rem;
    font-size: .18rem;
    color:#666;
}
.xz_box input{margin:0;}
.xz_box label{display:flex;margin:0;align-items: center;font-weight: normal;font-size: .16rem;}
.option-radio{
    opacity: 0;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.pay_list_c1 {
    width: .32rem;
    height:.32rem;
    cursor: pointer;
    background-image: url(images/nocheack.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    }
    .on {
background-position: 0 0;
        }
        .pay_list_c1:hover{ background-image: url(images/input.png);}
.main_btn{
    display:flex;
    justify-content:center;
    align-items:center;
    height:2.86rem;
    border: 1px #f1f1f1 solid;
}
.main_btn button{
    width: 1.8rem;
    height:.46rem;
    font-size:.24rem;
    background-color: #e15053;
    color:white;
    border-radius:2px;
}
footer{
    margin-top: 1.2rem;
    position: relative;;
    bottom:0;
    width: 100%;
    background-color:#e1e5e7;
    font-size: .16rem;
}
footer a{
    color:#a8a8a8;
}
.footer_box {
    margin:.6rem 0;
    line-height:.16rem;
    text-align:left;
    color:#a8a8a8;
}
.footer_bottom{
    width: 100%;
    font-size: .14rem;
    background-color: #1d7ad9;
    text-align: center;
    color: white;
}
.erweima{
    float:right;
    width:.92rem;
    height:.92rem;
}
.ft-right{
    width:3.5rem;
}

该问题已被官方收录

link引入和@import引入的性能区别

0

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset "utf-8";  
  
/* 重置样式 */  
button { padding: 0; border: none; background: transparent; outline: none;}    //按钮默认样式修改
a {text-decoration:none;outline:none;}
p {margin: 0;}
ul {margin: 0; padding: 0;outline: none;list-style: none;}
.flt-right {float: right;}
/* 基础样式 */   
$col-1 :#f0f0f0;    //灰色背景颜色
$col-2 :#29bde0;    //页面调性主颜色
$col-3 :#fbb435;    //页面调性次颜色
::-webkit-scrollbar {display: none;}    //隐藏滚动条
img { transform: scale(0.5);}    //插入图片统一缩放:0.5

/* 全局样式 */  
html {
  font-size: 625%;
  overflow-x: hidden; 
}

body {
  font-size: .12rem;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

@charset "UTF-8";
/* 重置样式 */
button {
  padding: 0;
  border: none;
  background: transparent;
  outline: none; }

a {
  text-decoration: none;
  outline: none; }

p {
  margin: 0; }

ul {
  margin: 0;
  padding: 0;
  outline: none;
  list-style: none; }

.flt-right {
  float: right; }

/* 基础样式 */
::-webkit-scrollbar {
  display: none; }

img {
  transform: scale(0.5); }

/* 全局样式 */
html {
  font-size: 625%;
  overflow-x: hidden; }

body {
  font-size: .12rem;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; }

该问题已被官方收录

0

1

动画

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-md-6 col-lg-4 main-box">
                <div class="main-box-tow">
                    <div class="hide-box">
                        <span class="hide-title">iOS工程师</span>
                        <p class="hind-font">iOS是由苹果公司开发的移动操作系统， iOS和苹果的Mac OS X操作系统一样， 也是以Darwin为基础的， 因此同样属于类Unix的商业操作系统。 国内的iOS开发起步相对较晚， 人才培养机制更是远远跟不上市场发展速度，
                            有限的iOS开发人才成了国内企业必争的资源。 国内的iOS开发起步相对较晚， 人才培养机制更是远远跟不上市场发展速度， 有限的iOS开发人才成了国内企业必争的资源。
                        </p>



.hide-box {
    position: absolute;
    padding: 5rem 12% 2rem 12%;
    text-align: center;
    line-height: 2rem;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 2s;
    transform: rotate(0deg);
}

.hide-title {
    display: none;
    text-align: center;
    line-height: 8rem;
}

.hind-font {
    display: none;
    text-align: left;
}

.main-box-tow:hover .hide-box {
    /* display: block;  */
    transform: rotate(360deg);
    color: #fff;
    background: rgba(16, 16, 16, 0.8);
}

.main-box-tow:hover .hide-title {
    display: inline-block;
}

.main-box-tow:hover .hind-font {
    display: inline-block;
}

该问题已被官方收录

能不能在把hover写在一块

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
			<div class="row text-left">
				<div class="col-md-3 first">
						<div class="squ"></div>
						<div class="cir">1</div>
						<div class="text-font">1.定制纸箱</div>
				</div>

.first {
	padding: 20px 0;
}
.squ {
	background-color: #ccc;
  	height: 5px;
  	width: 100%;
  	border-radius: 2px;
}
.cir {
	text-align: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #ccc;
	position: relative;
	top: -15px;
	left: 40%;
	color: #fff;
}
.text-font {
	text-align: center;
	color: #ccc;
}
.first:hover .squ {
	background-color: #ff7f02;
}
.first:hover .cir {
	background-color: #ff7f02;
}
.first:hover .text-font {
	color: #ff7f02;
}

去第页

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