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"> 代码

<nav class="navbar navbar-expand-md bg-green navbar-dark">
      <a class="navbar-brand" href="#">修真院</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav float-right">
          <li class="nav-item active ">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">职业</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link " href="#"> 推荐 </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">关于</a>
          </li>
        </ul>
      </div>
    </nav>

该问题已被官方收录

照片多余的怎么办？

2

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/task8.2.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="wrap">
    <div class="container">
        <div class="header-main">
            <span>客服热线：010-594-78634</span>
            <div class="vx">
                <img src="../img/task8...png"  alt="">
                <img src="../img/task.8..png" alt="">
                <img src="../img/task.81.png"  alt="">
            </div>
        </div>
    </div>
    <div class="navigation">
        <div class="container">
            <div class="option">
                <div class="page">首页</div>
                <div class="profession">职业</div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
            <div class="item active ">
                <img src="../img/task.8.223.png" alt="...">
            </div>
    <div class="container">
        <span>首页</span>>
        <span class="firm">合作企业</span>
    </div>
</div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    background: #fafafa;
}
.header-main{
    width: 100%;
    color: #29b078;
    display: flex;
    justify-content:space-between ;
    margin-top:1rem;
    margin-bottom: 0.5rem;
}
.navigation{
    width: 100%;
    background: #29b078;
    height:9.4rem;
}
.xte{
    width: 100%;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
}
.page{
    margin-right: 1.5rem;
}
.page:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.regard{
    margin-right: 1.5rem;
}
.regard:hover{
    color: #fff;
    background-color: transparent;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.firm{
    color:#29b078;
}

该问题已被官方收录

两列li标签左侧的远点无法对对齐

1

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="back-fff">
            <div class="container">
                <p class="my-4 px-18 clr-333 bold text-center">友情链接</p>
                <ul class="d-flex flex-wrap blogroll">
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a href="">教师招聘</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                    <li><a href="">手机软件</a></li>
                    <li><a class="mr-md-16" href="">找工作</a></li>
                </ul>

该问题已被官方收录

为什么会出现边框？

2

1

属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/task8.2.css">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="wrap">
    <div class="container">
        <div class="header-main">
            <span>客服热线：010-594-78634</span>
            <div class="vx">
                <img src="../img/task8...png"  alt="">
                <img src="../img/task.8..png" alt="">
                <img src="../img/task.81.png"  alt="">
            </div>
        </div>
    </div>
    <div class="navigation">
        <div class="container">
            <div class="option">
                <div class="page">首页</div>
                <div class="profession">
                    <a href="../html/task8.3.html">职业</a></div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.wrap{
    background: #fafafa;
}
.header-main{
    width: 100%;
    color: #29b078;
    display: flex;
    justify-content:space-between ;
    margin-top:1rem;
    margin-bottom: 0.5rem;
}
.navigation{
    width: 100%;
    background: #29b078;
    height:9.4rem;
}
.xte{
    width: 100%;
}
.option{
    font-size: 2.5rem;
    display: flex;
    float: right;
    color: #ffffff;
    margin-top: 3.5rem;
}
.page{
    margin-right: 1.5rem;
}
.page:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}

该问题已被官方收录

用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>

该问题已被官方收录

row的宽度没有沾满整个container

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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <style pyte="txrt/css">
    html{
    font-size: 312.5%;
}
body{
    font-size: initial;
}
ul{
    margin: 0;
}

/* header眉页 */
.padding-right{
    padding-right: 0;
}
.right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0;
}
.service{
    line-height: .5rem;
    font-size: .14rem;
    color: #29B078;
}
.weixin{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 0;
}
.qq{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    margin-right: .19rem;
    background: url(picture/task-css8.png) no-repeat 0 -.58rem;
}
.weibo{
    display: inline-block;
    width: .3rem;
    height: .3rem;
    background: url(picture/task-css8.png) no-repeat 0 -1.3rem;
}

/*下拉 导航栏 */
.bg-green{
    background: #29B078;
}
.navbar{
    padding: 0;
}
.navbar-brand{
    margin-right: 0;
    font-size: 0;
}
.xiuzhenyuan{
    width: 3.5rem;
}
.navbar-toggler{
    padding: 0;
    margin: .25rem .75rem .25rem 0;
    border:none;
    outline: none !important;
    font-size: .5rem;
}
@media (max-width:767px){
    .navbar-nav{
        text-align: center;
    }
}


/* main主体 */
.picture-size{
    width: 100vw;
    height: 33vw;
}

    </style>


</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-6 padding-right">
                    <span class="service">客服热线：010-594-78634</span>
                </div>
                <div class="col-6  right">
                    <a class="weixin"></a>
                    <a class="qq"></a>
                    <a class="weibo"></a>
                </div>
            </div>
        </div> 


                        <nav class="navbar navbar-expand-md bg-green navbar-dark">
                                <div class="container">
                                        <div class="row">
                                            <div class="col-sm-12">
                                <a class="navbar-brand" href="#">
                                    <img class="xiuzhenyuan" src="picture/xiuzhenyuan.png">
                                </a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                                    <ul class="navbar-nav">
                                        <li class="nav-item">                      
                                            <a class="nav-link" href="#">首页</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">职业</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">推荐</a>
                                        </li>    
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">关于</a>
                                        </li>
                                    </ul>
                                </div> 
                            </div>
                        </div>
                    </div>
                   </div> 
                            </nav>

    </header>










    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

该问题已被官方收录

如果任务八的第三页职业列表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>

该问题已被官方收录

导航栏四个按钮“首页、推荐。。。“当屏幕小于768px时折叠显示时顺序变了

1

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<header>
        <!-- bootstrap折叠导航框架 -->
        <nav class="navbar navbar-default" style="background:#29b078; border-radius: 0;border-color: transparent;">
            <div class="container white-oval">
                <!--去除fluid以使得该行格式和首航一致， Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="color: white">技能树|修真院</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">关于</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-2.html" style="color: white">职业</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-3.html" style="color: white">推荐</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">首页</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <!-- bootstrap折叠导航框架 -->

    </header>

该问题已被官方收录

父元素没有高度，多个子元素居中的问题

1

1

居中布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

img {
    vertical-align: middle;
}

该问题已被官方收录

响应式导航栏的下拉框会把下方的轮播图遮盖掉

1

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <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 href="#" class="navbar-brand nav-title">YinyouPoet</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-menu">
      <ul class="nav navbar-nav navbar-right">
        <li class="cative"><a href="#">Home</a></li>
        <li class="cative"><a href="#">About</a></li>
        <li class="cative"><a href="#">Portfolio</a></li>
        <li class="cative"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

去第页

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