CSS3
CSS3选择器
1.元素选择器
* E E#id E.class
2.关系选择器
E F (后代选择器)
E > F (子代选择器)
E + F (相邻选择器)
E ~ F (兄弟选择器)
3.属性选择器
E [att] (选择具有att属性的E元素)
E [att="val"] (选择具有att属性且属性值等于val的E元素)
E [att~="val"] (选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素)
E [att^="val"] (选择具有att属性且属性值为以val开头的字符串的E元素)
E [att$="val"] (选择具有att属性且属性值为以val结尾的字符串的E元素)
E [att*="val"] (选择具有att属性且属性值为包含val的字符串的E元素)
E [att|="val"] (选择具有att属性，其值是以val开头并用连接符"-"分隔的字符串的E元素；
如果值仅为val，也将被选择)
4.伪类选择器
E:link (设置超链接a在未被访问前的样式)
E:visited (设置超链接a在其链接地址已被访问过时的样式)
E:hover (设置元素在其鼠标悬停时的样式)
E:active (设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式)
'注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后'
E:focus (设置对象在成为输入焦点时的样式)
E:lang(fr) (匹配使用特殊语言的E元素)
E:not(s) (匹配不含有s选择符的元素E)
E:root (匹配E元素在文档的根元素)'在HTML中，根元素永远是HTML'
E:first-child (匹配父元素的第一个子元素E)
'注'
'<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>'
'在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，
而不是ul:first-child{sRules}'
E:last-child (匹配父元素的最后一个子元素E)
E:only-child (匹配父元素仅有的一个子元素E)
E:nth-child(n) (匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效)
E:nth-last-child(n) (匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效)
E:first-of-type (匹配父元素下第一个类型为E的子元素)
E:last-of-type (匹配父元素下的所有E子元素中的倒数第一个)
E:only-of-type (匹配父元素的所有子元素中唯一的那个子元素E)
E:nth-of-type(n) (匹配父元素的第n个子元素E)
E:nth-last-of-type(n) (匹配父元素的倒数第n个子元素E)
E:empty (匹配没有任何子元素（包括text节点）的元素E)
E:checked(匹配用户界面上处于选中状态的元素E)(用于input type为radio与checkbox时)
E:enabled (匹配用户界面上处于可用状态的元素E)
E:disabled (匹配用户界面上处于禁用状态的元素E)
E:target (匹配相关URL指向的E元素)
5.伪对象选择器
E:first-letter/E::first-letter (设置对象内的第一个字符的样式)
E:first-line/E::first-line (设置对象内的第一行的样式)
E:before/E::before (设置在对象前发生的内容。用来和content属性一起使用，'并且必须定义content属性')
E:after/E::after (设置在对象后发生的内容。用来和content属性一起使用，'并且必须定义content属性')
E::selection (设置对象被选择时的样式)
CSS3文本字体
1.text-shadow:5px 6px 10px red; 文本阴影 阴影水平偏移量 阴影垂直偏移量 阴影模糊值 颜色
2.单行文本溢出
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3.@font-face 网络字体(例如iconfont)
背景
1.background-origin(指定的背景图像计算的原点)
'默认值：padding-box ,
border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。
content-box：从content区域开始显示背景图像。'
2.background-clip(指定对象的背景图像向外裁剪的区域)
'默认值：border-box ,
border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。'
3.background-size
'background-size: cover;将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
background-size: contain;将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，
背景图像始终被包含在容器内。
background-size:400px 200px;
background-size:100%;按比例'
4.background:url(http://css.doyoe.com/properties/backgrounds/skin/p_103x196_1.jpg) 0 0 no-repeat;
'url图片引入 第二个第三个值为定位 第四个为是否重复'
弹性盒模型
display:flex; 弹性盒模型
flex:1;(占父元素剩余部分的份数)(父元素设置display:flex; 子元素设置flex)
flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。
'默认值：row
row:横向从左到右排列（左对齐）
row-reverse:对齐方式与row相反。
column:纵向从上往下排列（顶对齐）
column-reverse:对齐方式与column相反'
flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-items 设置或检索弹性盒子元素垂直对齐方式。
'默认值：stretch
flex-start：居上。
flex-end：居下。
center：居中。
baseline：基线对齐。
stretch：拉伸'
justify-content 设置或检索弹性盒子元素水平对齐方式。
'默认值：flex-start
flex-start：居左
flex-end：居右
center：居中
space-between：两边无空，中间平均分
space-around：两边有空，平均分'
动画
transition: width 2s linear 2s;
/* 过度 属性 执行时间 运动方式 延迟时间 */
animation: run 2s ease 2s infinite forwards;
/*动画名称 执行时间 运动方式 延迟时间 循环次数 动画结束后状态*/
@keyframes run {
30%{
width:800px;
}
50%{
width:200px;
}
100%{
width:1000px;
}
}
响应式
<!-- 页面宽度 = 设备款速 初始缩放比例1 允许用户缩放到的最大比例 允许用户缩放到的最小比例 用户是否可以手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1, minimum-scale=1" user-scalable=no">
/* >=980 red */
@media (min-width: 980px) {
#div1{
background:red;
}
}
/* <=768 yellow */
@media (max-width: 768px) {
#div1{
background:yellow;
}
}
@media screen and (max-width:480px){ //screen屏幕
#div1{
background: #eee;
}
}
补充
边框圆角与阴影
border-radius (边框圆角)(圆50%)
box-shadow:5px 6px 10px red; 阴影水平偏移量 阴影垂直偏移量 阴影模糊值 颜色
颜色设置 可用 rgba(255,255,255,0.7) (最后值为透明度，前三个值为0~255)；
变形
transform:translate() ;位移
transform:translatex();x轴位移
transform:translatey();y轴位移
transform:translatez();z轴位移
transform:rotate(30deg);旋转(顺时针)
transform:rotatex();x轴旋转
transform:rotatey();y轴旋转
transform:rotatez();z轴旋转
transform:scale();缩放
transform:skew();扭曲
transform-origin:right bottom;旋转
一些例子
五环的一种实现方法
利用::after和border-radius制作五环
主要思路：先画出五个圆，通过定位调整好位置，然后给每一个圆添加一个::after，与每一个位置相同
并用z-index调整显示层级，然后看谁压在谁上边，通过调整边框透明使之完成。
旋转立方体
主要思路：首先构筑六个面，先是六个面写出同样的样式，定位到容器之中，然后通过旋转和
位移调位置，给body设施perspective，提高视角，在通过keyframe 构筑一个动画，进行怎样的旋转。
左侧固定右侧自适应
1.弹性盒模型
左侧将宽写死 父元素display:flex; 子元素自适应元素flex:1;
2.浮动
利用浮动将子元素中左侧元素宽高写死 子元素右侧用margin-left将左侧子元素空出 右侧写出高即可
3.定位
利用定位将子元素中左侧元素宽高写死定位到左侧 子元素右侧用margin-left将左侧子元素空出 右侧写出高即可
4.利用margin-top
左侧元素正常将宽高写死 右侧元素利用margin-top上移,用margin-left将左侧子元素空出 右侧写出高即可
水平垂直居中
1.利用定位实现
利用定位position:absolute;left:50%;top:50%;这样不会是水平居中，只会使左上角的点水平居中
再用margin-left=-width/2 margin-top=-height/2 实现
2.利用弹性盒模型
在父元素身上设置display: flex;
justify-content: center;/* 水平 */
align-items: center;/* 垂直 */
移动端自适应
1.百分比
2.弹性盒模型
3.rem(rem 相对于html元素（根元素）的字体大小)
' //320/6.4 html的fontsize = 50
// 640/6.4 html的fontsize = 100
// 1份为1rem'
other
小海豹，美团，旋转合并照片墙
Jquery
onload
// 所有html资源加载完 会覆盖
window.onload = function(){
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
}
//文档就绪 页面结构加载完 不会等待所有的资源 不会覆盖
$(document).ready(function(){
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
});
对象互转
// 原生对象转成jq对象 $(dom)
console.log($(oDiv))
// jq对象转成原生对象 jq.get(0) || jq[0]
console.log($('#div1').get(0));
console.log($('#div')[0]);
事件委托
// 支持事件委托
$('ul').on('click','li',function(){
// this指 li
console.log($(this).html());
})
// 点击按钮随机生成li
$('button').on('click',function(){
$('<li>'+Math.random()+'</li>').appendTo('ul');
})
//mouseenter不支持事件冒泡
// 事件源
console.log(e.target);
// 事件类型 "mouseenter"
console.log(e.type);
// 阻止默认行为
e.preventDefault();
// 阻止事件冒泡
e.stopPropagation();
// 鼠标相对于文档的左边缘的位置
console.log(e.pageX);
console.log(e.pageY);
// 获取键盘码
console.log(e.which);
动画
//.stop 一个布尔值，指示是否取消以列队动画。默认 false.
//.stop 一个布尔值指示是否当前动画立即完成 默认 false.
$('#stop').on('click',function(){
$('#div1').stop(false,true);
})
一些例子
反选框-Jquery
<!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>
</head>
<body>
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<button id="CheckedAll">全 选</button>
<button id="CheckedNo">全不选</button>
<button id="CheckedRev">反 选</button>
<script src="jquery-1.12.4.js"></script>
<script>
$('#CheckedAll').on('click', function() {
$(':checkbox').prop('checked', true);
})
$('#CheckedNo').on('click', function() {
$(':checkbox').prop('checked', false);
})
$('#CheckedRev').on('click', function() {
$(':checkbox').each(function(index, elem) {
elem.checked = !elem.checked;
})
})
</script>
</body>
</html>
选项卡-Jquery
思路相同，Jquery更简单
<script>
$('li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
var i = $(this).index();
$('.div1').eq(i).addClass('selected').siblings().removeClass('selected');
})
</script>
垂直导航菜单-Jquery
<script>
$('.span1').on('click', function() {
$(this).next().toggleClass('show');
})
</script>
轮播图-Jquery
<script>
var iNow = 0;
$('#btn-box li').on('click',function(){
change($(this).index());
iNow = $(this).index();
})
$('#next').on('click',function(){
iNow++;
if(iNow == $('#btn-box li').size() ){
iNow = 0;
}
change(iNow);
})
// 接收index 按钮中索引是index的 active 其他灰色
function change(index){
$('#btn-box li').eq(index).addClass('active').siblings().removeClass('active');
$('#img-box a').eq(index).addClass('selected').siblings().removeClass('selected');
}
var timer = setInterval(function(){
// 执行next按钮的点击事件
$('#next').trigger('click');
},1000);
$('#container').hover(function(){//鼠标划入处理函数
clearInterval(timer);
},function(){ ////鼠标划出处理函数
timer = setInterval(function(){
$('#next').trigger('click');
},1000);
});
</script>
