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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

用ul 去实现均匀布局盒子

0

1

表单元素属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul{
    float: left;
    text-decoration: none;
    list-style-type: none;
    /*margin: 0;*/
    padding-left: 10px;
    /*border: 0;*/




}
.card> li{
    float: left;
    width: 20%;
    height: 20%;
    text-align: center;
    border: 4px solid white;
    margin: 5% 5% 8% 7%;

该问题已被官方收录

在使底部footer背景透明的时候如果使用opacity

1

1

透明度

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.65rem;
    opacity: 0.8;
    background: rgba(41, 189, 224, 0.8);
}
footer button {
    position: relative;
    width: 40vw;
    height: 0.43rem;
    font-size: 0.2rem;
    border-radius: 0.07rem;
    color: white;
    opacity: initial;
}

该问题已被官方收录

给背景图片大小不管用

0

1

css概念元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body{
				background: url("IMG/wolf.png") no-repeat;
				width:100%;
				height:100%;
			}

该问题已被官方收录

如何如何将我的头部文件固定并保证3个文字定位

3

1

绝对定位

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码


.text1 {
	line-height: 53px;
	display: inline;
	float: left;
	margin-left: 1rem;
}//css文本
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgb(90,192,206);
	width:100%;
	height: 60px;
}//头部固定
<div class="nav">
			<a href="#" class="text1">注册</a>
			<span class="login">登录</span>
			<a href="#" class="text2">关闭</a>
		</div>//HTML部分

该问题已被官方收录

汉堡菜单划出来后，右边的隐藏内容能用手划出来，怎么解决

0

1

侧边栏

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<input type="checkbox" id="sidebar">
<!--汉堡侧栏开始-->
<div class="sidebar-menu">
    <ul>
        <li>
            <span>
                <img src="../images/laba.png" alt="">
                公告
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/chilun.png" alt="">
                设置
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/wenhao.png" alt="">
                帮助
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
        <li>
            <span>
                <img src="../images/xiaoguanji.png" alt="">
                关于
            </span>
            <img src="../images/lanjiantou.png" alt="">
        </li>
    </ul>
</div>
<!--汉堡侧栏结束-->

<!--头部开始-->
<header>
    <label for="sidebar">
        <img src="../images/celan.png" alt="">
        <img src="../images/guanbi.png" alt="">
    </label>
</header>
<!--头部结束-->
<!--主体开始-->
<a href="task13-2.html" class="last-game">
    <span>上次游戏：捉鬼猜词版</span>
    <img src="../images/baijiantou.png" alt="">
</a>
<div class="nav-game">
    <h1>捉鬼游戏</h1>
    <div class="row">
        <a href="task13-2.html" class="nav-item">简化版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row row-middle">
        <a href="task13-2.html" class="nav-item">猜词版</a>
        <a href="task13-2.html" class="next"><img src="../images/huangjiantou.png" alt=""></a>

    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="row">
        <a href="task13-2.html" class="nav-item">白痴版</a>
    </div>
    <p>有1133个用户正在玩此款游戏</p>
    <div class="nav-circle">
        <a href="###" class="active"></a>
        <a href="###"></a>
        <a href="###"></a>
        <a href="###"></a>
    </div>

</div>
<!--主体结束-->

该问题已被官方收录

sass写的媒体查询，编译成css文件正确，但在浏览器打开后达到对应尺寸不起作用

0

1

sass 媒体查询

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//计算rem基准字体
$rem-base-font-size:100px;
//UI设计图的分辨率宽度
$UI-width:720px;
// 需要适配的屏幕宽度
$device-width:320px,375px,425px,768px;

// 根据不同设备的屏幕宽度，定义<html>的基准font-size
@mixin html-font-size {
    @each $current-width in $device-width {
        @media only screen and (max-width:$current-width) {
            $x:$UI-width/$current-width; // // 计算出是几倍屏
            font-size: $rem-base-font-size/$x;
        }
    }
}
@include html-font-size();

@media only screen and (max-width: 320px) {
  font-size: 44.44444px;
}

@media only screen and (max-width: 375px) {
  font-size: 52.08333px;
}

@media only screen and (max-width: 425px) {
  font-size: 59.02778px;
}

@media only screen and (max-width: 768px) {
  font-size: 106.66667px;
}

该问题已被官方收录

关于任务八的Bootstrap4的栅格系统，在任务八的最底下有IMG图公众号什么

0

1

bottstrap

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, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- 新bootstrap4核心CSS组件 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- jquery组件 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- popper.js组件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- bootstrap js核心组件 -->
    <link rel="stylesheet" type="text/css" href="./task8-1.css">
    <!-- 自己外部引用css文件 -->
</head>

<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-4 call">客服热线：010-594-78634</div>
                <div class="col-8 box">
                    <button class="wx"></button>
                    <button class="qq"></button>
                    <button class="wb"></button>
                </div>
            </div>
        </div>
        <div class="dh">
            <div class="container">
                <div class="row">
                    <div class="col-xl">
                        <div class="navbar-brand">
                            <img src="./home-logo-hs.png">
                        </div>
                        <nav class="navbar navbar-default" role="navigation">
                            <!-- 导航栏 -->
                            <nav class="navbar navbar-expand-md bg-dark navbar-dark">
                                <!-- Brand -->
                                <a class="navbar-brand" href="#"></a>
                                <!-- Toggler/collapsibe Button -->
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <!-- Navbar links -->
                                <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>
                            </nav>
                        </nav>
                    </div>
                </div>
            </div>
            <div id="demo" class="carousel slide" data-ride="carousel">
                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./0d9944f1-6aad-4894-b42e-72dadcfef058.png">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./3a15425b-c947-4222-8558-0bf01cc36513.png">
                        <div class="carousel-caption">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./87ae208e-8374-45a0-beb4-7ece0ec4f8be.jpg">
                    </div>
                </div>
                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
    </header>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="fa">
                        <!-- fire arrow 火箭缩写 -->
                    </div>
                    <!-- 雪碧图 -->
                    <h4>高效</h4>
                    <p class="introduce">将五到七年的成长时间，缩短 到一年到三年。</p>

                </div>
                <div class="col-md-3">
                    <div>
                        <div class="book"></div>
                        <!-- 雪碧图 -->
                        <h4>规范</h4>
                        <p class="introduce uk">标准的实战教程，不会走弯路</p>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="nce">
                        <!-- n. connection人脉的缩写 -->
                    </div>
                    <!-- 雪碧图 -->
                    <h4>人脉</h4>
                    <p class="introduce">同班好友，同院学长，技术大师，
                        入学就混入职脉圈</p>
                </div>
                <div class="col-md-3 ppp">
                    <div class="person"></div>
                    <!-- 雪碧图 -->
                    <span>12400</span>
                    <p class="introduce">累计在线学习人数</p>
                    <div class="person"></div>
                    <!-- 雪碧图 -->
                    <span>12400</span>
                    <p class="introduce">学员已经找到满意工作</p>
                </div>
            </div>
        </div>
        <!-- 上边部分 -->
        <div class="container ">
            <h3 class="text-center">如何学习</h3>
            <div class="row">
                <div class="col-md-3 col-sm-1">
                    <span class="circle ">1</span>
                    <p class="bid">匹配你现在的个人情况寻找适合自己的岗位</p>
                    <!-- brief introduction 简单介绍的缩写 -->
                    <div class="ra"></div>
                    <!-- 雪碧图right arrow右箭头 -->

                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">2</span>
                    <p class="bid">了解职业前景薪金待遇竞争压力等 </p>

                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">3</span>
                    <p class="bid">掌握行业内顶级技能</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">4</span>
                    <p class="bid">查看职业目标任务</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-1">
                    <span class="circle">5</span>
                    <p class="bid">参考学习资源，掌握
                        技能点，逐个完成任务</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">6</span>
                    <p class="bid">加入班级，和小伙伴们
                        互帮互助，一块学习</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">7</span>
                    <p class="bid">选择导师，一路引导，
                        加速自己成长</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-md-3 col-sm-1">
                    <span class="circle">8</span>
                    <p class="bid">完成职业技能，升
                        级业界大牛</p>
                    <div class="ra"></div>
                    <!-- 雪碧图 -->
                </div>
            </div>
        </div>
        <!-- 中间第一部分 -->
        <div class="container zx">
            <h3 class="text-center student">优秀学员展示</h3>
            <div class="row">
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp"></div>
                    <!-- 雪碧图head portrait  -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp1"></div>
                    <!-- 雪碧图 -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp2"></div>
                    <!-- 雪碧图 -->
                    <h4>技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
                <div class="col-sm-2  col-sm-2 ldy1">
                    <div class="hp3"></div>
                    <!-- 雪碧图 -->
                    <h4 class="si">技术顾问：罗大佑</h4>
                    <p class="introduce">百度技术总监：互联网基础
                        服务领域，从事虚拟主机、
                        云服务器、域名。曾任新网
                        高级技术经理，负责技术研
                        发、团队管理与建设。</p>
                </div>
            </div>
            <div class="cb">
                <!-- circle1外部盒子 -->
                <span class="circle1"></span>
                <span class="circle1"></span>
                <span class="circle1"> </span>
                <span class="circle1"></span>
            </div>
            <!-- 底部圆形样式 -->
        </div>
        <div class="container cp">
            <!-- cooperation合作 -->
            <h3 class="text-center">战略合作企业</h3>
            <div class="row">
                <div class="col-sm-20% box4">
                    <div class="albb"></div>
                    <!-- 雪碧图 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="kcg"></div>
                    <!-- 雪碧图 Kingsoft Cloud Group金山云 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="ci"></div>
                    <!-- communication通讯 -->
                </div>
                <div class="col-sm-20% box4">
                    <div class="rlci"></div>
                </div>
                <div class="col-sm-20% box4">
                    <div class="storage"></div>
                </div>
            </div>
        </div>
        <div class="container buttonbox">
            <h3 class="text-center">友情链接</h3>
            <div class="row box5">
                <ul class="col-md-10% zoom list col-20%">
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>教师招聘</li>
                    <li>找工作</li>
                    <li>手机软件</li>
                    <li>教师招聘</li>
                    <li>手机软件</li>
                    <li>手机软件</li>
                    <li>找工作</li>
                </ul>
            </div>
            <!-- 中间下面部分 -->
    </main>
    <!-- 中心部分 -->
    <footer>
        <div class="container pll">
            <div class="row box7">
                <div class="col-sm-4 jns">
                    <span class="alter">技能树 — 改变你我</span>
                </div>
                <div class="col-sm-4">
                    <span class="alter">旗下网站</span>
                </div>
                <div class="col-sm-3">
                    <span class="alter">微信公众平台</span>
                    <div>
                        <img class="nb" src="./qrcode_for_gh_32213eeb65ba_1280.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row content-box6">
                <div class="col-sm-5 offset-4 footer-font">
                    <span class="alter">草船云孵化器</span>
                    <span class="alter">最强IT特训营</span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-4 ">
                    <span class="alter">关于我们 | 联系我们 | 合作企业</span>
                </div>
                <div class="col-sm-4 irt">
                    <span class="alter ">葡萄藤轻游戏</span>
                    <span class="alter">桌游精灵</span>
                </div>
            </div>
        </div>
        <div class="message">
            <p class="oneself">Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号</p>
    </footer>
    <!-- 底部 -->
</body>

</html>

该问题已被官方收录

使用LESS编码时，less应该如何来写，是开头直接编译好，还是像CSS一样。

0

1

Less

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

CSS：
@color:red;
@colora:#b3b3b3;
@colorb:#e5e5e5;
@background:#fff;
@backgrounda:#5fc0cd;
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#5fc0cd;
}
.button1{
  outline: none;
  cursor: pointer;
  border: 1px solid #55a8b3;
  color: #fff;
  background: #55a8b3;
  font-size: 28px;
  border-radius: 10%;
}
.button2{
  outline: none;
  cursor: pointer;
  border: 1px solid #fff;
  color: #55a8b3;
  background: #fff;
  font-size: 28px;
  margin-left: -.5rem;
  border-radius: 10%;
}
.footer{
  height: 23rem;
  background:#fff;
}

html{
  font-size: 62.5%;
}
body{
  margin: 0;
  padding: 0;
}
select{
  margin: 0;
  padding: 0;
}
.nav1{
  .top
}
.nav2{
  .button1;
}
.nav3{
  .button2;
  margin:1rem -.5rem;
}
.nav4{
  padding-right: 2rem;
}
main header{
  height: 4rem;
  border-bottom: 1px solid gainsboro;
}
select{
  width: 32.5%;
  border: 0;
  text-align-last: center;  //可以使下拉菜单，文本居中。
  height: 3.5rem;
  outline: none;
  border-right: 1px solid @colora;
  color:@colorb;
  font-size: 2.8rem;
}
.main1{
  .footer;
  padding-left: 1rem;
  margin: 1.5rem 0 .5rem 0;
  border-bottom: 1px solid gainsboro;
  font-size: 2.8vw;
  .main2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }
  .main3{
    display: flex;
    align-items: center;
    padding-left: 3rem;
  }
  .main4{
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
    padding-right: 2rem;
    img{
      padding-top: 1rem;
      width: 2.8vw;
    }
  }
  .main5{
    .main3;
    color:@color;
  }
}
@media screen and (max-width: 900px){
  .main1{
    height: 20rem;
  }
}
@media screen and (max-width: 800px) {
  .main1{
    height: 16rem;
  }
}
footer{
  display: flex;
  justify-content: space-around;
  height: 6.5rem;
  background: #f8fafb;
  .footer1{
    margin-top: 1rem;
    text-align: center;
    color: #5fc0cd;
  }
  .footer2{
    margin-top: 1rem;
    text-align: center;
    color: gainsboro;
  }
}

该问题已被官方收录

设置a标签宽高

2

1

行内元素

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="lastgame">
            <span>上次游戏：捉鬼猜词版</span>
            <div class="greater"></div>
        </div>

该问题已被官方收录

3个头部菜单栏宽度平均分布在一行

2

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin:0;
}

ul li {
    flex:1 1 ;
    padding: .2rem 0;
    color: #999;
    white-space: nowrap;

}

.menuleft {
    display: inline-block;
    margin: 0 .4rem;
}

.menumid{
    padding-left: .5rem;
}

去第页

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