HTML5+CSS3系列教程——如何制作简单按钮笔记
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系列教程——如何制作简单按钮笔记的更多相关文章
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
随机推荐
- [bzoj 2693] jzptab & [bzoj 2154] Crash的数字表格 (莫比乌斯反演)
题目描述 TTT组数据,给出NNN,MMM,求∑x=1N∑y=1Mlim(x,y)\sum_{x=1}^N\sum_{y=1}^M lim(x,y)\newlinex=1∑Ny=1∑Mlim(x, ...
- SYSTEM_INFORMATION_CLASS
source: https://github.com/processhacker/processhacker/blob/master/phnt/include/ntexapi.h // rev // ...
- 在docker容器中编译hadoop 3.1.0
在docker容器中编译hadoop 3.1.0 优点:docker安装好之后可以一键部署编译环境,不用担心各种库不兼容等问题,编译失败率低. Hadoop 3.1.0 的源代码目录下有一个 `sta ...
- 编程用sort进行排序，然后从最后一个元素开始判断，去重
a=[,,,,,,,,,,,,,,] a.sort() last=a[-] ,-,-): if last==a[i]: del a[i] else: last=a[i] print(a)
- xyz
import numpy as np a = np.array([[,],[,]]) sumo = np.sum(a,axis=) suml = np.sum(a,axis=O) print(sumo ...
- Linux下java环境变量配置
安装步骤 1.查看当前Linux系统是否安装java rpm -qa | grep java 2.卸载系统中已经存在的openJDK rpm -e --nodeps java--openjdk-1.7 ...
- PHP 之CI框架+GatewayWorker+AmazeUI低仿微信聊天网页版
html5开发的仿微信网页版聊天,采用html5+css3+jquery+websocket+amazeui等技术混合架构开发,实现了微信网页版的主要功能. 一.效果图 二.前端参考代码 <!D ...
- 微信小程序wx.request的简单封装
前言 之前写小程序,每次请求后台时都直接调用原生的API,wx.request,每次都要写url,data,回调函数等,正好前段时间,小程序项目需要添加新内容,趁此机会,做一个封装的请求工具,比较简单 ...
- docker安装hbase
.下载安装Hbase: ().docker search hbase : 查找Hbase ().docker pull harisekhon/hbase:1.3 注意:不要安装最新版本的,不稳定 (我 ...
- 常用的xml头文件
原文:https://www.cnblogs.com/uniquezhangqi/p/9199329.html#commentform xmlns,xmlns:xsi,xsi:schemaLocati ...