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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

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"> 代码

.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任务十四的时候发现如果在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 */

该问题已被官方收录

bootstrap写导航栏，如何让内部内容垂直居中

1

1

bottstrap 居中

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

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

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>

该问题已被官方收录

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

该问题已被官方收录

雪碧图大小的问题

1

1

雪碧图

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

display: inline-block;
    background: url(../img/img.png)no-repeat 0 0;
    height: 8px;
    width: 13px;
    transform: scale(0.5);

该问题已被官方收录

截图中这个圆角框怎么实现？

1

1

盒模型边距

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

header {
height:50px;
}
footer {
height:50px;
}
div {
height: calc(100% - 100px);
}

该问题已被官方收录

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

该问题已被官方收录

能不能控制栅格的容量高度

3

1

bottstrap

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <div class="row box7">
            <div class="col-xs-12 col-sm-6 col-md-3">
                
          <p>12</p>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">

            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
 
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                
            </div>
        </div>

去第页

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