1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 button标签 2.CSS 行内元素设置宽高不生效,适用display:block:可以将行内元素设置为块集元素 text-align可以是文字在容器中横向居中 line-height当数值与height一样的时候文字垂直居中 text-decoration将文字下划线去除 background属性可以为元…
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易创造视觉上充满吸引力的下拉菜单. 您可能感兴趣的相关文章 小伙伴们惊呆了!8个超炫的 Web 效果 8个惊艳的 HTML5 和 JavaScript 特效 10大 Metro UI 风格 Bootstrap 主题 35款精致的 CSS3 和 HTML5 网页模板 10套精美的免费网站后台管理系统模板…
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数,这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基本用法,我们来两个简单的例子复习一下: <meta charset='utf-8' /> <s…
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现反色,黑白,亮度,复古,蒙版,透明等美颜效果. getImageData:获取一张图片的像素数据 cxt.getImageData( x, y, width, height ) x:图片所在的x坐标 y: 图片所在的y坐标 width,height 要获取的像素区域 返回值是一个对象,对象包括一个d…
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); linear.addColorStop( value1, color1 ); linear.addColorStop( value2, color2 ); ..... oGc.fillStyle = line…
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 ):将画笔从起点开始画直线,一直画到终点坐标( x2, y2 ) cxt.stroke();用画笔连线,moveTo,lineTo并不会产生实际的线条 x1,y1,x2,y2是点的坐标,canvas的坐标原点在canvas的左上角. 画一根直线: <style…
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半径 ) cx,cy表示控制点的坐标,x2,y2表示结束点的坐标,如果我们想画一条弧线,需要提供3个坐标,开始点,控制点和结束点. 开始点一般可以通过moveTo或者lineTo提供.arcTo提供控制点和结束点. <style> body { background: #000; } #canva…
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以弧度单位,弧度与角度的换算关系为: 弧度=角度*(π/180°). 以时钟为参考,3点钟方向为0度,6点钟方向…
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理.在游戏中的资源大多数都是加载图片. 一.canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh…
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 strokeText用法: cxt.strokeText( text, x,  y, [maxwidth] ) text:需要输出的文本内…