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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何隐藏播放按钮

3

1

隐藏按钮

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     <!--minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/task7.2.css">
</head>
<body>
<div class="wrap">
    <div class="head">
      <img src="../img/task7.1.1.png" class="catalogue" alt="">
      <span class="vote">投票</span>
      <img src="../img/task7.1.2.png" class="wrong" alt="">
     </div>
    <div class="make">
      <span>发表讨论结果，大家请投票</span>
        <img src="../img/taask7.17.png" alt="">
        <audio src="../audio/财富自由.mp3" controls="controls">
            Your browser does not support the audio element.
        </audio>
    </div>
*{
    margin: 0;
    padding: 0;
}
.head{
    width: 100%;
    height: 14.59vw;
    background: #29bde0;
}
.catalogue{
    width: 6.093vw;
    height: 5.25vw;
    margin-top: 4.78vw;
    margin-left: 3.59vw;
}
.wrap{
    background: #29bde0;
}
.vote{
    position: absolute;
    margin-left: 38vw;
    font-size: 4vw;
    color: #ffffff;
    margin-top: 5vw;
}
.wrong{
    width: 3.78vw;
    margin-left: 34.31vw;
    margin-top: 6vw;
    margin-right: 4vw;
    float: right;
}
.make{
    height: 12.65vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.12rem;
    background: #b9e9f5;
}
.make audio{
    width: 5vw;
    height: 2vw;
    margin-right: 2.65vw;
  
}
.make img{
    position: absolute;
    width: 8.125vw;
    margin-left: 90vw;
}
.make span{
    margin-left: 7.5vw;
    font-size: 3vw;
    padding-top:0.8vw;
}

该问题已被官方收录

某些属性不能用样式表控制，只能写在标签里

0

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div class="input">
        <img src="../img/css4/css401.jpg">
        <input type="text" placeholder="请输入用户名"  maxlength="11"  onkeyup="value=value.replace(/[^\d]/g,'')">
    </div>
    <div class="input">
        <img src="../img/css4/css402.jpg">
        <input type="password" placeholder="请输入密码" >
    </div>

 <audio class="audio" src="../audio/css7.mp3" controls="controls">
        您的浏览器不支持音频
    </audio>

该问题已被官方收录

图标如何收放

1

1

css概念布局

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

折叠按钮点击范围精准化

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>

该问题已被官方收录

如何让侧边导航栏推走footer？

1

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: .85rem;
    background: #29bde0;
    div {
        width: 100%;
        line-height: .85rem;
        border-top: 1px solid white;
        text-align: center;
        button {
            vertical-align: middle;
            width: 60%;
            height: 0.435rem;
            font-size: 0.2rem;
            color: white;
            background: #fbb435;
        }
    }
}

.box {
    position: relative;
    overflow: hidden;
    input {
        display: none;
    }
    .side-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 70%;
        background: white;
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: .5rem;
                border-bottom: 1px solid #999999; 
                list-style: none;
                &::after {
                    content: "";
                    display: inline-block;
                    width: .16rem;
                    height: .16rem;
                    transform: rotate(45deg);
                    border-top: 3px solid #69D1E9;
                    border-right: 3px solid #69D1E9;
                    margin-right: .1rem;
                }
                &:hover {
                    background: #f0f0f0;
                }
            }

    }
    #sidemenu:checked~.content {
        margin-left: 70%;
    }
    .content {
        position: relative;
        overflow: hidden;
        transition: margin-left 1s;
    }
}

该问题已被官方收录

如何让滚动条只在中间主题部分，不让滚动条出现在页眉和页脚部分？

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 14rem;
    background-color: #f8fafb;
}

 <div style="height:14rem;"></div>

<div class="row main-body">

该问题已被官方收录

给小箭头设置旋转后，小箭头浮动在上面的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);
}

该问题已被官方收录

在做任务十二header部分的返回小图标一直都是用的图片，如何用纯css实现呢？

3

1

CSS图标

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>护工个人主页</title>
	<link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="task12-1.css">
</head>
<body>
    <header>
        <a href="task12-2.html"><</a>
        <span>个人主页</span> 
    </header>
    <main>
        <div class="background">
            <div><img src="../task5/images/head.png"></div>
            <p>高素雅 51岁<br>
            <img src="../task5/images/icon-1.png" class="dingwei">
            <span>北京·通州·报纸林</span>
            </p>
        </div>
        <p>专业技能</p><hr>
        <div class="list">
            <p><span class="red">☆</span><span class="left-text-first">住家</span><span class="red">☆</span><span>不含餐</span></p><hr>
            <p><span class="left-text">从业年限</span>0~3</p><hr>
            <p><span class="left-text">工作时间</span>全天</p><hr>
            <p><span class="left-text">服务价格</span><span class="red">25元/小时</span></p><hr>
            <div class="last">
                <div class="myself">
                    <span>自我介绍</span>
                </div>
                <div class="oneself">
                    <span>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</span>
                </div>
            </div><hr>
        </div>
    </main>
    <footer>
        <button class="btn-left">留言</button>
        <button class="btn-right">电话联系</button>
    </footer>
</body>
</html>
a {
    color: #ffffff;
    text-decoration: none; }
  
  html {
    font-size: 625%; }
  
  body {
    margin: 0.4rem 0 0.5rem;
    padding: 0;
    font-size: .18rem; }
  
  header {
    position: fixed;
    top: 0;
    text-align: center;
    line-height: .40rem;
    width: 100%;
    color: #ffffff;
    background: #5fc0cd; }
    header a {
      position: absolute;
      left: 0;
      padding: 0 .15rem; }
  
  main {
    margin: .40rem 0 .50rem 0; }
    main .background {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 2rem;
      background: url(../task5/images/bg.png) no-repeat;
      background-size: cover; }
      main .background div {
        width: .80rem;
        height: .80rem;
        padding: 0 .30rem; }
      main .background .dingwei {
        position: relative;
        top: .08rem;
        transform: scale(0.6); }
      main .background span {
        font-size: .12rem; }
      main .background img {
        max-width: 100%;
        max-height: 100%; }
    main > p {
      margin-left: .18rem;
      padding-left: .18rem;
      border-left: 2px solid #5fc0cd; }
    main .list {
      padding: 0 .18rem; }
      main .list .red {
        color: #e26163;
        font-weight: 500; }
      main .list .left-text-first {
        color: black;
        padding-right: .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid; }
      main .list .left-text {
        color: #999999;
        width: 1.12rem;
        padding: 0 .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid;
        white-space: nowrap; }
      main .list .last {
        display: flex;
        align-items: center; }
        main .list .last .myself {
          color: #999999;
          position: absolute;
          width: 1.12rem;
          border-right: 1px #999999 solid;
          text-align: center;
          white-space: nowrap; }
        main .list .last .oneself {
          margin-left: 1.35rem; }
  
  footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: .50rem;
    width: 100%;
    background: #ffffff; }
    footer .btn-left {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #5fc0cd;
      background: #ffffff; }
    footer .btn-right {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #ffffff;
      background: #5fc0cd; }

该问题已被官方收录

任务七雪碧图调好位置之后无法调节大小

2

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

该问题已被官方收录

使用LESS编码时，less应该如何来写，是开头直接编译好，还是像CSS一样。

0

1

Less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

CSS：
@color:red;
@colora:#b3b3b3;
@colorb:#e5e5e5;
@background:#fff;
@backgrounda:#5fc0cd;
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#5fc0cd;
}
.button1{
  outline: none;
  cursor: pointer;
  border: 1px solid #55a8b3;
  color: #fff;
  background: #55a8b3;
  font-size: 28px;
  border-radius: 10%;
}
.button2{
  outline: none;
  cursor: pointer;
  border: 1px solid #fff;
  color: #55a8b3;
  background: #fff;
  font-size: 28px;
  margin-left: -.5rem;
  border-radius: 10%;
}
.footer{
  height: 23rem;
  background:#fff;
}

html{
  font-size: 62.5%;
}
body{
  margin: 0;
  padding: 0;
}
select{
  margin: 0;
  padding: 0;
}
.nav1{
  .top
}
.nav2{
  .button1;
}
.nav3{
  .button2;
  margin:1rem -.5rem;
}
.nav4{
  padding-right: 2rem;
}
main header{
  height: 4rem;
  border-bottom: 1px solid gainsboro;
}
select{
  width: 32.5%;
  border: 0;
  text-align-last: center;  //可以使下拉菜单，文本居中。
  height: 3.5rem;
  outline: none;
  border-right: 1px solid @colora;
  color:@colorb;
  font-size: 2.8rem;
}
.main1{
  .footer;
  padding-left: 1rem;
  margin: 1.5rem 0 .5rem 0;
  border-bottom: 1px solid gainsboro;
  font-size: 2.8vw;
  .main2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }
  .main3{
    display: flex;
    align-items: center;
    padding-left: 3rem;
  }
  .main4{
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
    padding-right: 2rem;
    img{
      padding-top: 1rem;
      width: 2.8vw;
    }
  }
  .main5{
    .main3;
    color:@color;
  }
}
@media screen and (max-width: 900px){
  .main1{
    height: 20rem;
  }
}
@media screen and (max-width: 800px) {
  .main1{
    height: 16rem;
  }
}
footer{
  display: flex;
  justify-content: space-around;
  height: 6.5rem;
  background: #f8fafb;
  .footer1{
    margin-top: 1rem;
    text-align: center;
    color: #5fc0cd;
  }
  .footer2{
    margin-top: 1rem;
    text-align: center;
    color: gainsboro;
  }
}

去第页

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