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

怎样不使用Bootstrap来做一个响应式折叠导航栏，这东西怎么修改里面的属性啊

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

任务十流程图中制作黄线圆角的时候中间出现空白。

0

1

hover 属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.process1,.process{
    display: inline-block;
    color: #cccccc;
    padding-top:38px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 0;
    margin-left: -2px;
}

.process:hover .circle,.process:hover .line,.process:hover .line3{
    background-color:#ff7f02 ;
    z-index: 1;
}
.line{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line3{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1;
}
.process:hover  span{color:#ff7f02 ;}
.circle1,.circle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #cccccc;
    color: white;
    font-size: 16px;
}
.line1,.line2,.line3,.line{
    display: inline-block;
    width: 60px;
    height: 5px;
    background-color: #cccccc;
    font-size: 18px;
}
.line1{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line2{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    z-index: 1;
}
.line1,.line2,.circle1{
    background-color:#ff7f02 ;
}

css任务7的下拉框怎么做

1

表单元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<select></select>

table布局出了问题

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <!-- 第二行 -->
                        <tr class="p-two">
                            <td colspan="2" class="p-two-one">门槛 <img src="../img/xxx.png" /></td>
                            <td colspan="2" class="p-two-one">难易程度 <img src="../img/xxx.png" /> <img src="../img/xxx.png" /></td>
                        </tr>
                        <!-- 第三行 -->
                        <tr class="p-three">
                            <td colspan="2" class="p-two-one">成长周期 <span style="color: red;">1-3</span><span style="color: black;">年</span></td>
                            <td colspan="2" class="p-two-one">稀缺程度 <span style="color: red;">345</span><span style="color: black;">家公司需要</span></td>
                        </tr>
                        <!-- 第四行 -->
                        <tr class="p-four">
                            <td rowspan="3" class="p-four-one">薪资待遇</td>
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第五行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第六行 -->
                        <tr class="p-four">
                            <td colspan="3" class="p-two-two">0-1年 <span  style="float:right;">5k-10k/月</span></td>
                        </tr>
                        <!-- 第七行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-seven-one">有<span style="color: red;">286</span>人在学</td>
                        </tr>
                        <!-- 第八行 -->
                        <tr class="p-three">
                            <td colspan="4" class="p-two-one">提示：在你学习之前你应该已经掌握XXXXX、XXXXX、XX等语言基础</td>
                        </tr>
                    </table>

GitHub客户端是封装了git功能，完全不需要下载gitl

0

1

git

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

用了bootstrap栅格为什么在1080px以上就会向左边靠拢？

0

1

媒体查询响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="row">
                <div class="excellent">优秀学员展示</div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 boxs-three">
                    <div class="picture-box">
                        <div class="pictures-one"></div>
                        <p class="picture-text">技术顾问：罗大佑</p>
                        <p class="picture-texts">
                            百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理和建设。
                        </p>
                    </div>

自适应布局中，字体大小应该怎么处理？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  @media only screen and (max-width: 600px){
    .text-line {
      height: auto;
    }
  }

怎样让轮播图下面的小圆点，当点击的时候切换到另一张图片时背景颜色能变成白色？

0

1

表单元素轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：
/*轮播图*/
.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-open:checked + .carousel-item {
  position: relative;
  opacity: 1;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}
.carousel-control.prev {
  left: 2%;
}
.carousel-control.next {
  right: 2%;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5{display: block}
.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;}
.instructions{
  position: absolute;
  margin:0 auto;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 90px;
  li{display: inline-block}
}
.bullet{display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  cursor: pointer;
  background-color: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 10px;}

html：   <div class="carousel">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="../image/2.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/3.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/4.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/5.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-5" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/6.jpg">
        </div>
        <label for="carousel-5" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-4" class="carousel-control next control-3">›</label>
        <label for="carousel-3" class="carousel-control prev control-4">‹</label>
        <label for="carousel-5" class="carousel-control next control-4">›</label>
        <label for="carousel-4" class="carousel-control prev control-5">‹</label>
        <label for="carousel-1" class="carousel-control next control-5">›</label>
        <ol class="instructions">
            <li>
                <label for="carousel-1" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-2" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-3" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-4" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-5" class="bullet"></label>
            </li>
        </ol>
    </div>

flash插入缓冲动画

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flash</title>
</head>
<style>
    embed{
        background-image: url("../image/onload.gif");
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>
<body>
<div id="showPcFlash" class="dn" style="width: 100%; height: 400px; display: block; " width="100%" height="400">
    <embed id="gameFlash" class="flash" src="game1-zhangxaioqian.swf" style="LEFT: 0px; POSITION: absolute; TOP:0px"  quality="high" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="400">
</div>
</body>
</html>

class命名方式有哪些通俗易懂的。

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}