1.格式化代码
command+shift+p，然后选择Install Package.
在插件列表查找并安装格式化css代码需要的插件，css format
打开任意一个css文件，command+a全选所有代码，然后右键选择css format。
command+a全选所有代码，然后右键选择css format。
https://www.jianshu.com/p/37b649a87e4a Sublime Text3(mac版)上好用的插件
2.轮播图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>轮播图</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
javascript carousel 复制代码
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- 小圆圈 --> 图片增加小圆圈也要增加
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- 桌面端用背景包裹放图片，当hidden-xs时隐藏 -->
<a href="#" class="hidden-xs table-image img01 ">
<!-- <img src="images/slide_01_2000x410.jpg" alt="..."> --> 按理来说用img也可以，但是改了img的 height:410px;仍然短一截高度
</a>
<!-- 移动端用a包裹放图片，当hidden-lg hidden-md hidden-sm时隐藏 -->
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_01_640x340.jpg" alt="...">
</a>
<!-- <div class="carousel-caption">
这是对图片的叙述
</div> -->
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img02 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_02_640x340.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img03 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_03_640x340.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="#" class="hidden-xs table-image img04 ">
</a>
<a href="#" class="hidden-lg hidden-md hidden-sm move-image">
<img src="images/slide_04_640x340.jpg" alt="...">
</a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/js/bootstrap.min.js"></script>
</body>
</html>
index.css
/*轮播图桌面端*/
/*为了让中间内容显示，多余的部分自动被切割，屏幕缩小，图片等比例缩小*/
.table-image{
height: 410px;
display: block;
background-repeat: no-repeat;
background-position: center;
/* 背景图 跟着 父盒子 缩放 */
background-size: cover;
}
/*.table-image img{
height: 410px;
display: block; 不知道为什么没用
}*/
.img01{
background-image: url(../images/slide_01_2000x410.jpg);
}
.img02{
background-image: url(../images/slide_02_2000x410.jpg);
}
.img03{
background-image: url(../images/slide_03_2000x410.jpg);
}
.img04{
background-image: url(../images/slide_04_2000x410.jpg);
}
/*移动端以下代码必须写，否则宽度就会出现问题*/
.move-image{
display: block;
width: 100%;
}
.move-image img{
display: block;
width: 100%;
}
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
