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

该问题已被官方收录

如果任务八的第三页职业列表t用able实现各行格数宽度不一样怎么实现

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<tr>
      <td colspan="2">
         <table >
            <tr>
               <td rowspan="3" >
                 薪资待遇
               </td>
               <td >
                  <span>0-1年</span>
                  <span>5k-10k/月</span>
               </td>
             </tr>
             <tr>
                <td >
                   <span>1-2年</span>
                   <span>10k-20k/月</span>
                </td>
              </tr>
              <tr>
                <td>
                   <span>2-3年</span>
                    <span>20k-50k/月</span>
                </td>
              </tr>
           </table>
         </td>
     </tr>

该问题已被官方收录

这是bug?

0

1

布局

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

如何用固定定位fixed来实现任务十二选项框，fixer和absolute的区别

2

1

定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.footer{
     position: fixed;
     left: 0;
     bottom: 0;
     right: 0;
     .tele{
       width:43vw;
       height:12vw;
       border-radius:0.6vw;
       border:none;
       outline: none;
       font-size:4.17vw;
       margin-bottom:3vw;
       margin-left:4.5vw;
     }
     .tele1{
       background:white;
       border: solid #5fc0cd 0.2vw;;
       color:#5fc0cd;
     }
     .tele2{
       background:#5fc0cd;
       color: #FFFFFF;
     }

该问题已被官方收录

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

1

开发者工具

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

用bootstrap做导航栏为什么不能套row？

0

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    <nav class="navbar navbar-expand-md navbar-light nav-padding">
        <div class="container justify-content-end menu-padding">
            <button class="navbar-toggler button-margin" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="col text text-center navbar-nav justify-content-end">
                    <li class="nav-item">首页</li>
                    <li class="nav-item">职业</li>
                    <li class="nav-item">推荐</li>
                    <li class="nav-item">关于</li>
                </ul>
            </div>
        </div>
    </nav>

该问题已被官方收录

盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。

0

1

盒模型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：


html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/*header区域开始*/
/*顶部登录页面*/
/*顶部最大容器*/
.loginbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: #1d7ad9;
    font-size: 1.6rem;
    color: #ffffff;
}

/*顶部最大容器结束*/
.loginbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*文字框容器*/
.loginbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
}

/*文字框容器*/

/*文字框设置*/
.loginbar-right-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 50%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

/*结束*/

/*顶部文字框hover*/
.loginbar-right-right:hover {
    background-color: #ffffff;
    color: #000;
}

/*导航栏*/
.bnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bnt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
    height: 5rem;
}

.bnt-center {
    width: 9%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background-color: #ffffff;
    border-radius: 15%;
    font-size: 1.6rem;
}

.bnt-center:hover {
    background-color: #1d7ad9;
    color: #fff;
}

/*结束*/
/*进度条*/
.sidebar {
    width: 55%;
    border-top: 5px solid yellow;
    float: right;

}

.sidebar-top {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
}

.sidebar-center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:#ff7f02;
    position: absolute;
    
}

.sidebar-bottom {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task10</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/task10.css">
</head>
<body>
<header>
    <div class="loginbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 loginbar-left">
                    <div>客服热线：1234123412342</div>
                    <div class="loginbar-right">
                        <div class="loginbar-right-right">登录</div>
                        <div class="loginbar-right-right">注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bnt-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 bnt">
                    <div style="width: 50%;"></div>
                    <div class="bnt-center">首页</div>
                    <div class="bnt-center">在线定制</div>
                    <div class="bnt-center">标准箱</div>
                    <div class="bnt-center">品质保证</div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div style="width: 50%;"></div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-top">
                <div style="width: 40%;"></div>
                <div class="sidebar-center">1</div>
                <div class="sidebar-center">2</div>
                <div class="sidebar-center">3</div>
                <div class="sidebar-center">4</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-bottom">
                <div style="width: 40%;"></div>
                <div>1.定制纸箱</div>
                <div>2.上传附件</div>
                <div>3.选择数量</div>
                <div>4.确认下单</div>
            </div>
        </div>
    </div>
</header>
</body>
</html>

该问题已被官方收录

英文单词太长，不知道怎么处理？

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

没有代码，http://www.baidu.com/s?wd=pica&rsv_spt=1&rsv_iqid=0x930769df0003fb2d&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1

就像是上面的，浏览器会以为是一个单词。所以要想个办法解决。

该问题已被官方收录

上面用了定位但是会压在头目上，下边用了负值，有什么影响吗？

1

定位边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

上面用了定位但是会压在头目上，下边用了负值，有什么影响吗？

该问题已被官方收录

css的选择器概念很模糊，不理解

2

1

css概念

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.swap{}

该问题已被官方收录

多元素如何水平居中？

2

1

居中

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码