响应式 0816响应式响应式:根据不同的设备、不同的宽度、不同的特性、对页面上内容的样式做出相应的调整媒询 媒体查询 显示设备 @media 只有满足所有查询条件的时候,里面的样式才会被解析 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print ...
弹性盒模型相关 0814弹性盒模型.box{ height: 200px; border:10px solid #000; display: -webkit-box; display: -moz-box; -webkit-box-orient:horizontal;
移动端 0810移动端配饰head> meta charset="UTF-8"> meta name="viewport" content="width=640,user-scalable=no"> title>Titletitle> style> .box{ width:400px; heig
过渡与2D变换 0808Transition过渡transition 属性是一个简写属性,用于设置四个过渡属性: transition-property :规定设置过渡效果的 CSS 属性的名称(all || [attr] || none) transition-duration :运动时间 transition-delay :延迟时间 transition-timing-function :
less 0807less在less 里面 &代表当前的class本身.box{ width:100px; height:100px; background-color: #00a1d6; &:after{ content: ''; } .mian{ border:1px solid #f00; } .name{ heigh
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略 0804css3伪类target突出显示活动的 HTML 锚div:target{ background: #0e3757; }表单控件伪类style> input:enabled{ background-color: #FFF2AB; } input
css复习——结构性伪类 0803结构性伪类<style> p:nth-child(3){ background-color: #000000; }</style>p:nth-child(n) 表示p元素的父级中的第n个子元素 并且这个子元素必须是p,否则没有反应。<style> p:nth-last-child(2){ ba
css复习——表格与表单 0719表格表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元表格样式重置:table{border-collapse:collapse;} /*单元格间隙合并*/th,td{padding:0;}/*重置单元格默认填充*/colspan 属性规定单元格可横跨的列数。</ css复习——opacity(不透明度)、IE6固定定位、border-radius(圆角) 0718opacityopacity 不透明度 能够改变元素以及元素里面的所有内容的(不)透明度 IE8以及IE8以下的浏览器不支持opacity filter:alpha(opacity=0~100); 兼容IE9以及IE9以下的浏览器.main{ width:500px; height:300px; colo css复习——定位、全屏div、div居中、calc函数 0714相对定位相对(比较安全)定位 position: relative; a、不影响元素本身的特性; b、不使元素脱离文档流(元素移动之后原始位置会被保留); c、如果没有定位偏移量,对元素本身没有任何影响; d、相对于其正常位置进行定位不影响元素本身的特性( 元素的特性( css复习——overflow 0712overflowoverflow 属性规定当内容溢出元素框时发生的事情。 overflow属性值: visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit css复习——浮动与BFC 0710浮动float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 浮动的值: left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性 css复习——鼠标 0707鼠标cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。url 需使用的自定义光标的 URL。 请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 cross css复习——前段规范与多行文字居中 0706前段规范1、所有书写均在英文半角状态下的小写; 2、id,class必须以字母开头; 3、所有标签必须闭合; 4、html标签用tab键缩进; 5、属性值必须带引号; 6、 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签; 9、p,dt,h标签 里面不能嵌套块属性标签; 10、a标签不能嵌套a; css复习——常用标签、选择器与优先级、块元素与内联元素 day6 0704常用标签页眉,主要用于页面的头部的信息介绍,也可用于板块头部导航,里面必须用a标签 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节用来在页面中表示一套结构完整且独立的内容部分</ css复习——a标签 day5 0703a标签使用a标签记得样式重置 a{ color: inherit; text-decoration: none; }字体颜色继承父级、去掉下划线 target 链接打开方式 _blank 新窗口 _self 当前窗口 定义页面链接默认打开方式target=”_blank” 例子<a href="http://www. css复习——选择器、padding、margin day4 0630选择器标签选择器 div(标签的名字) ID选择器 ID名称(ID不能重复) 类选择器 .class名字(可以重复使用)div{ width:100px; height:200px; border:1px solid #0b9380; }#box{ width:500px; height:700px; border:3px s css复习——文字与文本 day3 0629文字文字加粗 font-weight: bold 加粗 normal (正常,不加粗)默认值文字大小 font-size:文字样式 font-style: italic 倾斜 normal 正常字体 font-size:例子#box{ /*font-weight:bold;*/ /*font-size:50px;*/ css复习——背景background day2 0628背景背景颜色 backgroud-color 背景图片 backgroud-image 背景图平铺 repeat 平铺 (默认值)no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 背景图位置 background-position 第一个值 X轴 num center left right 第二个值 Y轴 num 加载更多
css复习——opacity(不透明度)、IE6固定定位、border-radius(圆角) 0718opacityopacity 不透明度 能够改变元素以及元素里面的所有内容的(不)透明度 IE8以及IE8以下的浏览器不支持opacity filter:alpha(opacity=0~100); 兼容IE9以及IE9以下的浏览器.main{ width:500px; height:300px; colo
css复习——定位、全屏div、div居中、calc函数 0714相对定位相对(比较安全)定位 position: relative; a、不影响元素本身的特性; b、不使元素脱离文档流(元素移动之后原始位置会被保留); c、如果没有定位偏移量,对元素本身没有任何影响; d、相对于其正常位置进行定位不影响元素本身的特性( 元素的特性(
css复习——overflow 0712overflowoverflow 属性规定当内容溢出元素框时发生的事情。 overflow属性值: visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit
css复习——浮动与BFC 0710浮动float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 浮动的值: left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性
css复习——鼠标 0707鼠标cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。url 需使用的自定义光标的 URL。 请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 cross
css复习——前段规范与多行文字居中 0706前段规范1、所有书写均在英文半角状态下的小写; 2、id,class必须以字母开头; 3、所有标签必须闭合; 4、html标签用tab键缩进; 5、属性值必须带引号; 6、 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签; 9、p,dt,h标签 里面不能嵌套块属性标签; 10、a标签不能嵌套a;
css复习——常用标签、选择器与优先级、块元素与内联元素 day6 0704常用标签页眉,主要用于页面的头部的信息介绍,也可用于板块头部导航,里面必须用a标签 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节用来在页面中表示一套结构完整且独立的内容部分</
css复习——a标签 day5 0703a标签使用a标签记得样式重置 a{ color: inherit; text-decoration: none; }字体颜色继承父级、去掉下划线 target 链接打开方式 _blank 新窗口 _self 当前窗口 定义页面链接默认打开方式target=”_blank” 例子<a href="http://www.
css复习——选择器、padding、margin day4 0630选择器标签选择器 div(标签的名字) ID选择器 ID名称(ID不能重复) 类选择器 .class名字(可以重复使用)div{ width:100px; height:200px; border:1px solid #0b9380; }#box{ width:500px; height:700px; border:3px s
css复习——文字与文本 day3 0629文字文字加粗 font-weight: bold 加粗 normal (正常,不加粗)默认值文字大小 font-size:文字样式 font-style: italic 倾斜 normal 正常字体 font-size:例子#box{ /*font-weight:bold;*/ /*font-size:50px;*/
css复习——背景background day2 0628背景背景颜色 backgroud-color 背景图片 backgroud-image 背景图平铺 repeat 平铺 (默认值)no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 背景图位置 background-position 第一个值 X轴 num center left right 第二个值 Y轴 num