white-space:nowrap
text-overflow:ellipsis
可以将内容超出盒子后用省略号显示,但只能支持单行显示,多行的话就只能使用JS进行字符截取了!
很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能。同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话。你可以参考一下bootstrap官方组件。介绍Animate.css
为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css。 Dan Eden写的。
这是让我能专注于手头的任务,而不是解释CSS3动画的代码。
用Animate.css 需要2个步骤:
在html文档中引入animate.min.css。
在网页中要加动画的元素上添加animated yourchosenanimation类。
接下来你用Animate.css网站上的看到的关于动画的类名,代替yourchosenanimation。
引入Bootstrap轮播组件
Bootstrap轮播组件有三个主要的部分。
轮播指示显示幻灯的页面数量,给用户提供一个视觉线索,并提供可以滑动的导航。
轮播条目,一个叫.carousel-inner的类,包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。
最后,是轮播控制箭头,功能是可以使用户前后滑动。
如果想了解更多Bootstrap轮播组件的详情,可以查看Syed Fazle Rahman的用Bootstrap3创建js轮播效果这篇文章。
为了简单的展示demo,就先不加图片了。焦点先放在轮播框架上作为动画。
构建HTML结构
下边是你需要引用到你项目当中的:
jQuery
Bootstrap's CSS and JavaScript
Animate.css
一个样式表和js文档。
为了加快开发进程,从Bootstrap官网引用了模板和必要的文件。
下边是Bootstrap轮播代码:<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">
This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight">
This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg"
data-animation="animated zoomInUp">Button</button>
</div>
</div><!-- /.item -->
<!-- Second slide -->
<div class="item">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp">
This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg"
data-animation="animated zoomInRight">Button</button>
</div>
</div><!-- /.item -->
<!-- Third slide -->
<div class="item">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated zoomInLeft">
<span class="glyphicon glyphicon-glass"></span>
</h3>
<h3 data-animation="animated flipInX">
This is the caption for slide 3
</h3>
<button class="btn btn-primary btn-lg"
data-animation="animated lightSpeedIn">Button</button>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- 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><!-- /.carousel -->
如果以上代码没有错,你在浏览器打开会看到一个可以运行的轮播,上边的一切不包含一行javascript代码。如果你不添加任何图像,只是在css文档给.carousel .item这个类块添加min-height值防止轮播塌陷。
在轮播标题内的元素添加一个动画属性data-animation,用这个特别的动画类库作为他们的值。
如果你想从Animate.css库体验其他的动画,用你选择的动画类名代替data-animation属性值。
我们在javascript代码中用data-animation属性值。
虽然一个简单的自动轮播在一些案例中可以找到,但是对于这个案例我们有更多的控制。
在这个方向的第一步,从元素中删除data-ride="carousel"值,把data-ride属性值初始化儿不用写任何代码。但是,我们打算用js代码控制轮播,因此,这个data-ride属性就不必要了。
给轮播加CSS样式
现在根据自己的喜好,发挥创造力给轮播标题添加样式。我将要写的样式规则是能顺畅工作的demo。
更具体的说,我们增加动画延迟属性的控制。定义每个动画什么时候开始(注意为了简单演示,省略了浏览器前缀)
.carousel-caption h3:first-child {
animation-delay: 1s
}
.carousel-caption h3:nth-child(2) {
animation-delay: 2s
}
.carousel-caption button {
animation-delay: 3s
}
上面的代码片段中确保元素动画有序开始,还可以做其他的效果。例如,你可以选择前两个标题同时出现,然后是button按钮,可以自己决定,享受乐趣吧。
写jQuery代码:
开始初始化这个轮播,在你的自定义的javascript 文件中添加一下代码:
var $myCarousel = $('#carousel-example-generic')
// Initialize carousel
$myCarousel.carousel()
我们已经动态的设置了轮播,接下来,我们来解决这个动画。
为了使第一个幻灯片的标题有动画,当页面在浏览器加载完后脚本得运行。随后的幻灯片在动画下进入到我们的视野,我们的代码在slide.bs.carousel 事件上运行。意味着同样的代码运行两次:页面加载一次和slide.bs.carousel 事件一次。
因为我们喜欢遵循不重复的原则,我们打算把我们的代码封装在函数中,并在适当的时候引用。
代码:
function doAnimations(elems) {
var animEndEv = 'webkitAnimationEnd animationend'
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation')
// Add animate.css classes to
// the elements to be animated
// Remove animate.css classes
// once the animation event has ended
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType)
})
})
}
// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
.find('[data-animation ^= "animated"]')
// Apply the animation using our function
doAnimations($firstAnimatingElems)
// Pause the carousel
$myCarousel.carousel('pause')
// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event
$myCarousel.on('slide.bs.carousel', function (e) {
// Select the elements to be animated inside the active slide
var $animatingElems = $(e.relatedTarget)
.find("[data-animation ^= 'animated']")
doAnimations($animatingElems)
})
上边的代码 我们来分析一下。
1、来看doAnimations()函数
这个doAnimations() 函数执行的任务如下。
它开始通过缓存变量中含有的animationend事件名称的字符串。这个事件告诉我们,你可能已经猜到,当每个动画结束。我们需要这个点的信息,因为每一次的动画结束后,我们将animate.css类移除。如果我们不做移除,轮播的标题将只有一次动画,也就是,只是在第一次轮播显示特定的幻灯片。
var animEndEv = 'webkitAnimationEnd animationend'
接来下,我们的函数循环遍历每一个我们想要有动画的元素,并获取data-animation的属性值。想上边所说的,这个值包含我们想要添加给元素的Animate.css类,以便有动画效果。
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation')
// etc...
})
最后,这个doAnimations() 函数动态添加animate.css类的每个要执行动画的元素上,当动画结束的时候,还附加了一个事件监听。动画结束后我们移除从Animate.css添加的类。这样确保下一个轮播灯片回到当前的区域。(你试着删除这段代码,看看会发生什么)
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType)
})
2、第一个标题的动画
当页面在浏览器中加载时,我们在第一个幻灯片中动画的内容:
var $firstAnimatingElems = $myCarousel.find('.item:first')
.find("[data-animation ^= 'animated']")
doAnimations($firstAnimatingElems)
在这个代码中,我们找到第一张灯片,我们希望通过使用data-animation从动画的标题获取动画属性的值。然后我们把变量 $firstAnimatingElems 当做参数传给doAnimations()函数,然后执行函数。
3、轮播的停止功能
当第一张灯片内容执行完动画以后,我们停止这个轮播功能。
$myCarousel.carousel('pause')
这是Bootstrap轮播组件防止不停旋转的特征。不停的旋转,可能会让访客生厌。
在这种情况下,我建议确保轮播不直接循环到下一个灯片直到所有的动画运行完毕。可以通过设置在初始化代码中的“间隔”选项来控制这个:
$myCarousel.carousel({
interval: 4000
})
在我看来,一个无限循环轮播标题跳跃每一次的滑动进入视线不理想。
4、轮播幻灯片标题的动画
为每张幻灯片的动画轮播标题变得可见需要以下描述的步骤。
首先,我们在slide.bs.carousel上添加一个事件监听器。
当幻灯片实例方法被调用时,该事件立即触发。
$myCarousel.on('slide.bs.carousel', function (e) {
// do stuff...
})
接下来,我们选择当前的灯片,找到我们希望增加动画的元素。下边的代码用了slide.bs.carousel事件的.relatedTarget属性来绑定动画。
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']")
最后,我们调用doAnimations()函数,把$animatingElems当做参数传进去。
doAnimations($animatingElems)
正如你们许多人可能知道,轮播有一些需要开发者考虑的问题。
实际应用,更多的使用italic属性值
实际应用中, 行高的数值通过设计图获取, 量取数值时需要使用一些辅助软件工具
选中文字工具,属性选中:不消除锯齿
字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写, 属性值可以有2到多个, 值之间用空格进行分隔。
font进行综合书写时, 必须有字号和字体参与, 而且必须字号在前, 字体在后, 不能颠倒顺序。
font属性经常对字体、 字号、 行高进行合写, 书写顺序必须是字号、 行高、 字体, 字号和行高之间必须用/进行分隔
如果font属性需要设置加粗和斜体, 两个属性值只能写在最前面, 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置
作用:设置文本整体是否有线条的装饰效果
作用:设置段落首行是否进行缩进
实际应用中,常用em
属性值区分正负, 正数表示向右缩进, 负数表示向左缩进
浏览器控制台中的盒模型图
作用: 设置可以添加元素内容的区域的宽度。
作用: 设置可以添加元素内容的区域的高度。
如果一个元素不添加 height 属性, 默认属性值为auto, 浏览器会自动计算出实际高度, 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。
书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左
设置四个属性值, 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值, 分配给上下、 左右 。
设置属性值只有一个, 四边的值相同。
作用: 设置边框的颜色。
属性值: 颜色名或颜色值, 整体类似 padding 综合属性写法。
每个单一属性都必须与复合属性 border 一致, 设置三个属性值。
书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左
设置四个属性值, 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值, 分配给上下、 左右 。
设置属性值只有一个, 四边的值相同。
给 <body>标签设置整体文字样式, 让大部分后代标签全部去继承
设计图中盒子高度占位是固定的, 后面同级元素在高度下面加载。多余内容会溢出盒子。
设置了高度的盒子, 如果内部元素的加载高度超过父级, 会溢出。可以通过一个溢出的属性 overflow, 进行溢出部分内容的显示效果设置。
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
一个元素内部嵌套的子元素, 在父元素中居中。
针对类似 <div>样式上必须独占一行的盒子, 如果子盒子宽度低于父盒子宽度, 可以设置子盒子的 margin 值, 水平方向的值都设置为 auto。
原因: auto 只在水平方向有作用, 水平方向的 margin 如果设置为 auto, 边距会自动无限增大, 直到撑满整个父元素除了子元素宽度之外剩余的区域, 如果两个水平方向都是 auto, 两边都要无限大, 只能达到一个平衡, 两边距离相同, 导致盒子居中。
一般情况下, 一个父元素内部可以放一个或多个子元素, 而且多个子元素要排成一行显示, 必须保证父元素的宽度一定要足够(不考虑溢出情况) , 需要遵循一个设置尺寸的规律: 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件: 要么多余的子元素掉下来不能在一排, 要么溢出父元素
父子盒模型中, 只有一个子元素, 且子元素是类似 <div>标签必须占一行的。不设置子元素的 width 属性, 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin, 不需要手动去进行内减, 子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
在垂直方向如果有两个元素的外边距有相遇的, 浏览器中加载的真正的外边距不是两个间距的加和, 而是两个边距中值较大的, 边距值小的塌陷到了边距值大的值内部。
上面的元素有下边距, 下面的元素有上边距, 两个边距相遇, 真正的盒子间距离是较大的那个值
父子元素之间也会出现 margin 塌陷, 父元素和子元素都设置了同方向的margin-top 值, 两个属性之间没有其他的内容进行隔离, 导致两个属性相遇, 发生margin 塌陷。
本身父元素与上一个元素的距离是0, 子元素如果设置了垂直方向的上边距, 会带着父级一起掉下来。
水平方向的 margin 没有塌陷现象。
在标准流中, 大部分元素是区分等级的, 习惯将元素划分为几种常见的加载级别:块级元素、 行内元素、 行内块元素等。
大部分容器级标签包括p标签都是块级元素, 比如 <div>、 <h1>等。
大部分的文本级标签, 比如 <span>、 <a>、 <b>等。
比如 <img>、 <input>等。
可以通过 display 属性更改一个标签的显示模式。
属性值: 元素根据属性值不同, 可以加载对应元素等级的显示模式的特点。
display 属性更改的显示模式并没有改变标准流本质性质, 页面还是只能从上往下加载, 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括: 浮动、 绝对定位、 固定定位。
margin 塌陷现象出现在标准流中的, 浮动元素已经脱离标准流, 不再具有 margin塌陷现象。
与前面压盖效果结构类似, 同级元素中前面的元素浮动, 后面的元素不浮动, 不浮动的元素内部还有一些文字, 浮动的蓝盒子会压盖住粉盒子的一部分, 但是文字内容不会被盖住, 粉盒子中的文字会让开蓝盒子位置, 围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
给标准流的父元素强制给一个合适的高度
作用: 清除标签元素自身受到的前面的浮动元素的影响。
给标准流父元素添加 clear 属性, 父元素不受前面浮动影响, 不会再占有浮动让出的位置。
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden属性, 可以解决浮动的所有问题。
父元素有了高度后, 可以管理住内部所有的浮动元素, 不会延伸到后面标签中影响贴边。
<a>标签可以根据用户行为不同, 划分为四种状态, 通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果, 用户触发对应行为, 就可以加载对应的样式。
一般会将访问前和访问后状态设置为一样的效果, 保证了页面的统一性, 可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下:
<a>标签任何普通的选择器, 可以同时选中四种状态, 可以将四种状态设置为相同的样式, 属性可以设置所有的 <a>默认显示样式的属性, 包括盒模型、 文字等。
a:hover 伪类选择器: 设置鼠标移上时不一样的样式属性。
属性值都是使用代表方向的单词进行书写。
使用像素值作为背景定位的属性值。
百分比表示法使用百分比数字作为属性值。
100%代表的数值:
background 属性可以将五个单一属性的值进行合写。
属性值: 可以有 1-5 个属性值, 值之间用空格进行分隔, 背景定位的两个属性值算作一个属性值, 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。
在<h1>标签是权重最高的标签, 一般会在内部书写最重要的内容, 比如 logo 图片、 最大的标题等。
另外 <h1>内部的文字, 可以帮助提高 SEO 搜索排名。
在设置的是 logo 图片时, 如果使用插入图, 就不能书写搜索关键字。
如果想解决 SEO 问题, 可以将 HTML 结构中, 插入图换成搜索关键字, 然后使用 css 添加背景图给 <a>标签或 <h1>标签。
在一个盒子中有背景图部分, 而且有文字内容, 文字会让开背景图区域进行加载,
背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
当用户访问一个网站时, 需要向服务器发送请求, 网页上的每张图像都要经过一次求才能展现给用户。
然而, 一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时,服务器就会频繁地接受和发送请求, 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数, 提高页面的加载速度, 出现了 CSS精灵技术(也称 CSS Sprites、 CSS 雪碧) 。
CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去, 然后将大图应用于网页, 这样, 当用户访问该页面时, 只需向服务发送一次请求, 网页中的背景图像即可全部展示出来。
通常情况下, 这个由很多小的背景图像合成的大图被称为精灵图。
CSS3 支持背景半透明的写法, 颜色值增加了一种 rgba 模式。
rgba 模式 : 在 rgb 基础上增加了一个不透明度的设置, 不透明度 alpha 取值范围在0-1 之间, 0 表示完全透明, 1 表示完全不透明, 0.5 表示半透明。
书写方式: rgba(红色, 绿色, 蓝色, 不透明度)
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。
通过 background-size 设置背景图片的尺寸, 就像我们设置 <img>的尺寸一样, 在移动 Web 开发中做屏幕适配应用非常广泛。
CSS3 中规定, 一个盒子上, 可以添加多个背景图片。
background-image 的属性值书写时, 以逗号分隔多背景的 URL路径地址。
注意: 背景加载时, 先写的背景压盖后写的背景图片。
属性名: position。
作用: 设置定位的元素, 它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动, 必须搭配偏移量属性进行设置。
水平方向: left、 right。
垂直方向: top、 bottom。
属性值: 常用 px 为单位的数值, 或者百分比。
子绝父相、 子绝父绝、 子绝父固
属性值: absolute, 绝对的意思。
参考元素: 参考的是距离最近的有定位的祖先元素, 如果祖先都没有定位, 参考<body>。必须搭配偏移量属性才会发生位置移动。
性质: 绝对定位的元素脱离标准流, 会让出标准流位置, 可以设置宽高, 也可以随时定义位置, 绝对定位的元素不设置宽高只能被内容撑开。
注意1: 绝对定位的参考元素是不固定的, 不同的参考元素以及不同的偏移量组合,会导致绝对定位元素的参考点不同, 具体位移效果不同。
注意2: 在绝对定位中, 由于参考点不同, left 正值不再等价于 right 的负值。
以 <body>为参考元素时, 参考点的确定与偏移量方向有关
第一, 如果有 top 参与的定位, 参考点就是 <body>页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二, 如果有 bottom 参与的绝对定位, 参考点是 <body>页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中, 如果以 <body>为参考元素, 不同分辨率的浏览器中, 绝对定位的元素位置是不同的, 所以较少使用 <body>作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素, 就不会去参考 <body>。
参考元素: 参考的是祖先元素中有任意定位的, 在 HTML 结构中距离目标最近的祖先。
如果绝对定位的参考元素是某个祖先级, 参考点是盒子 border 以内的四个顶点, 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离, 会忽视参考元素的 padding 区域。
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标, 不占标准流位置, 压盖效果更彻底, 实际工作中, 常见的是 绝对定位制作压盖。
定位的元素不区分定位类型, 都会去压盖标准流或浮动的元素。
如果都是定位的元素, 在 HTML 中 后写定位压盖先写的定位 。
更改定位的元素的压盖顺序, 设置一个 z-index 属性。
属性值: 数字。