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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

首页如何学习栏的绿色箭头如何让其自适应宽度缩进

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

            <div class="rstudy row">
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">1</div>
                        <div class="study-text">匹配你现在的个人情况寻找适合自己的岗位</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">2</div>
                        <div class="study-text">了解职业前景薪金待遇、竞争压力等</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">3</div>
                        <div class="study-text">掌握行业内顶级技能</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">4</div>
                        <div class="study-text">查看职业目标任务</div>
                        <div class="study-arrow study-arrow2"></div>
                    </div>
                </div>
            </div>

.content .study .cstudy .study-num {
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.content .study .cstudy .study-text {
    height: 0.72rem;
    width: 1.5rem;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;vertical-align:middle;
}
.content .study .cstudy .study-arrow {
    background: url("img/icon.png") no-repeat -2rem -3rem;
    height: 0.3rem;
    width: 0.3rem;
    display: inline-block;
    position: relative;
    top: -0.5rem;
    left: 2.3rem;
}

该问题已被官方收录

请问可以用少于9个div标签实现css1的效果？

2

1

九宫格

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</body>

该问题已被官方收录

栅格系统如何一栏显示十个

3

1

bottstrap 布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <div class="col-xs-3 col-md-1 box">
                <div class=" link-content">
                    <a class="link">
                        <span class="circle2"></span> 手机软件
                    </a>
                </div>
            </div>

该问题已被官方收录

在做任务八职位页面的时候的时候出现了英文单词自动换行的情况，应该怎么办？

1

1

布局

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="introduce">
                            <h4>前端开发工程师</h4>
                            <br>
                            <span>主要职责是利用(X)HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发</span>
                        </div>




.introduce {
    padding-top: .20rem;
    padding-left: 1.5rem;
   
}

该问题已被官方收录

照片多余的怎么办？

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;
}

该问题已被官方收录

子元素为行内元素不在父元素内

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" type="text/css" href="task6.css">
</head>

<body>
    <header>
        <button class="btn">找雇主</button>
        <button class="btn">招护工</button>
    </header>
</body>

</html>

html{
    font-size: 625%; 
}
body{
    margin: 0;
    
}
header{
    position: fixed;
    top: 0;
    text-align: center;
    height: .64rem;
    width: 100%;
    background-color: #5fc0cd;   
}
.btn{
    font-size: 16px;
    color: #ffffff;
    background-color: #55a8b3;
    border-radius: 7px;  
    padding: .1rem .2rem .1rem .13rem;  
    border: none;
    outline:none
}

该问题已被官方收录

任务七右上角的音频标签，无法随着样式进行修改

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>Document</title>
    <link rel="stylesheet" type="text/css" href="./task7-2.css">
</head>

<body>
    <header>
        <!-- 头部 -->
        <button>
            <!-- 头部左边按钮外部盒子 -->
            <div></div>
            <!-- 左边按钮 -->
        </button>
        <span>投票</span>
        <!-- 中间文字 -->
        <button>
            <!-- 右边关闭按钮外部盒子 -->
            <div></div>
            <!-- 右边关闭按钮 -->
        </button>
    </header>
    <main>
        <!-- 中间 -->
        <div>
            <!-- 上面的播放选项盒子 -->
            <span>发言讨论结束，大家请投票</span>
            <div>
                <!-- 外部圆 -->
                <div>
                    <!-- 内部三角形 -->
                    <audio controls>
                        <!-- 音频播放器 -->
                        <source src="./css-7/task7/财富自由.mp3"></audio>
                </div>
            </div>
        </div>
        <span>点击得票数最多人的头像</span>
        <!-- 页面说明文字 -->
        <div>
            <!-- 下方多个选项外盒子 -->
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>1号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>2号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>警察</div>
                <!-- 游戏身份 -->
                <div>3号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>法官</div>
                <!-- 游戏身份 -->
                <div>4号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>狙击手</div>
                <!-- 游戏身份 -->
                <div>5号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>医生</div>
                <!-- 游戏身份 -->
                <div>6号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>杀手</div>
                <!-- 游戏身份 -->
                <div>7号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>8号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>9号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>10号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>11号</div>
                <!-- 游戏号码 -->
            </button>
            <button>
                <!-- 第一个选项盒子 -->
                <div>水民</div>
                <!-- 游戏身份 -->
                <div>12号</div>
                <!-- 游戏号码 -->
            </button>
        </div>
    </main>
    <footer>
        <!-- 底部盒子 -->
        <button>
            <!-- 底部按钮 -->
            <span>投死</span>
            <!-- 底部中间字体 -->
        </button>
    </footer>
</body>

</html>
html{
    font-size: 62.5%;
}
body{
    margin: 0;
    font-size: 1.6rem;
}
header{
    height: 4.8rem;
    background-color: #29BDE0;
}

该问题已被官方收录

点击提交按钮后，无法跳转到后台页面

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// jQuery方法
$(document).ready(function(){
    $(".btn").click(function(){//点击事件
        var user = $("#user").val();//获取账号框的值
        var password = $("#password").val();//获取密码框的值
        if(user === ""){//如果账号框值为0
            $("#warning").text("请输入账号");
            return;
        }
        if(password === ""){//如果密码框值为0
            $("#warning").text("请输入密码");
        }
        if(user !== "" && password !== ""){//账号框，密码框都有值时
            $.ajax({
                type: "post",//定义请求方式
                dataType: "json",//数据类型
                url: "/carrots-admin-ajax/a/login",//文件在服务器上的位置
                data: {//数据
                    name: user,//账号
                    pwd: password//密码
                },
                success: function(response){
                    if(response.message === "success"){
                        location.href = "http://dev.admin.carrots.ptteng.com/"
                    }
                    else {
                        $("#warning").text(response.message);
                    }
                    console.log(response);
                }
            })
        }
    });
});

该问题已被官方收录

响应式栅格布局如何居中

1

1

居中 bottstrap 响应式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

       <div class="how"><b>战略合作企业</b></div>
        <div class=" col-md-2 col-md-offset-1 col-xs-4  ">
            <div class="cooperation cooperation1"></div>
        </div>
        <div class="col-md-2 col-xs-4 ">
            <div class=" cooperation cooperation2"></div>
        </div>
        <div class="col-md-2  col-xs-4 ">
            <div class=" cooperation cooperation3"></div>
        </div>
        <div class="col-md-2 col-xs-4">
            <div class=" cooperation cooperation4"></div>
        </div>
        <div class="col-md-2  col-xs-4">
            <div class=" cooperation cooperation5"></div>
        </div>

该问题已被官方收录

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

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