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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

折叠按钮点击范围精准化

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>

该问题已被官方收录

怎么用纯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;
}

该问题已被官方收录

如何用纯CSS写一个手动轮播图

1

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task14.css">
</head>
<body>
</body>
</html>

该问题已被官方收录

flex在ul中对list-style的一个奇怪现象

0

1

属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<ul class="ul-left">
             <li class="li-left"><a class="list-a" href="">阿里巴巴</a></li>
              <li class="li-left"><a class="list-a" href="">腾讯视频</a></li>
             <li class="li-left ing"><a class="list-a ing" href="">土豆网</a></li>
</ul>




这里是CSS
.ul-left {
display:flex;
flex-diretion:colunm;
justify-content:center;
align-item:center;
...
}

该问题已被官方收录

样式受到挤压，导致并行。

2

1

属性 bottstrap 属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row height">
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">1</span>
          <p class="font">匹配你现在的个人情况 寻找适合自己的岗位</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">2</span>
          <p class="font">了解职业前景薪金待遇、 竞争压力等</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">3</span>
          <p class="font font-right">掌握行业内顶级技能</p>
          <span class="arrows"></span>
        </div>
        <div class="col-md-3 col-sm-6 box">
          <span class="circle-content">4</span>
          <p class="font font-right">查看职业目标任务</p>
          <span class="arrows"></span>
        </div>
      </div>

该问题已被官方收录

首页如何学习栏的绿色箭头如何让其自适应宽度缩进

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

            <div class="rstudy row">
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">1</div>
                        <div class="study-text">匹配你现在的个人情况寻找适合自己的岗位</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">2</div>
                        <div class="study-text">了解职业前景薪金待遇、竞争压力等</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">3</div>
                        <div class="study-text">掌握行业内顶级技能</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">4</div>
                        <div class="study-text">查看职业目标任务</div>
                        <div class="study-arrow study-arrow2"></div>
                    </div>
                </div>
            </div>

.content .study .cstudy .study-num {
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.content .study .cstudy .study-text {
    height: 0.72rem;
    width: 1.5rem;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;vertical-align:middle;
}
.content .study .cstudy .study-arrow {
    background: url("img/icon.png") no-repeat -2rem -3rem;
    height: 0.3rem;
    width: 0.3rem;
    display: inline-block;
    position: relative;
    top: -0.5rem;
    left: 2.3rem;
}

该问题已被官方收录

栅格系统如何一栏显示十个

3

1

bottstrap 布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="col-xs-3 col-md-1 box">
                <div class=" link-content">
                    <a class="link">
                        <span class="circle2"></span> 手机软件
                    </a>
                </div>
            </div>

该问题已被官方收录

用sass如何重新实现任务11，和less有什么区别

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@font-size:4.86vw;
*{
  padding: 0;
  margin: 0;
}
body{
  background: #eff0f4;
.header{

  height: 11.25vw;
  background: #5fc0cd;
  width: 100vw;
  .close{
    font-size:3.47vw ;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 5vw;
    text-decoration: none;
  }
  .loading{
    font-size: @font-size;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 32.6vw;
    text-decoration: none;
  }
  .log{
    font-size:3.47vw ;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 3.4vw;
    margin-left: 32.6vw;
    text-decoration: none;
  }
}
}
.dialog          input{
  margin-top: 2.7vw;
    width:81vw;
    height:13.8vw;
    background:white;
    border:none;
  outline: none;
  padding-left:19vw;
  position: relative;
  font-size: 4.17vw;

}
.chart{
  height: 5.55vw;
  width: 4.16vw;
  margin-top: 7.16vw;
  margin-left: 5.55vw;
  border-right: solid 0.27vw #EFF0F4;
  padding-right: 6.25vw;
  position: absolute;
  z-index: 2;
  color: #EFF0F4;
}
.idea input{
  margin-top: 2.7vw;
  width:81vw;
  height:13.8vw;
  background:white;
  border:none;
  outline: none;
  padding-left:19vw;
  position: relative;
  font-size: 4.17vw;
}
.zero{
  height: 5.55vw;
  width: 4.16vw;
  margin-top: 7.16vw;
  margin-left: 5.55vw;
  border-right: solid 0.27vw #EFF0F4;
  padding-right: 6.25vw;
  padding-right: 6.25vw;
  position: absolute;
  z-index: 2;
  color: #EFF0F4;
}
.glass{

  outline: none;
    margin-top: 9.72vw;
   height: 13.8vw;
   width: 100vw;
   font-size: @font-size;
  background: #68CDD5;
  color: #FFFFFF;
}
.foot{
  margin-top: 2.7vw;
  font-size: 3.47vw;
 color:#68CDD5;
  margin-left: 76.3vw;
  text-decoration: none;
}
.object{
margin-top: 97.2vw;
}

该问题已被官方收录

bootstrap折叠导航栏脱离文档流

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>     
    <nav class="navbar navbar-default navbar-user" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle btn-user" data-toggle="collapse"
            data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="home.html">
            <img src="img/navlogo.png" alt="logo">
          </a>        
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="home.html">首页</a>
            </li>
            <li>
              <a href="job.html">职业</a>
            </li>
            <li>
              <a href="offer.html">推荐</a>
            </li>
            <li>
              <a href="about.html">关于</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section>
      <section id="myCarousel" class="carousel slide">
          <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
              <li data-target="#myCarousel" data-slide-to="4"></li>
          </ol>   
          <div class="carousel-inner">
              <div class="item active">
                  <img src="img/slide1.png" alt="First slide">
              </div>
              <div class="item">
                  <img src="img/slide2.png" alt="Second slide">
              </div>
              <div class="item">
                  <img src="img/slide3.png" alt="Third slide">
              </div>
              <div class="item">
                  <img src="img/slide4.png" alt="Fourth slide">
              </div>
              <div class="item">
                  <img src="img/slide5.jpg" alt="Fifth slide">
              </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </section>
  </section>
  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- 包括所有已编译的插件 -->
  <script src="js/bootstrap.min.js"></script>

.navbar-user {
    height: 100px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background-color: rgb(41, 176, 120);
  }
  .navbar-user  a {
    height: 100px;
    padding-top: 25px;
  } 
   .navbar-user .btn-user {
    margin: 30px 20px;
    border: none;
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user:focus,
  .navbar-user .btn-user:hover {
    background-color: rgb(72, 209, 151);
  }
  .navbar-user .btn-user .icon-bar {
    background-color: rgb(255, 255, 255);
  }
 
  .navbar-user .navbar-collapse ul {
    float: right;
    
  }
  .navbar-user .navbar-collapse ul a {
    padding-top: 50px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(41, 176, 120);
  }
  @media (max-width: 767px) {
    .navbar-user .navbar-collapse ul {
      float: none;
      margin-top: 0;
      margin-bottom: 0;
      background-color: rgb(41, 176, 120);
    }
  }
  .navbar-user .navbar-collapse ul .active a {
    border-bottom: 5px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    background-color: rgb(72, 209, 151);
  }

该问题已被官方收录

图标HOVER时边框被覆盖怎么解决？

1

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.cooperationbox .cooperation:hover {
    border: 1px solid silver;
    box-shadow: 1px 1px 1px 1px silver;

去第页

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