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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

占位符和混合器继承的差别是什么

2

1

sass

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何如何将我的头部文件固定并保证3个文字定位

3

1

绝对定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码


.text1 {
	line-height: 53px;
	display: inline;
	float: left;
	margin-left: 1rem;
}//css文本
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgb(90,192,206);
	width:100%;
	height: 60px;
}//头部固定
<div class="nav">
			<a href="#" class="text1">注册</a>
			<span class="login">登录</span>
			<a href="#" class="text2">关闭</a>
		</div>//HTML部分

该问题已被官方收录

折叠按钮点击范围精准化

1

1

通用属性通用属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html{
    font-size: 312.5%;
}
body{
    margin: 0;
    font-size: initial;
    background-color: #FFFFFF;
}
p{
    margin-bottom: 0;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
li{
    padding: 0;
    margin: 0;
    list-style: none;
}
header{
    
    background-color: #F9F9F9;
}
.top-bg{
    background-color: #1D7AD9;
}
.left-col{
    line-height: .8rem;
    font-size: .14rem;
    color: #FFFFFF;
}
.top-btn{
    padding: 0 .45rem;
    line-height: .8rem;
    font-size: .16rem;
    border: none;
    outline: none !important;
    color: #FFFFFF;
    background-color: #1D7AD9;
}
.top-btn:hover{
    color: black;
    background: #FFFFFF;
}
@media (max-width:575px){
    .header-btn{
        display: flex;
        justify-content: space-around;
    }
}
.header-btnn{
    text-align: right;
}
.dropdown{
    margin: 20px 20px 20px auto;
    padding: 6px;
    display: none;
    outline: none !important;
    border-radius: 6%;
    border: none;
    background-color: #1D7AD9;
}
.line{
    padding: 6px 0;
    width: 22px;
    height: 21px;
    border-top: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    background: #FFFFFF content-box;
}
@media (max-width:575px){
    .end{
        
    }
    .navv{
        
    }
    .dropdown{
        display: block;
    }
    .header-btnn{
        display: none;
    }
    .bottom-btn{
        margin: .4rem 0 !important;
        border-radius: 0% !important;
    }
    .navv:hover .header-btnn{
        display: flex;
        flex-direction: column;
    }
}
.bottom-btn{
    margin: .4rem 0 .4rem .6rem;
    padding: 0 .45rem;
    line-height: .8rem;
    font-size: .16rem;
    border: none;
    border-radius: 6%;
    outline: none !important;
    color: black;
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px -1px;
}
.bottom-btn:hover{
    color: #FFFFFF;
    background: #1D7AD9;
}
.main-top{
    display: flex;
    justify-content: flex-end;
}
.carton-box{
    position: relative;
    margin-top: .48rem;
    border-top: .06rem solid #CCCCCC;
    font-size: .18rem;
    color: #CCCCCC;
}
.carton-box::before{
    position: absolute;
    content: "1";
    top: -.18rem;
    left: 50%;
    margin-left: -.15rem;
    text-align: center;
    line-height: .3rem;
    font-size: .14rem;
    color: #FFFFFF;
    width: .3rem;
    border-radius: 50%;
    background: #CCCCCC;
}
.carton{
    margin: .5rem .38rem;
}
.carton-box:hover{
    color: #FF7F02 !important;
    border-color: #FF7F02 !important;
}
.carton-box:hover::before{
    background-color: #FF7F02 !important;
}
.title-bottom{
    margin-bottom: .3rem;
}
.main-title{
    padding-left: .09rem;
    font-size: .22rem;
    color: #333333;
    border-left: .04rem solid #1D7AD9;
}
.bg-box{
    display: flex;
    align-items: center;
    line-height: .8rem;
    font-size: .18rem;
    color: #1D7AD9;
    background: #F4F4F4;
    border: .01rem solid #E7E7E7;
}
.box{
    margin: 0 .2rem;
    width: .38rem;
    height: .32rem;
    background: url(../img/666.png) no-repeat 0 1px;
}
label{
    margin-bottom: 0 !important;
}
.main-option{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .2rem 0 .46rem;
    border: .01rem solid #E7E7E7;
    border-top: none;
    border-bottom: none;
    background: #FBFCFF;
}
.option-left{
    display: flex;
    line-height: 1.2rem;
}
.radio{
    display: flex;
    align-items: center;
    margin-right: .6rem;
    font-size: .18rem;
    color: #666666;
}
.radio-left{
    margin-right: .2rem;
}
.option-button{
    display: flex;
    position: relative;
    align-items: center;
    height: .7rem;
    font-size: .14rem;
    color: #999999;
    background-color: #FFFFFF;
    border: .01rem solid #E8E8E8;
    outline: none !important;
}
.rectangle{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .3rem;
    width: .4rem;
    height: .45rem;
    background-color: #1D7AD9;
}
.triangle{
    width: 0;
    height: 0;
    border-top: .15rem solid #FFFFFF;
    border-left: .13rem solid transparent;
    border-right: .13rem solid transparent;
}
.item{
    line-height: .7rem;
    padding-left: .12rem;
    
}
.item:hover{
    background: #1D7AD9;
}
.dropdown-xq{
    display: none;
    position: absolute;
    top: .7rem;
    left: 0;
    right: 0;
    text-align: left;
    font-size: .14rem;
    color: #FFFFFF;
    background-color: #999999;
    z-index: 1;
}
.option-button:hover .dropdown-xq{
    display: block;
}
.mg{
    padding: .3rem .2rem .3rem .46rem;
}
.second-box{
    margin: 0 .1rem;
    width: .45rem;
    height: .45rem;
    background: url(../img/666.png) no-repeat 1px -33px;
}
.size-left{
    display: flex;
}
.io{
    margin-right: 0;
    padding: 1px 0;
}
.ox{
    padding: 5px 0;
}
.number{
    width: 70px;
    height: 30px;
    font-size: .26rem;
    outline: none;
}
.dd{
    display: block;
    font-size: .32rem;
    color: #666666;
}
.number-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: .4rem;
    height: 1.4rem;
}
.third{
    background: url(../img/666.png) no-repeat 5px -74px;
}
.on{
    line-height: 2rem;
}
.main-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.86rem;
    border: .01rem solid #E8E8E8;
}
.red-button{
    width: 2rem;
    height: .6rem;
    border: none;
    border-radius: .2rem;
    outline: none !important;
    font-size: .32rem;
    color: #FFFFFF;
    background: #E15053;
}
footer{
    margin-top: 1rem;
    padding-top: .6rem;
    background: #F9F9F9;
}
.footer-word{
    font-size: .28rem;
    font-weight: 600;
    color: #999999;
}

<!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>定制箱</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/task10.css">
</head>
<body>
    <header>
        <div class="top-bg">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 col-sm-6">
                         <p class="left-col">客服热线：010-594-78634</p>
                     </div>
                     <div class="col-md-6  col-sm-6 text-right">
                         <div class="header-btn">
                             <button class="top-btn">登录</button>
                             <button class="top-btn">注册</button>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12 end">
                     <nav class="navv">
                         <button class="dropdown">
                             <div class="line"></div>
                         </button>
                         <div class="header-btnn">
                             <button class="bottom-btn">首页</button>
                             <button class="bottom-btn">在线定制</button>
                             <button class="bottom-btn">标准箱</button>
                             <button class="bottom-btn">品质保障</button>
                         </div>
                     </nav>
                 </div>
             </div>
         </div>
    </header>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-12 main-top">
                     <div class="carton-box">
                         <p class="carton">1.定制纸箱</p>
                     </div>
                     <div class="carton-box">
                         <p class="carton">2.选择数量</p>
                     </div>
                     <div class="carton-box">
                         <p class="carton">3.上传附件</p>

                     </div>
                     <div class="carton-box">
                         <p class="carton">4.确认下单</p>
                     </div>
                 </div>
             </div>
             <div class="row">
                 <div class="col-12 title-bottom">
                     <strong class="main-title">请您按照以下步骤来定制您的纸箱</strong>
                 </div>
            </div>
        </div>
        <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="bg-box">
                         <span class="box"></span>
                         <strong>选择箱型</strong>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="main-option">
                         <div class="option-left">
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">对口箱</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">飞机盒</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">天地盖</label>
                         </div>
                         <button class="option-button">
                             <p class="button-word">查看详情</p>
                             <div class="rectangle">
                                 <div class="triangle"></div>
                             </div>
                             <ul class="dropdown-xq">
                                 <li class="item">对口箱</li>
                                 <li class="item">飞机盒</li>
                                 <li class="item">天地盖</li>
                             </ul>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="bg-box">
                         <span class="second-box"></span>
                         <strong>确定尺寸</strong>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="main-option mg">
                         <div class="size-left">
                             <div class="number-box ox">
                                 <label class="radio io"><input class="radio-left" type="radio" name="optradio">外径</label>
                                 <label class="radio io"><input class="radio-left" type="radio" name="optradio">内径</label>
                             </div>
                             <div class="number-box">
                                 <label class="dd">长<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                                 <label class="dd">长<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                             </div>
                             <div class="number-box">
                                 <label class="dd">宽<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                                 <label class="dd">宽<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                             </div>
                             <div class="number-box">
                                 <label class="dd">高<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                                 <label class="dd">高<input type="number" class="number" placeholder="输入数字" oninput="if(value.length>5)value=value.slice(0,5)">mm</label>
                             </div>
                         </div>
                         <button class="option-button">
                             <p class="button-word">查看详情</p>
                             <div class="rectangle">
                                 <div class="triangle"></div>
                             </div>
                             <ul class="dropdown-xq">
                                 <li class="item">外径</li>
                                 <li class="item">内径</li>
                             </ul>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="bg-box">
                         <span class="second-box third"></span>
                         <strong>选择材质</strong>
                     </div>
                 </div>
             </div>
         </div>
         <div class="container">
             <div class="row">
                 <div class="col-12">
                     <div class="main-option">
                         <div class="option-left on">
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">三层A瓦优质</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">三层A瓦优质</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">三层A瓦优质</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">三层A瓦优质</label>
                             <label class="radio"><input class="radio-left" type="radio" name="optradio">三层A瓦优质</label>
                         </div>
                         <button class="option-button">
                             <p class="button-word">查看详情</p>
                             <div class="rectangle">
                                 <div class="triangle"></div>
                             </div>
                             <ul class="dropdown-xq">
                                 <li class="item">三层A瓦优质</li>
                                 <li class="item">三层A瓦优质</li>
                                 <li class="item">三层A瓦优质</li>
                                 <li class="item">三层A瓦优质</li>
                                 <li class="item">三层A瓦优质</li>
                             </ul>
                         </button>
                     </div>
                 </div>
             </div>
             <div class="row">
                 <div class="col-12">
                     <div class="main-bottom">
                     <button class="red-button">
                         下一步
                     </button>
                    </div>
                 </div>
             </div>
         </div>
     </main>
     <footer>
         <div class="container">
             <div class="row">
                 <div class="col-md-4">
                     <p class="footer-word">51包装网——纸箱包装首选服务平台</p>
                 </div>
                 <div class="col-md-4">
                     <p>
                         <a class="about">关于我们</a>  
                         <a class="about">配送流程</a>  
                         <a class="about">联系我们</a>
                     </p>
                     <p>
                         <a class="about">下单指南</a>  
                         <a class="about">媒体介绍</a>
                     </p>
                 </div>
                 <div class="col-md-4">
                     <div>
                         <p>TEL:400-0000-000</p>
                         <p>企业QQ：123456789</p>
                         <p>微信号：XXXXXXX</p>
                     </div>
                     <div></div>
                 </div>
             </div>
         </div>
     </footer>
</body>
</html>

该问题已被官方收录

任务十可以用下拉框控制选中的单选按钮吗？

1

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <form action="">
            <div class="row box-title">
                <div class="col-xs-12 model">选择箱型</div>
            </div>
            <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-1"></div>
                <div class="col-sm-1"></div>
            </div> 
            <div class="row box-title">
                <div class="col-xs-12 role">确定尺寸</div>
            </div>
            <div class="row box-title">
                <div class="col-xs-12 material">选择材质</div>
            </div>            
        </form>

该问题已被官方收录

saas继承没有作用

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//变量
$eliminate:0;
$blue:#29BDE0;
$white:#FFFFFF;
$text:auto;
$font:.26rem;
$width:80%;


//混合器
@mixin flex($x:center,$y:center){
    display: flex;
    justify-content:$x;
    align-items: $y;
}
@mixin guding{
    position: fixed;
    width: 100%;
}
@mixin box($w:.51rem,$h:.6rem){
    width: $w;
    height: $h;
}

@mixin font{
    width:$width;       
    font-size: $font;
    color: #A6A6A6;
}
@mixin button{
    width: 50%;
    height: .86rem;
    border-radius: .15rem;
    font-size: .4rem;
    color: #FFFFFF;
    
}




html{
    font-size: 312.5%;
}
body{
    padding: .72rem 0 1.2rem 0;
    margin: $eliminate;
    font-size: initial;
}
p{
    margin: $eliminate;
}

/*header 眉页*/
header{
    @include flex(space-between, center);
    @include guding;
    top: 0;
    /* border半透明 */
    border-bottom: .01rem solid rgba(200,200,200,.95);
    background: $blue;
    font-size:.34rem;
    /* 字符间距 */
    letter-spacing: .04rem;
    color: $white;

    a.left-header{
        @include box;
        margin: .1rem 0 0 .2rem;
        background: url(picture/task-css12.png) no-repeat -2.2rem -1.9rem;
    }
    a.right-header{
        @include box;
        margin:.1rem .2 rem 0 0 ;
        background: url(picture/task-css12.png) no-repeat -.96rem -1.95rem;
    }
}

/*main 主体*/
div.box{
    padding-top: .29rem;
    background: $blue;

    .logo{
        @include box(3.51rem,2.1rem );
        margin: $text;
        background: url(picture/task-css12.png) no-repeat -4.16rem 0;

        .logo-font{
            position: absolute;
            margin:1.3rem 0 0 .7rem;
            font-size: .48rem;
            /* 字符间距 */
            letter-spacing: .05rem;
            color: $white;
        }
    }
    p.introduce{
        width: $width;
        margin: .3rem $text .61rem $text;
        font-size: .33rem;
        color: #FFC865;
    }
    p.time{
            width: $width;
            margin: $text;
            font-size:$font;
            color: $white;

    }
    div.center-box{
        @extend .time;
        display: flex;

        span.font{
            margin-right: .5rem;
        }
    }

}

该问题已被官方收录

怎么用纯CSS实现task13下面的Tab切换标签效果代码

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header .main .recent span {
  display: block;
  width: 3vw;
  height: 3vw;
  border: 0.1vw solid #aaaaaa;
  border-radius: 50%;
  float: left;
  margin-right: 0.5vw;
  margin-top: 2vw;
}
.header .main .recent span:hover {
  background: #29BDE0;
}
.header .main .recent p {
  display: block;
  width: 14vw;
  margin: auto;
}

该问题已被官方收录

做下拉菜单时，发现下拉菜单的宽度会继承row的宽度

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 第二行右侧下拉选框  */

.down-line {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.down-line button {
    display: inline-flex;
    align-items: center;
    width: 1.27rem;
    height: .37rem;
    border: 1px solid #f2f2f2;
    font-size: .14rem;
    color: #999999;
    background-color: #ffffff;
    outline: none;
}

/* 右侧下拉图标 */

.down-box {
    display: inline-block;
    width: .24rem;
    height: .28rem;
    margin-left: .25rem;
    border-radius: .05rem;
    background: #1d7ad9;
}

.down-box::after {
    content: "";
    position: absolute;
    margin-top: 0.08rem;
    margin-left: -.07rem;
    border-left: .07rem solid transparent;
    border-right: .07rem solid transparent;
    border-top: .12rem solid #ffffff;
}

/*下拉菜单*/

#downlist {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 100%;
    z-index: 1000;
    display: none;
    width: 1.27rem;
    height: 100%;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
}

#downlist.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

#downlist li a {
    display: block;
    padding: 0;
    clear: both;
    color: #212529;
    font-size: .14rem;
    text-decoration: none;
}
html代码
<div class="col-md-3 col-sm-12 view-details">
                    <div class="down-line">
                        <button data-toggle="collapse" data-target="#downlist2">
                            查看详情
                            <span class="down-box"></span>
                        </button>
                        <ul id="downlist2" class="collapse">
                            <li>
                                <a class="" href="#">xxxx</a>
                            </li>
                        </ul>
                    </div>
                </div>

该问题已被官方收录

使三个样式，同时出现hover效果

3

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.circular+.p-1:hover {
    background-color: #ff7f02;
    color: #ff7f02;
}

该问题已被官方收录

怎么用纯css3写一个轮播图

2

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/demo.css">
    <title>轮播图（纯CSS）</title>
</head>
<body>
<div class="wrap">
    <div class="viewport">
        <img src="../image/pic1/pic-a.png" alt="#">
        <img src="../image/pic1/pic-b.png" alt="#">
        <img src="../image/pic1/pic-c.png" alt="#">
        <img src="../image/pic1/pic-a.png" alt="#">
    </div>
</div>
</body>
</html>


CSS：
body {
     margin: 0;
     padding: 0;
    line-height: 1;
 }
html {
    font-size: 62.5%;
}
.wrap {
    width: 100vw;
    overflow: hidden;
}

.viewport {
    position: relative;
    width: 400vw;
    clear: both;
    -webkit-animation-name: carouse;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
}
@keyframes carouse {
    0% {
        left: 0;
}
    10% {
        left: 0;
    }
    30% {
        left: -100vw;
    }
    40% {
        left: -100vw;
    }
    60% {
        left: -200vw;
    }
    70% {
        left: -200vw;
    }
    90% {
        left: -300vw;
    }
    95% {
        left: -300vw;
    }
}
.viewport>img {
    width: 100vw;
    float: left;
}

该问题已被官方收录

什么是文档流，什么是脱离文档流

1

1

css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<style>
        .box{
            float:left;
            width:200px;
            height:200px;
            background:#000;
        }
        .box{
            position:absolute;
            top:0;
            left:0;
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box"></div>

去第页

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