文介绍了网页编程中的按钮使用方法。按钮是网页中最常用的控件之一,点击后会触发某些程序。即使没有学习过编程,大家也应该知道按钮的概念。按钮的最大功能是点击后触发程序。这篇文章主要介绍了如何在网页中插入按钮,并讲解了按钮的属性和使用方法。
先来看看今天的实例效果。页面被分为三部分:按钮、按钮和按钮的共有属性。
首先是普通按钮,点击后文本框的内容发生了变化,但页面并没有刷新。接着是重置按钮,点击后文本框的内容恢复到初始状态,但页面仍然没有刷新。提交按钮点击后,页面重新加载,提交了表单中的内容。
接着是按钮,点击后文本框的内容发生了变化,但页面没有刷新。按钮包含一个图片且为灰色状态,无法点击。
现在来看看实现的代码。
输入和按钮的写法非常相似,这里只展示了最基本的写法。对于初学者来说,看一眼就明白了。
按钮有三个类型:普通、重置和提交。按钮的名称和值会提交到服务器端。
提交时提交的是按钮的值。ID和name是控制按钮的命名。
点击按钮时会触发onclick事件。autofocus属性会在页面加载完成后自动获取焦点。
disabled属性可以设置按钮是否可用,不设置时默认可用。
form属性用于设置提交到哪个URL、是否绕过验证、以及表单的相关设置。
相关属性的优先级高于在表单中设置的属性。
以上就是今天的分享内容,希望对大家有所帮助。import和button在网页中插入按钮的功能是相同的,两者的外观也没有明显的区别,但是它们的属性设置却存在一定的重叠。
为什么需要这两个标签呢?而阿里巴巴标签是HTML 5中新增加的标签,它的必要性体现在哪里呢?同学们要注意,阿里巴巴标签不是input,它不是一个封闭的标签,而是一个唯一的标签,可以包含文字或其他标签。
例如,可以使用阿里巴巴标签来插入图片。注意,由于用户使用的浏览器不同,底层的type值是必须填写的,绝对不能使用默认值。
今天的分享就到这里,希望各位同学能够认真练习,做到不看视频也能够正确地写出代码。所有的案例和相关文档都可以向我索取,下期再见,想学编程就关注我吧。
为大家介绍使用 CSS 来制作按钮。
基本按钮样式
默认按钮 CSS 按钮
CSS 实例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按钮颜色
GreenBlueRedGrayBlack
我们可以使用 background-color
属性来设置按钮颜色:
CSS 实例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
尝试一下 »
按钮大小
10px12px16px20px24px
我们可以使用 font-size
属性来设置按钮大小:
CSS 实例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圆角按钮
2px4px8px12px50%
我们可以使用 border-radius
属性来设置圆角按钮:
CSS 实例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
尝试一下 »
按钮边框颜色
绿蓝红灰黑
我们可以使用 border
属性设置按钮边框颜色:
CSS 实例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
尝试一下 »
鼠标悬停按钮
绿蓝红灰黑
绿蓝红灰黑
我们可以使用 :hover
选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration
属性来设置 "hover" 效果的速度:
CSS 实例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按钮阴影
阴影按钮鼠标悬停后显示阴影
我们可以使用 box-shadow
属性来为按钮添加阴影:
CSS 实例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
尝试一下 »
禁用按钮
正常按钮禁用按钮
我们可以使用 opacity
属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。
提示: 我么可以添加 cursor
属性并设置为 "not-allowed" 来设置一个禁用的图片:
CSS 实例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
尝试一下 »
按钮宽度
250px
50%100%
默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width
属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。
CSS 实例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
尝试一下 »
按钮组
ButtonButtonButtonButton
移除外边距并添加 float:left
来设置按钮组:
CSS 实例
.button {
float: left;
}
尝试一下 »
带边框按钮组
ButtonButtonButtonButton
我们可以使用 border
属性来设置带边框的按钮组:
CSS 实例
.button {
float: left;
border: 1px solid green
}
尝试一下 »
按钮动画
CSS 实例
鼠标移动到按钮上后添加箭头标记:
Hover
尝试一下 »
CSS 实例
点击时添加 "波纹" 效果:
Click
CSS 实例
点击时添加 "压下" 效果:
Click
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
var topBtn = document.getElementById('top');
// 获取视窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滚动超过一屏,返回顶部按钮出现,反之隐藏
if(toTop>=winHeight){
topBtn.style.display = 'block';
}else {
topBtn.style.display = 'none';
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动
if(toTop == 0){
clearInterval(timer);
}else {
// 设置滚动速度
var speed = Math.ceil(toTop/5);
// 页面向上滚动
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}
*请认真填写需求信息,我们会在24小时内与您取得联系。