jsp做的零食网站下载,网站页面效果图怎么做的,wordpress提交审批,wordpress主题开发 书1 HTML 5html5包含htm5 css3 javascript1.1 新增语义标签头部导航栏块级内容侧边栏脚部注意#xff1a;可以多次使用#xff1b;ie9中需要转换为块级元素#xff1b;针对搜索引擎#xff1b;针对于移动端#xff1b;1.2 新增多媒体标签1.2.1 音频标签 audio格式#xf…1 HTML 5html5包含htm5 css3 javascript1.1 新增语义标签 头部 导航栏 块级 内容 侧边栏 脚部注意可以多次使用ie9中需要转换为块级元素针对搜索引擎针对于移动端1.2 新增多媒体标签1.2.1 音频标签 audio格式ogg.mp3.浏览器版本太低不支持本音频请升级浏览器属性controls:显示播放按钮loop:loop 循环autoplay:autoplay:自动播放 谷歌禁用了该功能src:音频url不同浏览器支持的格式不同采取方案是为音频准备多个格式1.2.2 视频模式 video格式ogg,mp4,webm你的浏览器版本太低请升级浏览器属性src:视频的urlcontrols:显示播放控件autoplay:自动播放muted:静音播放 解决谷歌自动播放问题loop:循环poster:加载等待时显示的内容1.3 新增的表单标签 表单属性1.邮箱2.网址3.日期4.time month week5. 数字6.手机号码7.搜索框8.颜色选择表单属性1. required 内容不能为空2. placeholder请输入内容 提示文字 占位符3. autofocus 自动定位光标4.multiple:多文件提交5.autocomplete:on off 默认打开 默认提示输入过的内容 必须有name属性 成功提交过2 CSS32.1 新增css3选择器2.1.1 css3属性选择器button[disabled]{cursor:pointer;}/*标签[属性名]{} 属性选择器 类选择器 伪类选择器权重 0010标签[属性名属性值]{}标签[属性名^val]{以val开头的}标签[属性名$val]{以val结尾的}标签名[属性名*val]{包含val的}*/2.1.2 css3结构伪类选择器E:first-child 匹配第一个子元EE:last-child 匹配最后一个子元素EE:nth-child(n) 匹配父元素中的第n个子元素 不管子元素的类型n可以是数字 公式 关键字 even 偶数 odd 奇数 如果公式n从0开始计算2n:偶数2n1:奇数5n:5 10 15n5:从第5个开始-n5:前5个 包含第5个注意0和超过的不显示E:first-of-type 指定类型的第一个E:last-of-type 指定类型的最后一个E:nth-of-type(n) 指定类型的第n个2.1.2 伪元素选择器 权重为0001div{width20px;height:20px;border:1px solid red;}div::before{content:我/*内容的前面 是inline 改 inline-block*/}div::after{content:你; /*内容的后面*/}2.2 转换2.2.1 2D转换转换transform:转换就是变形。2.2.1.1 平移 translate1.移动 translatediv{width:100px;height100px;transform:translate(100px,100px); /*水平移动100px 垂直移动100px*/}/*注意不会影响其他盒子的位置translate对于行内元素是无效的*//*实现垂直居中*/div{width:500px;height:500px;background:pink;position:relative;}p{width:200px;height:200px;background:blue;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); /* 跟%是相对于盒子自身来说的*/}2.2.1.2 旋转 rotatediv{transform:rotate(40deg); /*负值就是逆时针旋转*/transform-origin:left bottom;/* 默认50% 50% center center 也可以是像素 */}2.2.1.3 缩放 scalediv{transform:scale(2,1); x,y/*等比例缩放*/transform:scale(2);/*进行缩小 小于1*/transform:scale(0.4);}优势不会影响其他盒子而且可以设置缩放中心点2.2.1.4 综合写法div{transform:translate() rotate() scale()/*位移和其他属性一起写位移必须放在最前面*/}3.动画animation:动画使用1.先定义动画 2.再使用动画div{width:200px;height:200px;background:yellow;animation-name:move;animation-duration:5s;animation-timing-function:ease;/*ease-in; ease-out; 速度曲线*/animation-delay:1s;/* 延长时间*/animation-iteration-count:infinite; /*重复次数*/animation-direction:normal; /*alternate; 是否反方向播放*/animation-fill-mode:backwards;/* forwards; 结束时的状态*/animation-play-sate:paused;/* running 控制动画停止或者播放*//*animation:名称 时间 曲线 开始时间 播放次数 是否反向 动画起始或者结束状态*/}keyframs move{0% from{transform:translateX(0px);}100% to{transform:translateX(1000px);}}4. 3D转换3d:近大远小1、3d位移body{perspective: 500px; /*透视让网页中产生透视效果; 透视写在被观察的父盒子上*/}div{transform:translateX() translateY() translateZ();transform:translate3d(); /*x,y,z 不能省略没有直接写0 */}2、3d旋转 rotate3d();div{transform:rotateX();transform:rotateY();transform:rotateZ();transform:rotate3d(x,y,z,deg);transform:rotate3d(1,0,0,45deg); /* 沿x轴旋转 */}3.transform-style 控制子元素是否开启3ddiv{transform-style:preserve-3d; /* 给父盒子添加 */}5. 浏览器的私有前缀div{-moz-:火狐-ms-:ie-webkit-:safari,chrome-o-:Opera-o-border-radius:10px;}6 补充1. 线性渐变背景渐变必须添加浏览器私有前缀默认是从上往下显示div{background:-webkit-linear-gradient(left,red,blue);background:-webkit-linear-gradient(left top,red,blue); /*从左上角到右下 角进行渐变 */}
