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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

css实现纯轮播图时轮播的图片如何与左右按钮绑定，实现点击图片轮转？

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="boxx7">

      <div class="boxx7-1"><
        <label for="lunbo1"></label>
        <label for="lunbo2"></label>
        <label for="lunbo3"></label>
      </div>



        <input type='radio' id='lunbo1' name="only">
        <input type='radio' id='lunbo2' name="only">
        <input type='radio' id='lunbo3' name="only">
        <ul class="boxx7-2">
          <li class="boxx7-3"><img src="background-pic1.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic2.jpg" style="width: 100vw;"></li>
          <li class="boxx7-3"><img src="background-pic3.jpg" style="width: 100vw;"></li>
        </ul>

     </div>

/*轮播图开始*/
.boxx7{
  overflow: hidden;
  width: 100%;
}
.boxx7-1{
  position: absolute;
  top: 12rem;
  margin: 1.5rem 0;
  font-size: 4rem;
}
.boxx7-2{
  padding: 0;
  width: 300vw;
  list-style: none;
  transition: 0.5s ease-out;
}
.boxx7-3{
  float: left;
}

     input:nth-of-type(1):checked ~ ul{
            margin-left: 0%;
        }

        #lunbo2:checked ~ ul{
            margin-left: -100%;
        }

        #lunbo3:checked ~ ul{
            margin-left: -200%;
        }

 /*当radio选中后，相应的下一个左箭头移动到图片的上层以供点击*/
        input:nth-of-type(1):checked ~ .boxx7-1 label:nth-of-type(2)
        input:nth-of-type(2):checked ~ .boxx7-1 label:nth-of-type(3)
        input:nth-of-type(3):checked ~ .boxx7-1 label:nth-of-type(1)

该问题已被官方收录

如何实现下拉式导航

1

1

导航栏下拉菜单

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    input:checked ~ ul{
        display: block;
        height: 252px;

该问题已被官方收录

checked点击事件

1

1

表单元素事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="main">
    <img class="jnshu" src="task14/img/task14-1/jnshu.png">
    <input type="checkbox" id="awesomea" />
    <label for="awesomea">点这里
    </label>
    <div class="page">
        <a class="page1">首页</a>
        <a class="page2" href=task8-2.html>职业</a>
        <a class="page3" href=task8-3.html>推荐</a>
        <a class="page4">关于</a>
    </div>
</div>

该问题已被官方收录

用hover实现折叠菜单

0

1

hover

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>Document</title>

<style>
    /* nav */
ul,li{
    list-style: none;
}
.xiuzhenyuan{
    display: inline-block;
}    
.nav {
    position: relative;
    margin: 20px 0;
}
.menu{
    display: inline-block;
    position: absolute;
    right: 0px;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.nav a {
    padding: 3px 12px;
    text-decoration: none;
    color: #999;
    line-height: 100%;
}
.nav a:hover {
    color: #000;
}

button div{
    width: 15px;
    height: 2px;
    background: gray;
    margin-bottom: 1px;

}
button{
    display: none;
}
.collapsed-menu{
        display: none;
    }


/* <!-- 媒体查询 --> */
@media screen and (max-width: 768px) {
    
    button{
        display: block;
        display: inline-block;
        position: absolute;
        right: 0;
    }

    button:hover.collapsed-menu{
        display: block;
    }

    .menu{
        display: none;
    }
    
    .nav.center ul {
        left: 50%;
        margin-left: -90px;
    }
} 

.collapsed-menu li{
    color: gray;
    padding: 5px 0;
}

.collapsed-menu{
    width: 100px;
    height: 150px;
    border: 1px solid #dedede;
    border-radius: 10px;
    position: absolute;
    right: 0;
}


</style>



</head>
<body>
    
<nav class="nav">
<div class="xiuzhenyuan">修真院|技能树</div>

<button>
    <div></div>
    <div></div>
    <div></div>
</button>

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">职业</a></li>
    <li><a href="#">推荐</a></li>
    <li><a href="#">关于</a></li>
</ul>
</nav>

<ul class="collapsed-menu">
    <li>首页</li>
    <li>职业</li>
    <li>推荐</li>
    <li>关于</li>
</ul>



</body>
</html>

该问题已被官方收录

任务十四的自动轮播图用纯css怎么实现？

0

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="all-style.css">
</head>

<body>
      <!-- 页眉 -->
      <header class="container spb">
            <span class="ma0 wsn">客服热线:010-233-233333</span>
            <div class="ma0 wsn">
                  <img src="image/wechat.png" alt="">
                  <img src="image/qq.png" alt="">
                  <img src="image/wb.png" alt="">
            </div>
      </header>
      <!-- 导航栏主体 -->
      <nav class="container nav-main spb">
            <a href="task14-1.html" class="ma0">
                  <img src="image/logo.png" alt="">
            </a>
            <div class="btn-group">
                  <a href="task14-1.html" class="tac">首页</a>
                  <a href="task14-2.html" class="tac">职业</a>
                  <a href="task14-3.html" class="tac">推荐</a>
                  <a href="task14-3.html" class="tac">关于</a>
            </div>
      </nav>
      <!--响应式下拉菜单-->
      <div class="hb">
            <img src="../task7/images/icon-2.png" alt="">
            <ul class="tac">
                  <li>
                        <a href="task14-1.html">首页</a>
                  </li>
                  <li>
                        <a href="task14-2.html">职业</a>
                  </li>
                  <li>
                        <a href="task14-3.html">推荐</a>
                  </li>
                  <li>
                        <a href="task14-1.html">关于</a>
                  </li>
            </ul>
      </div>

      <section class="slider-contaner">
            <ul class="slider">
                  <li class="slider-item slider-item1"></li>
                  <li class="slider-item slider-item2"></li>
                  <li class="slider-item slider-item3"></li>
                  <li class="slider-item slider-item4"></li>
                  <li class="slider-item slider-item5"></li>
            </ul>
            <div class="focus-container">
                  <ul class="floatfix">
                        <li>
                              <div class="focus-item focus-item1"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item2"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item3"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item4"></div>
                        </li>
                        <li>
                              <div class="focus-item focus-item5"></div>
                        </li>
                  </ul>
            </div>
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
      </section>
      <!--内容主题-->
      <main class="container">
            <!--第一模块-->
            <div class="md1">
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-1.png" alt="">
                        </div>
                        <h4>高效</h4>
                        <p>将五到七年时间，缩短到一年到三年。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-2.png" alt="">
                        </div>
                        <h4>规范</h4>
                        <p>标准的实战教程，不会走弯路。</p>
                  </div>
                  <div class="cpt1">
                        <div class="juc">
                              <img src="image/icon-3.png" alt="">
                        </div>
                        <h4>人脉</h4>
                        <p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
                  </div>
                  <div class="cpt1-2">
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>累积在线人数</p>
                        <br>
                        <p>
                              <img src="image/user.png" alt="">  12400</p>
                        <p>学员已找到满意工作</p>
                  </div>
            </div>
            <!--第二模块-->
            <h4 class="tac">如何学习</h4>
            <div class="md2">
                  <div class="cpt2">
                        <div>1</div>
                        <p>匹配你现在的个人情况，寻找适合的岗位</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>2</div>
                        <p>了解职业前景薪金待遇，竞争压力等</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>3</div>
                        <p>掌握行业内顶级技能</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>4</div>
                        <p>查看职业目标任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>5</div>
                        <p>参考学习资源，掌握技能点，逐个完成任务</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>6</div>
                        <p>加入班级，和小伙伴们互帮互助，一起学习</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>7</div>
                        <p>选择导师，一路引导，加速自己成长</p>
                        <img src="image/arrow.png" alt="">
                  </div>
                  <div class="cpt2">
                        <div>8</div>
                        <p>完成职业技能，升级业界大牛</p>
                        <img src="image/arrow.png" alt="">
                  </div>
            </div>
            <!--第三模块-->
            <h4 class="tac">优秀学员展示</h4>
            <div class="md3">
                  <div class="brs tac">
                        <img src="image/Avatar-1.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-2.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-3.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
                  <div class="brs tac">
                        <img src="image/Avatar-4.png" alt="">
                        <h4 class="tac">技术总监：罗大佑</h4>
                        <p class="tal">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设</p>
                  </div>
            </div>
            <!--第四模块-->
            <h4 class="tac">战略合作企业</h4>
            <div class="md4">
                  <img src="image/alibaba.png" alt="">
                  <img src="image/js.png" alt="">
                  <img src="image/hx.png" alt="">
                  <img src="image/rl.png" alt="">
                  <img src="image/qiniu.png" alt="">
            </div>
      </main>
      <!--第五模块-->
      <div class="md5">
            <h4 class="tac">友情链接</h4>
            <div class="cpt5">
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  教师招聘</span>
                  <span>•  教师招聘</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  手机软件</span>
                  <span>•  找工作</span>
                  <span>•  找工作</span>
            </div>
      </div>
      <!--页脚-->
      <footer>
            <div>
                  <p>技能树一改变你我</p>
                  <p class="about-we wsn">
                        <a href="task14-1.html">关于我们</a>  |  
                        <a href="#">联系我们</a>  |  
                        <a href="task14-2.html">合作企业</a>
                  </p>
            </div>
            <div class="link wsn">
                  <p>旗下网站</p>
                  <p>
                        <a href="#">草船云孵化器</a>      
                        <a href="#">最强IT特训营</a>
                  </p>
                  <p>
                        <a href="#">葡萄藤轻游戏</a>      
                        <a href="#">桌游精灵</a>
                  </p>
            </div>
            <div class="wx-qr tar">
                  <p>微信公众平台</p>
                  <img src="image/qr.png" alt="" class="qr-code">
            </div>
      </footer>
      <aside class="container tac">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</aside>
</body>

</html>

该问题已被官方收录

怎么用bs框架实现响应式的导航栏

1

1

响应式 bottstrap 导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<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>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" 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>
		</button>
		<a class="navbar-brand" href="#">菜鸟教程</a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一个分离的链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

</body>
</html>

该问题已被官方收录

我在做CSS任务十四的时候发现如果在SASS的SCSS编译的时候路径出现了问题

0

1

sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 顶部左边电话样式 */
.call {
    width: 150px;
    margin: auto;
    margin-left: 0;
    font-size: 7px;
    color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
    line-height: 2rem;
}
/* 顶部栅格布局右边部分 */
.box-right {
    text-align: right;
}
/* 头部栅格布局右边雪碧图1设置 */
.WX {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图2设置 */
.QQ { 
    width: 25px;
    height: 24px;
    border: 0;
    margin-left: 9.5px;
    margin-right: 9.5px;
    background: url(../img/css_sprites.png) no-repeat 15.385% 15.625%;
    zoom: .7;
    outline: none !important;
}
/* 头部栅格布局右边雪碧图3设置 */
.WB {
    width: 25px;
    height: 24px;
    border: 0;
    background: url(../img/css_sprites.png) no-repeat 84.615% 15.625%;
    zoom: .7;
    outline: none !important;
}
@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

@-ms-viewport {
  width: device-width;
}

body {
  margin: 0;
  font-size: 1.6rem;
  background-color: #fafafa;
  margin: 0;
  text-align: left;
}

p {
  padding: 0;
  margin: 0;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
}

button {
  padding: 0;
  border: none;
  outline-style: none;
  outline: none;
  background: transparent;
}

a {
  text-decoration: none;
}

input {
  display: none;
}

table, th, td {
  border: 1px solid #999999;
}

table {
  border-collapse: collapse;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 顶部左边电话样式 */
.call {
  width: 150px;
  margin: auto;
  margin-left: 0;
  font-size: 7px;
  color: green;
}

/* 顶部盒子遍栅格布局样式 */
.box-left {
  line-height: 2rem;
}

/* 顶部栅格布局右边部分 */
.box-right {
  text-align: right;
}

/* 头部栅格布局右边雪碧图1设置 */
.WX {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprites.png) no-repeat 15.385% 84.375%;
  zoom: .7;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图2设置 */
.QQ {
  width: 25px;
  height: 24px;
  border: 0;
  margin-left: 9.5px;
  margin-right: 9.5px;
  background: url(../img/css_sprites.png) no-repeat 15.385% 15.625%;
  zoom: .7;
  outline: none !important;
}

/* 头部栅格布局右边雪碧图3设置 */
.WB {
  width: 25px;
  height: 24px;
  border: 0;
  background: url(../img/css_sprites.png) no-repeat 84.615% 15.625%;
  zoom: .7;
  outline: none !important;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-3 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-5 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-8 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-9 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-10 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-11 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-1 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-3 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-5 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-7 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-8 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-9 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-10 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-11 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.col-sm-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.bg-green {
  background-color: #1DB176;
}

.tdd {
  background-color: RGBA(29, 177, 118, 1);
}

.olm {
  padding-right: 0px;
}

.xiuzhenyuan {
  display: inline-block;
  width: 605px;
  height: 114px;
  background: url(./img/css_sprit00000es.png) no-repeat 12.048% 1.98%;
  zoom: .3;
}

.nbox {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.nav-link {
  height: 65px;
  padding: 20px 25px 20px 0px !important;
  color: white !important;
  margin-left: 25px;
  border-bottom-width: 5px;
  text-align: center;
}

.nav-link:hover {
  border-bottom: 3px solid white;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50% !important;
}

.navv {
  padding-bottom: 0px;
  padding-left: 0px;
}

.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
/*# sourceMappingURL=task14.css.map */

该问题已被官方收录

使用sass后用占位符%后设置媒体查询报错

0

1

占位符响应式 Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

%icon {  transition: background-color ease .2s;  margin: 0 .5em;}

@media screen { 

     .info-icon {    @extend %icon;  }

}

该问题已被官方收录

如何使用CSS实现下拉响应式导航栏并且有滑动效果

1

1

导航栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<nav>
    <div class="nav clearfix">
      <div class="nav-header">
        <div class="nav-logo">
          <img src="./resource/jnshu-logo.png">
        </div>
      </div>
      <div class="list-wrapper">
        <input type="checkbox" class="input-btn" id="nav-button" checked>
        <label class="nav-btn" for="nav-button">
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
          <div class="nav-bar"></div>
        </label>
        <ul>
          <li class="home">
            <a href="">首页</a>
          </li>
          <li class="recommand">
            <a href="">推荐</a>
          </li>
          <li class="regarding">
            <a href="">关于</a>
          </li>
          <li class="help">
            <a href="">帮助</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

该问题已被官方收录

在设置媒体查询的时候,没有层级的观念，随意摆放，想要达成的效果不一

0

1

响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@media (max-width: 768px) {
	.nav-1 {        
		width: 100%;
	}
	.contact  {
		width: 100%;
	}
	.picture span {
		margin-left: 8rem;
		font-size: 2rem;
	}
	.picture a {
		font-size: 5rem;
	}
	.picture p {
		font-size: 2.2rem;
		padding-left: 1rem;
	}
	.contact a {
		display: none;
	}
	.nav ul {
		margin-right: 0;
		margin-bottom: 0;
		width: max-content;
	}
	
	.piece {
		width: 100%;
		text-align: center;
	}
	.weap {
		width: 100%;
	}
	.top-method {
		position: relative;
	}
	.method img {
		margin-right: 1rem;
		position: absolute;
		right: 1rem;
		top: 1.2rem;
	}
	.method span {
		width: 100%;
	}
	.stud {
		height: 40rem;
		text-align: center;
	}
	.stud .blue {
		width: 27rem;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	.company img {
		height: initial;
		text-align: -webkit-center;
	}
	.company .logo {
		height: initial;
	}
	.fa {
		width: 100%;
	}
	.fa li {
		font-size: 1rem;
	}
	.fa span {
		width: 1.4rem;
	}
	.company .logo {
		width: 100%;
	}
	.fa li {
		width: 4rem;
	}
	.left-ending p {
		margin-bottom: 0;
	}
	.ending-1 {
		width: 100%;
		height: 30rem;
	}
	.centre-ending p {
		margin-bottom: 0;
	}
	.right-ending {
		text-align: -webkit-auto;
		margin-top: 1rem;
	}
	.look {
	width: 100%;
	height: 30rem;
	text-align: center;
}
.typeface {
    margin-top: 10rem;
}
.typeface ul {
	margin-top: 0;
}
.contact img {
	display: none;
}
.good{
	position: absolute;
	top: 30%;
}
}

去第页

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