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任务十的时候怎么实现进度条和它的触碰效果？

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 625%;
}

body {
    font-size: .18rem;
    color: #999999;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*页眉*/

header {
    background: #1d7ad9;
    color: #ffffff;
    font-size: .14rem;
}

.header {
}

.header span {
    float: left;
    line-height: .40rem;
    white-space: nowrap;
}

.btn-right {
    float: right;
    border-left: 1px #ffffff solid;
}

.btn-right a {
    display: inline-block;
    height: .40rem;
    width: .60rem;
    color: #ffffff;
    text-align: center;
    line-height: .40rem;
}

.btn-right a:hover {width: 1rem; color: #000000; background: #ffffff; text-decoration: none;}

/*导航栏*/

nav {
    background: #f9f9f9;
}

.btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 1rem;
}

.btn-group button {
    margin-left: .60rem;
    padding: .15rem;
    border: 0;
    border-radius: .05rem;
    color: #000000;
    background: #ffffff;
    box-shadow:0 0 3px #999999; 
}

/*下拉菜单*/

ul {
    margin: 0rem;
    padding: 0;
    list-style-type: none;/*去除无序列表默认圆点*/
    display: none;
}

li {
    text-align: center;
    line-height: .40rem;
    border-top: 1px #ccc solid;
}

nav label, #hanbao-menu, ul {
    display: none;
}

input[type=checkbox]:checked ~ ul {display: block}


li:hover {background: #1d7ad9; color: #ffffff;}
.btn-group button:hover {background: #1d7ad9; color: #ffffff;}
.btn-group button:hover a {color: #ffffff;}

/*流程图*/

.step {
    display: flex;
    justify-content: flex-end;
    margin: .30rem 0;
}

.step-unit {
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .20rem;
}

.step .left,.step .right{
    display: inline-block;
    width: .60rem;
    height: .05rem;
    background: #ccc;
}

.step .center {
    display: inline-block;
    width: .24rem;
    height: .24rem;
    border-radius: .12rem;
    text-align: center;
    color: #ffffff;
    font-size: .16rem;
    background: #ccc;
}

.step-unit:hover .left{background: #ff7f02;}
.step-unit:hover .center{background: #ff7f02;}
.step-unit:hover .right{background: #ff7f02;}
.step-unit:hover span{color: #ff7f02;}

/*主体表单*/

h4 {
    display: inline-block;
    padding-left: .10rem;
    border-left: 3px #1d7ad9 solid;
    color: #000000;
}

.thumbnail {
    padding: 0;
}

.thead {
    padding: .10rem;
    color: #1d7ad9;
    background: #f3f3f3;
}

.box-type, .box-size {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #fbfcff;
    border-bottom: 1px #f3f3f3 solid
}


label {
    margin: .20rem .30rem .20rem 0;
    font-weight: normal;
}

label div {
    display: inline-block;
    position: relative;
    top: .03rem;
    width: .18rem; 
    height: .18rem;
    background: url(images/circle-before.png);
} 

.radio-mod {
    opacity: 0;
} 

input[type="radio"]:checked + div { background: url(images/circle-after.png); }

select {
    margin: .20rem;
    width: 1.3rem;
    height: .40rem;
    border: 1px #f3f3f3 solid;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(images/drop-down.png) no-repeat 95% center #ffffff;
}

.caliber {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.caliber>span {
    margin-right: .50rem;
}

.next {
    margin: 1.4rem 0 1rem 0;
    display: inline-block;
    padding: .10rem;
    border: none;
    border-radius: .05rem;
    width: 1.8rem;
    color: #ffffff;
    background: #e15053;
}

.btn-next {
    text-align: center;
}

.next:hover {background: #1d7ad9;}

@media screen and (max-width: 768px) {

    nav {
        text-align: right;
        border-bottom: 1px #ccc solid;

    }

    .btn-group {
        display: none;
    }

    ul {
        margin: 0 -.30rem;
    }

    nav label {
        display: inline-block;
    }

    .step {
        display: flex;
        justify-content: center;
    }

    .step-unit {
        width: 25%;
    }

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

    .adress {
        position: relative;
        left: 1.2rem;
    }

}

该问题已被官方收录

scss中@media中无法使用@extend。

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%border-color{
    border-color: red;
};
div{
    @media screen {
        margin:10px;
        @extend %border-color;
    }
}

该问题已被官方收录

做下拉菜单时，发现下拉菜单的宽度会继承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>

该问题已被官方收录

任务十的进度条如何实现，以及进度条点击时的效果

5

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    .icon {
        width: 100%;
    }

    .icon .left, .icon .right {
        width: 45%;
        height: .05rem;
    }

    .caliber {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .box-size {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .caliber>span {
        margin: .10rem .25rem;
    }

    .next {
        margin: .50rem 0;
    }

}


aside {
    margin-top: .50rem;
    padding: .60rem 0;
    font-size: .14rem;
    background: #f9f9f9;
}

.aside-left {
    padding-left: .30rem;
    padding-bottom: .20rem;
}

.aside-center div {
    margin-bottom: .20rem;
}

.aside-center a {
    color: #999999;
}

.aside-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside img {
    height: .92rem;
}

.adress {
    width: 1.5rem;
}

.aside-center a:hover {color: #1d7ad9;}

/*页脚*/

footer {
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    padding: .12rem 0;
    background: #1d7ad9;
}

/*媒体查询*/

@media screen and (max-width: 992px) {

    aside {
    margin-top: .20rem;
    padding: .20rem 0;
    }   

    .aside-right {
        display: flex;
        justify-content: flex-start;
    }

    .aside-right img {
        position: absolute;
        left: .30rem;
    }

该问题已被官方收录

折叠按钮点击范围精准化

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>

该问题已被官方收录

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport", content="device-width,initial-scale=1.0, manimun-scale=1.0,user-scaleble=no" />
	<title>task10</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
	<div class="head-t">
		<div class="ht-box">
			<div class="ht-left">
				客服热线：010-8888-8888
			</div>
			<div class="ht-right">
				<a class="ht-link" href="#">登录</a><a class="ht-link" href="#">注册</a>
			</div>
		</div>
	</div>
	<div class="head-b">
		<div class="hb-box">
			<button class="hb-btn" type="button">首页</button>
			<button class="hb-btn" type="button">在线定制</button>
			<button class="hb-btn" type="button">标准箱</button>
			<button class="hb-btn" type="button">品质保障</button>
		</div>
	</div>
</header>
<main>
	<div class="main-t">
		<div class="mt-box">
			<div class="bar">
				<span>1</span>
				<p>1.定制纸箱</p>
			</div>
			<div class="bar">
				<span>2</span>
				<p>2.选择数量</p>
			</div>
			<div class="bar">
				<span>3</span>
				<p>3.上传附件</p>
			</div>
			<div class="bar">
				<span>4</span>
				<p>4.确认下单</p>
			</div>
		</div>
	</div>
	<div class="main-b">
		<div class="mb-box">
			<p><span>|</span>请按照以下步骤来定制纸箱</p>
			<form name="box" method="post" action="save.php">			
				<div class="label-box">
					<label><img src="ico1.png" />选择箱型</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="one" id="box-type1">
						<label for="box-type1">对口箱</label></span>
					<span><input type="radio" name="one" id="box-type2">
						<label for="box-type2">飞机箱</label></span>
					<span><input type="radio" name="one" id="box-type3">
						<label for="box-type3">天地盖</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico2.png" />确定尺寸</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="two" id="box-size1">
						<label for="box-size1">外径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<br />
					<span><input type="radio" name="two" id="box-size2">
						<label for="box-size2">内径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico3.png" />选择材质</label>
				</div>
				<div class="input-box second-intput-box">
					<span><input type="radio" name="three" id="box-material1">
						<label for="box-material1">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material2">
						<label for="box-material2">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material3">
						<label for="box-material3">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material4">
						<label for="box-material4">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material5">
						<label for="box-material5">三层A瓦优质</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="submit-box">
					<input type="submit" value="下一步">
				</div>
			</form>
		</div>
	</div>
</main>
<footer>
	<div class="foot-t">
		<div class="ft-box">
			<div class="ft-l">
				51包装网——纸箱包装首选服务平台
			</div>
			<div class="ft-m">
				<a class="ft-link" href="#">关于我们</a>
				<a class="ft-link" href="#">配送流程</a>
				<a class="ft-link" href="#">联系我们</a>
				<a class="ft-link" href="#">下单指南</a>
				<a class="ft-link" href="#">媒体介绍</a>
			</div>
			<div class="ft-r">
				<img src="wx.png" />
				<p>TEL:400-000-000</p>
				<p>企业QQ:123456789</p>
				<P>微信:XXXXXXX</P>				
			</div>
	</div>
	<div class="foot-b">
		<div class="fb-box">
			  北京五一包装科技有限公司Copyright ©2015 51baozhuang.com015 All rights reserved.    京icp备99999999-1 
		</div>
	</div>
</footer>
</body>
</html>

html{
	font-size:625%;
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	min-width:320px;

}
/*中间宽度*/
.ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
	width:90%;
	max-width:1200px;
	margin:0 auto;
}
@media screen and (max-width:767px) {
    .ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
        width:99%;
        margin:0 auto;
    }
}
.ht-box{
	height:0.4rem;
	display:flex;
	justify-content:space-between;	
	align-items:center;
}

/*头部*/
.head-t{
	background:#1d7ad9;	
}

.ht-left{
	color:#fff;
	font-size:0.14rem;
}
.ht-right{
	height:100%;
	font-size:0.16rem;
}
a.ht-link{
	display:inline-block;
	height:100%;
	line-height:0.4rem;
	padding:0 0.1rem;
	text-decoration:none;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
a.ht-link:link,a.ht-link:visited{
	color:#fff;
}
a.ht-link:hover{
	color:#000;
	background:#fff;
}
.head-b{
	background:#f9f9f9;
	font-size:0.16rem;
	text-align:right;
}
button.hb-btn{
	background:#fff;
	margin:0.26rem 0 0.26rem 0.6rem;
	padding:0.08rem;
	border:none;
	border-radius:5px;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;	

}
@media screen and (max-width:767px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.3rem;
    }
}
@media screen and (max-width:500px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.05rem;
    }
}
button.hb-btn:hover{
	background:#1d7ad9;
	border-color:none;
	color:#fff;
}
button.hb-btn:focus{
	outline:none;
}
/*进度条*/
.mt-box{
	display:flex;
	justify-content:flex-end;
	margin-top:0.5rem;
}
.bar{
	width:15%;
	height:0.05rem;
	font-size:0.14rem;
	border-radius:1px;
	background:#ccc;
	text-align:center;
	position:relative;
}
@media screen and (max-width:767px) {
    .bar{
        width:20%;
    }
}
@media screen and (max-width:767px) {
    .bar{
        width:25%;
    }
}
.bar span{
	display:inline-block;
	width:0.24rem;
	height:0.24rem;
	border-radius:100%;
	background:#ccc;
	line-height:0.24rem;
	position:relative;
	top:-0.1rem;
	color:#fff;
}
.bar:hover,.bar:hover span{
	background:#ff7f02;
}
.bar:hover p{
	color:#ff7f02;
}
.bar p{
	font-size:0.18rem;
}
@media screen and (max-width:500px) {
    .bar p{
        font-size:0.14rem;
    }
}
/*表单*/
.mb-box{
	font-size:0.18rem;
	margin-top:1rem;
}
.mb-box>p{
	font-size:0.22rem;
}
.mb-box>p>span{	
	color:#1d7ad9;
	font-weight:bold;
	padding:0 1px;
}
form{
	border:1px solid #e7e7e7;
	position:relative;
	word-wrap-:break-word;
}
.first-label{
	border:none;
}
.label-box{
	color:#1d7ad9;
	font-weight:bold;
	background:#f4f4f4;
	padding:0.14rem 0;
}	
.input-box{
	background:#fbfcff;
	padding:0.28rem 0;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	position:relative;
	padding-right:1.4rem;

}
.input-box span{
	width:2rem;
	text-align:center;
	position:relative;
	display:inline-block;
}
.label-box img{
	position:relative;
	top:5px;
	margin:0 5px;
}
.size{
	width:0.7rem;
	margin:0.25rem 0.01rem;
}
.submit-box{
	text-align:center;
}
.submit-box input{
	color:#fff;
	width:1.8rem;
	font-size:0.24rem;
	padding:0.1rem 0.55rem;
	margin:1.4rem auto 1rem;
	border:none;
	background:#e15053;
	border-radius:5px;
}
select{
	position:absolute;
	right:0.1rem;
	top:50%;
	margin-top:-0.17rem;
	height:0.37rem;
	/*小三角*/
	appearance:none;
	-moz-appearance:none;
 	-webkit-appearance:none;
	background: url("shape.png") no-repeat right;
	padding:0px 0.4rem 0 0.2rem;
	background-position:95% 50%;
}
/*单选按钮*/
input[type=radio]{
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    border: 1px solid #1d7ad9;
    outline: none;
    cursor: pointer;
    /*设置为圆形，看起来是个单选框*/
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #1d7ad9;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    /*增加一些动画*/
    -webkit-transition : all ease-in-out 300ms;
    -moz-transition : all ease-in-out 300ms;
    transition : all ease-in-out 300ms;
}
input[type=radio]:checked:after{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


/*底部*/
.foot-t{
	color:#999;
	background:#f9f9f9;
}
.ft-box{	
	padding:0.6rem 0;
}
@media screen and (min-width:500px) {
    .ft-box{
        display:flex;
    }
}
.ft-l,.ft-m,.ft-r{
	width:30%;
	flex-grow:1;
	margin:0 0.4rem;
}
@media screen and (max-width:500px) {
    .ft-l,.ft-m,.ft-r{
        margin:0.5rem auto;
        text-align:center;
    }
}
.ft-l{
	font-size:0.18rem;
}
.ft-m{
	font-size:0.14rem;
}
a.ft-link{
	display:inline-block;
	width:1rem;
	text-align:center;
	text-decoration:none;
}
a.ft-link:link,a.ft-link:visited{
	color:#999;
}
a.ft-link:hover{
	color:#1d7ad9;
}
.ft-r{
	font-size:0.14rem;
}
.ft-r img{
	width:1rem;
	height:1rem;
}
@media screen and (min-width:992px) {
    .ft-r img{
        float:right;
    }
}
.ft-r p{
	margin-top:0;
}
.foot-b{
	color:#fff;
	font-size:0.12rem;
	text-align:center;
	padding:0.1rem;
	background:#1d7ad9;
}

该问题已被官方收录

F12，再不同的缩放比例下，列表框的下拉框的大小不一

1

1

开发者工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

css有没有办法点击单选按钮使前面的某个元素变色。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="nav">
        <input type="checkbox" id="nav-toggle" class="nav-toggle">
        <label for="nav-toggle">
            <svg xmlns="http://www.w3.org/2000/svg" width="23" height="22">
                <defs>
                    <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1.6">
                    </filter>
                </defs>
                <polygon points="1,1 22,10 1,20 1,1" fill="#1d7ad9" filter="url(#shadow)"></polygon>
            </svg>
        </label>
        <ul class="nav-list">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">在线定制</a>
            </li>
            <li>
                <a href="#">标准箱</a>
            </li>
            <li>
                <a href="#">品质保障</a>
            </li>
        </ul>
    </nav>
    <main class="main">
        <div class="step-box">
            <div class="step">
                <div class="circle" id="box-circle">1</div>
                <div class="line" id="box-line"></div>
                <p id="step-one">1.定制纸箱</p>
            </div>
            <div class="step">
                <div class="circle" id="size-circle">2</div>
                <div class="line" id="size-line"></div>
                <p id="step-two">2.选择数量</p>
            </div>
            <div class="step">
                <div class="circle" id="material-circle">3</div>
                <div class="line" id="material-line"></div>
                <p id="step-three">3.上传附件</p>
            </div>
            <div class="step">
                <div class="circle">4</div>
                <div class="line"></div>
                <p>4.确认下单</p>
            </div>
        </div>

.nav{
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 15%;
    background-color: #f9f9f9;
}
.nav-list{
    float: right;
    list-style: none;
}
.nav-list li{
    display: inline-block;
    margin-left: 30px;
}
/* .nav-list li a:focus,
.nav-list li a:hover{
    color: #fff;
    background-color: #1d7ad9;
} */
.nav-list li a{
    display: inline-block;
    height: 45px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 45px;
    text-decoration: none;
    background-color: #fff;
    border-radius: 8px;
    color: #333;
    box-shadow: 0 0 5px 1px #ccc;
}
.nav input:checked~.nav-list{
    display: block;
}
.nav input:checked~label svg{
    transform: rotateZ(90deg);
    transition: width 2s;
}
.nav label{
    display: none;
}
.nav .nav-toggle{
    display: none;
}
.main{
    padding-left: 15%;
    padding-right: 15%;
}
.step-box{
    display: flex;
    justify-content: flex-end;
    text-align: center;
}
 .step:hover div{
    background-color: #ff7f02;
}
.step:hover p{
    color: #ff7f02;
}
.step-box p{
    padding-top: 20px;
}
.line{
    height: 3px;
    width: 10vw;
    border-radius: 2px;
    background-color: #cccccc;
    min-width: 71px;
}
.circle{
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background-color: #cccccc;
    text-align: center;
    z-index: 1;
    color: #fff;
    position: relative;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
}
.message{
    line-height: 40px;
    font-weight: bold;
    font-size: 1.8rem;
}
.message span::before{
    content: "";
    display: inline-block;
    vertical-align: text-top;
    margin-right: 5px;
    height: 1.9rem;
    width: 3px;
    border-radius: 2px;
    background-color: #1d7ad9;
}
.choose{
    position: relative;
    padding-left:35px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    color: #1d7ad9;
    background-color: #f3f3f3;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}
.choose .word-box::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/box.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose .word-size::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/size.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose .word-material::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 15px;
    height: 13px;
    background-image: url(images/scissors.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.choose-box{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fbfcff;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    z-index: 2;
}
.box-one,.box-two,.box-three{
    display: inline-block;
    margin-left: 30px;
}
.choose-material>div:nth-child(-n+5){
    display: inline-block;
    margin-left: 30px;
}
.choose-size{
    position: relative;
    padding-top: 30px;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
    z-index: 1;
}
.size-box{
    display: flex; 
    padding-bottom: 30px;
}
.text-box{
    margin-left: 30px;
}
.choose-material{
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fbfcff;
    border: 1px solid #e8e8e8;
    z-index: 1;
}
input[type="text"]{
    padding: 0;
    height: 18px;
    outline: none;
    border: none;
    border: 1px solid #ccc;
}
.size-one,.size-two{
    margin-left: 30px;
}
label{
    font-weight: normal;
}
input[type="radio"] + .choice::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
    margin-right: 12px;
    vertical-align: text-top;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    background-color: #f8f9fb;
}
input[type="radio"]:checked + .choice::before {
    background-image: url(images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
/* div+js模拟下拉框 */
.select-box{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%); 
    background: #fff;
}

如何用css做一个导航栏

0

1

表单元素属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                        <button class="menu">
                            <div class="across"></div>
                            <div class="acr"></div>
                            <div class="across"></div>
                        </button>
    .menu {
        display: flex;
        flex-direction: column;
        border-style: none;
        outline: none;
        border-radius: 4px;
        margin-right: 1.8rem;
        padding: 5px;
        background-color: rgb(238, 235, 235);
    }
    .across {
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .acr {
        margin: 2px 0;
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .menu:hover .gps {
        display: block;
    }

不用js怎么实现滚动条及文本鼠标移上去时改变颜色

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="mybar">
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 25%;">
            <span class="sr-only">25% 完成（警告）</span>
        </div>
    </div>
    <div class="figure">
        <span class="circle1">1</span>
        <span class="circle">2</span>
        <span class="circle">3</span>
        <span class="circle">4</span>
    </div>
    <div class="step">
        <div>1.定制纸箱</div>
        <div>2.选择数量</div>
        <div>3.上传附件</div>
        <div>4.确认下单</div>
    </div>
</div>



.mybar {
    width: 62%;
    float: right;
    padding-right: 19%;
    margin-top: 40px;
}

.step {
    color: #d3d3d3;
    display: flex;
    justify-content: space-around;
    font-size: 18px;
}

.step div:first-child {
    color: #ff7f02;
}

.figure {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
}

.progress {
    height: 5px;
}

.progress-bar-warning {
    background: #ff7f02;
}

去第页

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