bootstrap轮播图组件

0311lc.com说:一、轮播图组件模板(官方文档) <div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”> <!– 指示器 –> <ol class=”carousel-indicators”> <li data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active……阅读更多

bootstrap栅格系统

0311lc.com说:一、概念: ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局,网格状布局,通过一系列的行(row)与列(column)创建页面布局,你的内容就可以放入创建好的布局中。 二、行和列 ①行是类名row,其中container容器默认有15px的左右内间距 ,row 填充父容器的15px的左右内间距 margin-left,margin-right -1……阅读更多

bootstrap框架的基本使用

0311lc.com说:一、概述 ①当下最流行的前端UI框架(有预制界面组件),组件简洁大方,代码规范精简,界面自定义性强,可以有效提高web开发效率 ②有自己的生态圈,不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单,提高了开发的效率。 ③虽然界面组件样式已经定义好了,但是扩展性相对较强,也就是说我们还可以自定义,修改默认样式 二、版本 ①2.x.x 停止维护,兼容性好,但是代码不够简洁,功能不够完善。 ②3.x.x 目前使用最多,稳定,但是放弃……阅读更多

文字阴影和背景缩放、背景线性渐变、多背景以及透明度

0311lc.com说: 一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 文字阴影:水平位置,垂直位置,模糊距离,阴影的颜色。   <span>前端</span>   span{ font-size: 50px; color: red; text-shadow: 5px 5px 5px #FF0000; } 二、背景图缩放 background-size background-……阅读更多

CSS3 过渡 (transition )

0311lc.com说:transition 属性是一个简写属性,用于设置四个过渡属性: 1.transition-property   设置过渡效果的 CSS 属性的名称。一般写all   2.transition-duration   完成过渡效果需要多少秒或毫秒。单位有s和ms(1s=1000ms)   3.transition-timing-function   速度效果的速度曲线,默认是ease,还有linear、ease-in等   4.transiti……阅读更多

鼠标经过图片会移动(css3过渡,overflow:hidden)

0311lc.com说:效果图如下: 代码: <body> <div><img src=”jd.jpg”></div> </body> img{ width: 250px; height: 250px; transition: all 0.6s;/* 过渡效果,图片实现效果,写在图片上 */ } div{ width: 240px;/* 宽度比图片宽度少10px */ height: 250px; border: 1px solid r……阅读更多

css3 2D变形(transform)移动、缩放、旋转、倾斜

0311lc.com说:一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点:translateX(x)和translateY(y)大写X和Y;只写一个值,默认y=0。 <body> <div></div> </body> div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } di……阅读更多

css3 动画 animation

0311lc.com说:nimation 属性是一个简写属性,用于设置六个动画属性: 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 3.animation-timing-function 规定动画的速度曲线。 4.animation-delay 规定在动画开始之前的延迟。 5.animation-iteration-count 规定动画应该播放的次,n或者infinite无限……阅读更多

心跳(纯代码制作心形,animation动画)

0311lc.com说:思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </body> div{ margin: 200px; width: 200px;/* 盒子1宽高是2:3 */ height: 300px; background: rgb(218, 9, 9); position: relative; border-radius: 10……阅读更多

css3 Flex 布局

0311lc.com说:布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。 它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 css3 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 注意: 1.dispaly:flex用在父元素上 2.flex-direction属性决定主轴的方向(即项目的排列方向)。flex-direction: row |……阅读更多

CSS3 新增选择器:伪类选择器和属性选择器

0311lc.com说: 一、结构(位置)伪类选择器( : ) 1、:first-child 2、:last-child 3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li&……阅读更多