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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何通过rem，font-size，媒体查询实现完美的自适应移动端布局

1

1

自适应 css单位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html {
    font-size: 62.5%
}
@media only screen and (min-width: 481px) {
    html {
        font-size:109%!important
    }
}

@media only screen and (min-width: 561px) {
    html {
        font-size:130%!important
    }
}

该问题已被官方收录

如何让滚动条只在中间主题部分，不让滚动条出现在页眉和页脚部分？

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.header {
    position: fixed;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 14rem;
    background-color: #f8fafb;
}

 <div style="height:14rem;"></div>

<div class="row main-body">

该问题已被官方收录

数组打印出来是空的，但是里面确实有对象？

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Page({
 data:{
   currentTab: 0,
   navbarTitle: ['职业门槛', '难易程度', '成长周期', '求贤企业', '入学基础', '薪资待遇'],
 },
 changeId:function(e){//点击实现切换
this.setData({
  currentTab: e.currentTarget.dataset.id
})
},
 onLoad:function(e){
   //将上个页面传过来的数据取出来
   var finallyRank = JSON.parse(e.finallyRank);
   var that=this;//存一下全局对象
   var jobDetails=[];//声明空数组用来放数据
   wx.request({//向葡萄藤官网发出数据请求,需要先设置不校验合法域名才能成功请求
     url:'http://www.jnshu.com/a/occupation/list',
     header: {'content-type': 'application/json'},//json请求头
     success:function(response){
       if(response.data.code===0){
         //用一个遍历将上个页面选出来的三个序号对应的职业抽出来，并用数组保存相应的信息
         for (var i = 0; i < finallyRank.length;i++){
           jobDetails.push(response.data.data.occupations[finallyRank[i] - 1]);//因为finallyRank数组是从1开始的所以要减1
           jobDetails[i].salary = JSON.parse(jobDetails[i].salary);//将jobDetails里的salary从字符串变回数组，不然后面没法用
         };
         that.setData({//将数据存到data里才能拿来渲染视图
           jobDetails
         });
         //如果用this.setData在外面存将会使data里的jobDetails变成空数组
       }
     }
   });
   console.log(jobDetails);
 }
})

该问题已被官方收录

sass占位符、混合宏、继承优缺点是什么，适用哪些场景？

1

1

Sass

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

@charset "UTF-8";
/*
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
*/
html {
  font-size: 62.5%;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0;
}

/* 去掉 table cell 的边距并让其边重合*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 去掉列表前的标识，li 会继承 */
ol, ul {
  list-style: none;
}

/* 让链接在 hover 状态下显示下划线 */
a {
  text-decoration: none;
  color: #000000;
}

该问题已被官方收录

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

该问题已被官方收录

任务七雪碧图调好位置之后无法调节大小

2

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

该问题已被官方收录

实现不出响应式

1

1

布局 bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <h6 class="title link">友情链接</h6>
                 </div>
             </div>
         </div>
         <div class="container">
             <ul class="now bottom-top">
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
             </ul>
             <ul class="now bottom-top">
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
                 <li class="col-md-10% column">
                     <a class="underline-color" href="">手机软件</a>
                 </li>
             </ul>
         </div>

.bottom-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.column{
    list-style: inside;
    font-size: 7px;
    color: #999999 !important;
}
.underline-color{
    color: #999999;
}
.underline-color:hover{
    color: #999999;
    text-decoration: none;
    border-bottom: 1px solid green;
}
@media (max-width:767px){
    .bottom-top{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        flex-wrap: wrap;
        width: 50%;
    }
    .column{
        text-align: center;
        margin-bottom: 5px;
    }
}

该问题已被官方收录

背景图片为何引用失败

0

1

属性背景图片

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.login{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-image: url(\img\login\login-backimg.jpg);
    background-repeat: round;
  }

该问题已被官方收录

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

该问题已被官方收录

雪碧图横着做的，为什么直接使用雪碧图位置放大会变形。

3

1

属性属性属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.killer {
    width: 15px;
    height: 18px;
    background: url(../img/css_sprites.png) no-repeat 0 0;
}

judge {
    width: 4.5vw;
    height: 4.5vw;
    background: url(../img/css_sprites.png) no-repeat -15px 0;
}

去第页

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