1、按钮的制作方式

  • 用图片（目前用的不多）

  • 纯CSS a标签

  • input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮

  • button标签

2、CSS

  • 行内元素设置宽高不生效，适用display:block；可以将行内元素设置为块集元素

  • text-align可以是文字在容器中横向居中

  • line-height当数值与height一样的时候文字垂直居中

  • text-decoration将文字下划线去除

  • background属性可以为元素设置背景颜色

  • color属性可以为文字设置颜色

  • font-family属性可以设置字体

  • border:none 去除默认边框

3、未美化按钮案例

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

     a{

         width:60px;

         height: 40px;

         border: 2px solid orange;

         display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */

         text-align: center ;/*文字在容器中横向居中*/

         line-height: 40px;/*当数值与height一样的时候文字垂直居中*/

         text-decoration: none;/*将文字下划线去除*/

 ​

     }

 ​

     </style>

 </head>

 <body>

 <a href="#" >按钮一</a>

 <input type="submit" value="按钮二">

 <input type="button" name="按钮三">

 <button>按钮四</button>

 </body>

 </html>

运行结果：

4、美化制作按钮案例：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

     a{

         width:60px;/*设置宽60像素*/

         height: 40px;/*设置高40像素*/

         border: 2px solid orange;/*设置边框为边长橙色2像素*/

         display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */

         text-align: center ;/*文字在容器中横向居中*/

         line-height: 40px;/*当数值与height一样的时候文字垂直居中*/

         text-decoration: none;/*将文字下划线去除*/

         background: skyblue;/*设置元素背景颜色：天蓝色*/

         color:white;/*设置文字颜色：白色*/

         border:none ;/*去除边框*/

         margin-bottom: 10px;/*下部外边框距离10像素*/

     }

     .bt{

          width:60px;/*设置宽60像素*/

         height: 40px;/*设置高40像素*/

         border: 2px solid orange;/*设置边框为边长橙色2像素*/

         display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */

         text-align: center ;/*文字在容器中横向居中*/

         line-height: 40px;/*当数值与height一样的时候文字垂直居中*/

         text-decoration: none;/*将文字下划线去除*/

         background: skyblue;/*设置元素背景颜色：天蓝色*/

         color:white;/*设置文字颜色：白色*/

         border:none ;/*去除边框*/

         margin-bottom: 10px;/*下部外边框距离10像素*/

     }

     </style>

 </head>

 <body>

 <a href="#" >按钮一</a>

 <input type="submit" value="按钮二"  class="bt">

 <input type="button" value="按钮三" class="bt">

 <button class="bt" >按钮四</button>

 </body>

 </html>

运行结果：

HTML5+CSS3系列教程——如何制作简单按钮笔记的更多相关文章

  1. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  3. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  4. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  5. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  6. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  7. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  8. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  9. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

随机推荐

  1. 使用selenium 多线程爬取爱奇艺电影信息

    使用selenium 多线程爬取爱奇艺电影信息 转载请注明出处. 爬取目标:每个电影的评分.名称.时长.主演.和类型 爬取思路: 源文件:(有注释) from selenium import webd ...

  2. Java直接内存读写的例子

    在Hotspot JVM上,我们能够直接对内存进行读写操作.该类的allocateMemory方法用于申请分配内存,putAddress和getAddress方法用于对直接内存进行读写. 本文将通过s ...

  3. springcloud系列

    1.使用Spring Cloud搭建服务注册中心2.使用Spring Cloud搭建高可用服务注册中心3.Spring Cloud中服务的发现与消费4.Eureka中的核心概念5.什么是客户端负载均衡 ...

  4. Codeforces Round #574 (Div. 2)

    目录 Contest Info Solutions A. Drinks Choosing B. Sport Mafia C. Basketball Exercise D1. Submarine in ...

  5. P2037 电话号码

    题目描述 一串由长长的数字组成的电话号码通常很难记忆.为了方便记忆,有种方法是用单词来方便记忆.例如用“Three Tens”来记忆电话3-10-10-10. 电话号码的标准形式是七位数字,中间用连字 ...

  6. TensorFlow(八)：tensorboard可视化

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data from tensorflow.c ...

  7. NetworkX系列教程(2)-graph生成器

    小书匠Graph图论 本节主要讲解如何快速使用内置的方法生成graph,官方的文档在这里,里面包含了networkX的所有graph生成器,下面的内容只是我节选的内容,并将graph画出来而已. 声明 ...

  8. Pytest从测试类外为测试用例动态注入数据

    今天Nelly问我Pytest能不能支持从TestClass类外传入参数?从类外批量传入各个test方法需要的参数.因为数据文件可能有很多情况,不方便依次匹配. 然而又必须用类对用例进行归类及复用,数 ...

  9. 解决JavaWeb项目报错：The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

    明明有项目和文件,而且别的项目都可以运行,偏偏这个不能用,报错The origin server did not find a current representation for the targe ...

  10. CF1174F Ehab and the Big Finale(交互+剖分)

    做法 \(x\)为隐藏节点,\(dep_x=d(1,x)\) \((1)\):\(u=1\) \((2)\):重链剖分,比如\(v\)为\(u\)的重链底部,查询\(dis(x,v)\)的长度,\(y ...