IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

这个什 i 起什么作用

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

div{
    height: 100px;
    width: 200px;
    background-color: pink;
    text-align: center;
}
span{
    display:inline-block;
    vertical-align: middle;
    line-height: 20px;
    width: 100px;
}    
i{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}



<div>
        <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
  </div>

下拉菜单出不来

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

main {
    background-color: #fafafa;
}

header {
    /* height: 50px;   神坑定高！下拉出不来   */
}

.head-top {
    display: flex;
    justify-content: space-between;
}

/*客服热线*/
.tel {
    margin-top: 0.5%;
    margin-left: 2%;
    margin-top: 3px;
    font-size: 12px;
    color: #29B078;
}

/*微信微博qq图标*/
.head-img {
    margin-right: 2%;
}


.head-img img {
    width: 20px;
    margin-left: 8px;
}


/*加跳转链接*/
.head-text a {
    text-decoration: none;
    color: #ffffff;
}


.carousel-caption .text-4 a {
    text-decoration: none;
    color: #ffffff;
}


.navbar-nav .nav-item .nav-link {
    padding: 15px;
    border: 1px solid #26a26f;
}


.navbar-nav .nav-item .nav-link:hover {
    border-bottom: 1px solid white;
}



/*下面是轮播图的Boot4组件*/

/*这个类，组件里自带了absolute，我这里修改的是文字上移的位置*/
.carousel-caption {
    bottom: 32% !important;
}

/* Make the image fully responsive 让图片全屏展示*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-inner .text {
    text-align: center;
    font-weight: bold;
    font-size: 2.5vw;
    color: #ffffff;
}

.carousel-inner .text-2 {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 2px;
    color: #ffffff;
}

.carousel-inner .text-2 span {
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #ffffff;
}


.carousel-inner .text-3 {
    text-align: center;
    font-weight: bold;
    font-size: 6.5vw;
    font-family: MicrosoftJhengHei;
    color: #ffffff;
}


.carousel-inner .text-4 {
    text-align: center;
    font-size: 5.5vw;
    font-family: MicrosoftJhengHei;
    letter-spacing: 2px;
    color: #ffffff;
}


.container.intro {
    margin-bottom: 120px;
}

flex布局

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

align-center:stretch

为什么表格给予宽度10%会有100%的效果

0

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

height: 40px;
    width:10%;
   padding-left: 18px;

对display：inline-block的行标签设置margin：0 auto

0

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    margin: 0 auto;
    width: 35px;
    display: inline-block;
    line-height: 90px;
    text-align: center;

不用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;
}

怎么实现侧边栏的不用js实现点击隐藏跟显示？

0

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

onclick重复点击问题

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 随机一个颜色
function bG1(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    if("rgb(" + r + "," + g + "," + b + ")"=="rgb(251, 180, 53)") {
        return bG1();
    }
    else{
        return "rgb(" + r + ","+ g + "," + b + ")";
    }
}
// 随机三个数字    
function divNumenr1(){
    n1 = Math.floor(Math.random()*9);
    return n1;
}
function divNumenr2(){
    n2 = Math.floor(Math.random()*9);
    if(n1==n2) {
        return divNumenr2();
    }
    else{
        return n2;
    }
}
function divNumenr3(){
    n3 = Math.floor(Math.random()*9);
    if(n2==n3) {
        return divNumenr3();
    }
    else if(n1==n3) {
        return divNumenr3();
    }
    else{
        return n3;
    }
}
// 定时器

function divLoop(){
        divStart = setInterval(divBN,1000);

}
// 停止定时器
function divStop(){
    clearInterval(divStart);
    var i=0;
    while(i<9){
        document.getElementsByTagName("div")[i].style.background = "rgb(251, 180, 53)";
        i++;
    }
}
function divBN() {
    for(var i=0; i<9; i++) {
        document.getElementsByTagName("div")[i].style.background = "rgb(251, 180, 53)";
    }
    document.getElementsByTagName("div")[divNumenr1()].style.background = bG1();
    document.getElementsByTagName("div")[divNumenr2()].style.background = bG1();
    document.getElementsByTagName("div")[divNumenr3()].style.background = bG1();
}

同时学习git和svn在初学的现在真的有必要吗？

0

1

git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

父元素使用伪类hover时出现了子元素出现同样效果的问题

0

1

hover

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

           <div class="col-xs-12  col-sm-12 col-md-5 main4-box">
                <div class="main4-icobox">
                    <div class="main4-ico1 main4-clearhover"></div>
                </div>
            </div>
.main4-box :hover {
    box-shadow: 0 0 1px #9E9E9E;
}