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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

框架带的复选框单选框都不符合要求，怎么在原有基础上修改。

2

1

表单元素 checkbox input

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="col-md-8 col-6 ">
                    <form>
                        <label class="radio-inline"><input type="radio" class="yuan">对口箱</label>
                        <label class="radio-inline"><input type="radio"  >飞机盒</label>
                        <label class="radio-inline"><input type="radio"  >天地盖</label>
                    </form>
                </div>
.plane form label {
    margin: 0;
    padding: .7rem;
}
.yuan{
    visibility: hidden;
}

该问题已被官方收录

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

该问题已被官方收录

栅格式布局5张图片使用col-lg-怎么铺满整个屏幕且不溢出

1

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row business">
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm1.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm2.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm3.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm4.png"></span>
        </div>
        <div class="col-lg-2  col-sm-12 col-md-6 img">
            <span class="imgs"><img src="../img/task8-1-firm5.png"></span>
        </div>
    </div>
</div>

该问题已被官方收录

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

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

该问题已被官方收录

css如何让按钮刷新时保持颜色不变

1

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="top2">
            <button class="topbutton1">
                找雇主
            </button>
            <button class="topbutton2">
                找护工
            </button>
        </div>
        <div class="top3">                        
            
        </div>



header{
        position: fixed;
        top: 0;
        width: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-content: center;    
        background-color: #5fc0cd;
       
        .top1{
            
            padding: 1.5rem;
        }
        .top2{
            display: flex;
            align-content: center;
            flex-wrap: nowrap;
            padding-left: 1rem;
            max-height: 4rem1rem;
        }
        .top3{
        padding: 1.5rem;
        background-image: url(../task6/task6-1.png);
        background-repeat: no-repeat;
        background-position: 0;
        } 
        .topbutton1{
            position: relative;
            left: 0.3;
            padding-top: 0.9;
            padding-bottom: 0.9;
            width: 7.1rem;
            font-size: 1.6rem;
            font-weight: 700;
            color: #fff;
            border-right: 0px;
            border: 0.1rem solid #55a8b3;
            border-radius: 0.5rem 0 0 0.5rem;
            background-color: #55a8b3;
        }
        .topbutton2{
            position: relative;
            right: 0.3rem;
            padding-top: 0.9rem;
            padding-bottom: 0.9rem;
            width: 7.1rem;
            font-size: 1.6rem;
            font-weight: 700;
            color: #5fc0cd;
            border: 0.1rem solid #fff;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background-color: #fff;
        }

该问题已被官方收录

怎么将本地文件上传到github

3

1

git 代码管理

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

gitbub上传

该问题已被官方收录

git如何去删除自己的项目中的一个文件

2

1

git

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// var vm =new Vue({
//   el:"#op",
//   data:{
//     hello:true
//   }
// })
// for(let i=0;i<3;i++){
//     console.log(i);
// }
// console.log(i)
// let [a=111,b,c]=[,2,3]
// console.log(a,b,c)
// let[a,b,c,d]='hello';
// console.log(a,b,c,d)
// let url='admin/inderx.php';
// // console.log(url.endsWith('php'));
// let obj={
//     name:'李四',
//     age:'12',
//     gender:'male'
// }
// let t=`
//     <div>
//         <span>${obj.name}</span>
//         <span>${obj.age}</span>
//         <span>${obj.gender}</span>
//     </div>
// // `;
// // console.log(t)
// new Vue({
//     el:'#app',
//     data:{
//        mas:'jjk',
//        age:'18',
//        sbb:''
//     },
//     methods:{
//         cao(){
//             this.mas='ni'
//         },
//         ni(ki){
//             this.mas=ki
//         },
//         print(){
//             console.log('不跳');
//         },
//         sb(){
//             console.log('提交')
//         },
//         wo(){
//             if(this.sbb===''){
//                 this.sbb=true
//             }
//             else{
//                 this.sbb=''
//             }

该问题已被官方收录

引入less.js和less文件后打开报错

1

1

less

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport", content="device-width,initial-scale=1.0, manimun-scale=1.0,user-scaleble=no" />
	<title>task10</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
	<div class="head-t">
		<div class="ht-box">
			<div class="ht-left">
				客服热线：010-8888-8888
			</div>
			<div class="ht-right">
				<a class="ht-link" href="#">登录</a><a class="ht-link" href="#">注册</a>
			</div>
		</div>
	</div>
	<div class="head-b">
		<div class="hb-box">
			<button class="hb-btn" type="button">首页</button>
			<button class="hb-btn" type="button">在线定制</button>
			<button class="hb-btn" type="button">标准箱</button>
			<button class="hb-btn" type="button">品质保障</button>
		</div>
	</div>
</header>
<main>
	<div class="main-t">
		<div class="mt-box">
			<div class="bar">
				<span>1</span>
				<p>1.定制纸箱</p>
			</div>
			<div class="bar">
				<span>2</span>
				<p>2.选择数量</p>
			</div>
			<div class="bar">
				<span>3</span>
				<p>3.上传附件</p>
			</div>
			<div class="bar">
				<span>4</span>
				<p>4.确认下单</p>
			</div>
		</div>
	</div>
	<div class="main-b">
		<div class="mb-box">
			<p><span>|</span>请按照以下步骤来定制纸箱</p>
			<form name="box" method="post" action="save.php">			
				<div class="label-box">
					<label><img src="ico1.png" />选择箱型</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="one" id="box-type1">
						<label for="box-type1">对口箱</label></span>
					<span><input type="radio" name="one" id="box-type2">
						<label for="box-type2">飞机箱</label></span>
					<span><input type="radio" name="one" id="box-type3">
						<label for="box-type3">天地盖</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico2.png" />确定尺寸</label>
				</div>
				<div class="input-box">
					<span><input type="radio" name="two" id="box-size1">
						<label for="box-size1">外径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<br />
					<span><input type="radio" name="two" id="box-size2">
						<label for="box-size2">内径</label></span>
					<span>长 <input type="text" class="size"> mm</span>
					<span>宽 <input type="text" class="size"> mm</span>
					<span>高 <input type="text" class="size"> mm</span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="label-box">
					<label><img src="ico3.png" />选择材质</label>
				</div>
				<div class="input-box second-intput-box">
					<span><input type="radio" name="three" id="box-material1">
						<label for="box-material1">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material2">
						<label for="box-material2">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material3">
						<label for="box-material3">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material4">
						<label for="box-material4">三层A瓦优质</label></span>
					<span><input type="radio" name="three" id="box-material5">
						<label for="box-material5">三层A瓦优质</label></span>
					<select>
						<option type="#" >查看详情</option>
					</select>
				</div>
				<div class="submit-box">
					<input type="submit" value="下一步">
				</div>
			</form>
		</div>
	</div>
</main>
<footer>
	<div class="foot-t">
		<div class="ft-box">
			<div class="ft-l">
				51包装网——纸箱包装首选服务平台
			</div>
			<div class="ft-m">
				<a class="ft-link" href="#">关于我们</a>
				<a class="ft-link" href="#">配送流程</a>
				<a class="ft-link" href="#">联系我们</a>
				<a class="ft-link" href="#">下单指南</a>
				<a class="ft-link" href="#">媒体介绍</a>
			</div>
			<div class="ft-r">
				<img src="wx.png" />
				<p>TEL:400-000-000</p>
				<p>企业QQ:123456789</p>
				<P>微信:XXXXXXX</P>				
			</div>
	</div>
	<div class="foot-b">
		<div class="fb-box">
			  北京五一包装科技有限公司Copyright ©2015 51baozhuang.com015 All rights reserved.    京icp备99999999-1 
		</div>
	</div>
</footer>
</body>
</html>

html{
	font-size:625%;
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	min-width:320px;

}
/*中间宽度*/
.ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
	width:90%;
	max-width:1200px;
	margin:0 auto;
}
@media screen and (max-width:767px) {
    .ht-box,.hb-box,.mt-box,.mb-box,.submin-box,.ft-box,.fb-box{
        width:99%;
        margin:0 auto;
    }
}
.ht-box{
	height:0.4rem;
	display:flex;
	justify-content:space-between;	
	align-items:center;
}

/*头部*/
.head-t{
	background:#1d7ad9;	
}

.ht-left{
	color:#fff;
	font-size:0.14rem;
}
.ht-right{
	height:100%;
	font-size:0.16rem;
}
a.ht-link{
	display:inline-block;
	height:100%;
	line-height:0.4rem;
	padding:0 0.1rem;
	text-decoration:none;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
a.ht-link:link,a.ht-link:visited{
	color:#fff;
}
a.ht-link:hover{
	color:#000;
	background:#fff;
}
.head-b{
	background:#f9f9f9;
	font-size:0.16rem;
	text-align:right;
}
button.hb-btn{
	background:#fff;
	margin:0.26rem 0 0.26rem 0.6rem;
	padding:0.08rem;
	border:none;
	border-radius:5px;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;	

}
@media screen and (max-width:767px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.3rem;
    }
}
@media screen and (max-width:500px) {
    button.hb-btn{
        margin:0.26rem 0 0.26rem 0.05rem;
    }
}
button.hb-btn:hover{
	background:#1d7ad9;
	border-color:none;
	color:#fff;
}
button.hb-btn:focus{
	outline:none;
}
/*进度条*/
.mt-box{
	display:flex;
	justify-content:flex-end;
	margin-top:0.5rem;
}
.bar{
	width:15%;
	height:0.05rem;
	font-size:0.14rem;
	border-radius:1px;
	background:#ccc;
	text-align:center;
	position:relative;
}
@media screen and (max-width:767px) {
    .bar{
        width:20%;
    }
}
@media screen and (max-width:767px) {
    .bar{
        width:25%;
    }
}
.bar span{
	display:inline-block;
	width:0.24rem;
	height:0.24rem;
	border-radius:100%;
	background:#ccc;
	line-height:0.24rem;
	position:relative;
	top:-0.1rem;
	color:#fff;
}
.bar:hover,.bar:hover span{
	background:#ff7f02;
}
.bar:hover p{
	color:#ff7f02;
}
.bar p{
	font-size:0.18rem;
}
@media screen and (max-width:500px) {
    .bar p{
        font-size:0.14rem;
    }
}
/*表单*/
.mb-box{
	font-size:0.18rem;
	margin-top:1rem;
}
.mb-box>p{
	font-size:0.22rem;
}
.mb-box>p>span{	
	color:#1d7ad9;
	font-weight:bold;
	padding:0 1px;
}
form{
	border:1px solid #e7e7e7;
	position:relative;
	word-wrap-:break-word;
}
.first-label{
	border:none;
}
.label-box{
	color:#1d7ad9;
	font-weight:bold;
	background:#f4f4f4;
	padding:0.14rem 0;
}	
.input-box{
	background:#fbfcff;
	padding:0.28rem 0;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	position:relative;
	padding-right:1.4rem;

}
.input-box span{
	width:2rem;
	text-align:center;
	position:relative;
	display:inline-block;
}
.label-box img{
	position:relative;
	top:5px;
	margin:0 5px;
}
.size{
	width:0.7rem;
	margin:0.25rem 0.01rem;
}
.submit-box{
	text-align:center;
}
.submit-box input{
	color:#fff;
	width:1.8rem;
	font-size:0.24rem;
	padding:0.1rem 0.55rem;
	margin:1.4rem auto 1rem;
	border:none;
	background:#e15053;
	border-radius:5px;
}
select{
	position:absolute;
	right:0.1rem;
	top:50%;
	margin-top:-0.17rem;
	height:0.37rem;
	/*小三角*/
	appearance:none;
	-moz-appearance:none;
 	-webkit-appearance:none;
	background: url("shape.png") no-repeat right;
	padding:0px 0.4rem 0 0.2rem;
	background-position:95% 50%;
}
/*单选按钮*/
input[type=radio]{
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    border: 1px solid #1d7ad9;
    outline: none;
    cursor: pointer;
    /*设置为圆形，看起来是个单选框*/
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #1d7ad9;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    /*增加一些动画*/
    -webkit-transition : all ease-in-out 300ms;
    -moz-transition : all ease-in-out 300ms;
    transition : all ease-in-out 300ms;
}
input[type=radio]:checked:after{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


/*底部*/
.foot-t{
	color:#999;
	background:#f9f9f9;
}
.ft-box{	
	padding:0.6rem 0;
}
@media screen and (min-width:500px) {
    .ft-box{
        display:flex;
    }
}
.ft-l,.ft-m,.ft-r{
	width:30%;
	flex-grow:1;
	margin:0 0.4rem;
}
@media screen and (max-width:500px) {
    .ft-l,.ft-m,.ft-r{
        margin:0.5rem auto;
        text-align:center;
    }
}
.ft-l{
	font-size:0.18rem;
}
.ft-m{
	font-size:0.14rem;
}
a.ft-link{
	display:inline-block;
	width:1rem;
	text-align:center;
	text-decoration:none;
}
a.ft-link:link,a.ft-link:visited{
	color:#999;
}
a.ft-link:hover{
	color:#1d7ad9;
}
.ft-r{
	font-size:0.14rem;
}
.ft-r img{
	width:1rem;
	height:1rem;
}
@media screen and (min-width:992px) {
    .ft-r img{
        float:right;
    }
}
.ft-r p{
	margin-top:0;
}
.foot-b{
	color:#fff;
	font-size:0.12rem;
	text-align:center;
	padding:0.1rem;
	background:#1d7ad9;
}

该问题已被官方收录

为什么会出现边框？

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">
                    <a href="../html/task8.3.html">职业</a></div>
                <div class="recommend">推荐</div>
                <div class="regard">关于</div>
            </div>
        </div>
    </div>
*{
    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;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.profession{
    margin-right: 1.5rem;
}
.profession:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}
.recommend{
    margin-right: 1.5rem;
}
.recommend:hover{
    color: #fff;
    border-bottom: 4px solid #fff;
    padding-bottom: 2.6rem;
}

去第页

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