Bootstrap5 按钮
Bootstrap 5 提供了不同样式的按钮。
实例
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</butto……继续阅读 »
2年前 (2022-07-24) 155浏览 0评论
0个赞
CSS3 渐变(Gradients)
渐变效果
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐……继续阅读 »
2年前 (2022-07-24) 256浏览 0评论
0个赞
Bootstrap4 小工具
Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。
边框
使用 border 类可以添加或移除边框:
实例
<span class="border"></span>
<span class="border border-0"></span>
<span ……继续阅读 »
2年前 (2022-07-24) 254浏览 0评论
0个赞
JavaScript HTML DOM – 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是:
document.write(Date());
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例
<……继续阅读 »
2年前 (2022-07-24) 423浏览 0评论
0个赞
HTML5 Audio(音频)
HTML5 提供了播放音频文件的标准。
互联网上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。
浏览器支持
Internet Explorer 9+, Firefox, Oper……继续阅读 »
2年前 (2022-07-24) 267浏览 0评论
0个赞
CSS 表单
一个表单案例,我们使用 CSS 来渲染 HTML 的表单元素:
CSS 实例
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-siz……继续阅读 »
2年前 (2022-07-24) 74浏览 0评论
0个赞
Bootstrap 警告框(Alert)插件
警告框(Alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
用法
您可以有以下两种方式启用警告框的可取消(dismissal)功能:
通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss=”……继续阅读 »
2年前 (2022-07-23) 252浏览 0评论
0个赞
CSS 图像拼合技术
图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量,并节省带宽。
图像拼合 – 简单实例
与其使用三个独立的图像,不如我们使用这种单个图像(”http://www.fuwuqijishu.com/wp-content/uploads/2022/05/20220515092406……继续阅读 »
2年前 (2022-07-23) 411浏览 0评论
0个赞
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
……继续阅读 »
2年前 (2022-07-23) 429浏览 0评论
0个赞
Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。
最后,我们还需要使用 .input-group-text 类来设置文本的样式。
Bootstrap4 实例
<form>
……继续阅读 »
2年前 (2022-07-23) 388浏览 0评论
0个赞
JavaScript 类(class)
类是用于创建对象的模板。
我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。
每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下:
class ClassName {
construct……继续阅读 »
2年前 (2022-07-23) 209浏览 0评论
0个赞
Bootstrap5 图像形状
圆角图片
.rounded 类可以让图片显示圆角效果:
实例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
尝试一下 »
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
实例
<……继续阅读 »
2年前 (2022-07-22) 318浏览 0评论
0个赞
JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
* JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。文本可以被任何编程……继续阅读 »
2年前 (2022-07-22) 164浏览 0评论
0个赞
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:
Class
描述
代码示例
.btn-group
该 class 用于形成基本的按钮组。在 .btn……继续阅读 »
2年前 (2022-07-21) 106浏览 0评论
0个赞
Bootstrap4 导航
如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加
.nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:
实例
<ul class="nav">
<li class="nav-item">
<a class="……继续阅读 »
2年前 (2022-07-21) 181浏览 0评论
0个赞
Bootstrap4 面包屑导航(Breadcrumb)
面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。
Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中的 ::before 和 cont……继续阅读 »
2年前 (2022-07-21) 171浏览 0评论
0个赞
JavaScript break 和 continue 语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
break 语句
我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
实例
for (i=0;i<10;i++)
{
……继续阅读 »
2年前 (2022-07-21) 211浏览 0评论
0个赞
CSS3 用户界面
CSS3 用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。
在本章中,您将了解以下的用户界面属性:
resize
box-sizing
outline-offset
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性
……继续阅读 »
2年前 (2022-07-20) 258浏览 0评论
0个赞
Bootstrap 标签
本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:
实例
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Examp……继续阅读 »
2年前 (2022-07-20) 228浏览 0评论
0个赞
HTML5 MathML
HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>…</math> 。
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
注意:大部分浏览器都支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari 浏览器……继续阅读 »
2年前 (2022-07-19) 269浏览 0评论
0个赞
Bootstrap4 弹出框
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
如何创建弹出框
通过向元素添加 data-toggle=”popover”
来来创建弹出框。
title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容:
<a href="#" data-toggle="……继续阅读 »
2年前 (2022-07-19) 220浏览 0评论
0个赞
Bootstrap5 折叠
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。
实例
<button data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
<div id="demo" class="collapse">
……继续阅读 »
2年前 (2022-07-19) 236浏览 0评论
0个赞
JavaScript 对象 实例
使用内置 JavaScript 的对象实例。
Document 对象
使用 document.write() 输出文本
使用 document.write() 输出 HTML
返回文档中锚的数目
返回文档中第一个锚的 innerHTML
返回文档中表单的数目
返回文档中第一个表单的名字
返回文档中的图像数
返回文档中第一个图像的ID
返回文档中的链接数
返回文档中的第一个链接的I……继续阅读 »
2年前 (2022-07-19) 243浏览 0评论
0个赞
Bootstrap 图片
在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class:
.img-rounded:添加 border-radius:6px 来获得图片圆角。
.img-circle:添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
请看下面……继续阅读 »
2年前 (2022-07-18) 281浏览 0评论
0个赞
JavaScript Array(数组) 对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
在线实例
创建数组, 为其赋值:
实例
var mycars = new Array();
mycars[0] = “Saab”;
mycars[1] = “Volvo”;
mycars[2] = “BMW”;
页面底部你可以找到更……继续阅读 »
2年前 (2022-07-18) 329浏览 0评论
0个赞
HTML5 表单元素
HTML5 新的表单元素
HTML5 有以下新的表单元素:
<datalist>
<keygen>
<output>
注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。
HTML5 <datalist> 元素
<datalist> 元素规定输入域……继续阅读 »
2年前 (2022-07-18) 295浏览 0评论
0个赞
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dro……继续阅读 »
2年前 (2022-07-17) 218浏览 0评论
0个赞
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用 w……继续阅读 »
2年前 (2022-07-17) 237浏览 0评论
0个赞
JavaScript 类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转换为布尔值。
JavaScript 数据类型
在 JavaScript 中有 6 种不同的数据类型:
string
number
boolean
object
function
symbol
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
nu……继续阅读 »
2年前 (2022-07-17) 360浏览 0评论
0个赞
JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。
真实生活中的对象,属性和方法
真实生活中,一辆汽车是一个对象。
对象有它的属性,如重量和颜色等,方法有启动停止等:
对象
属性
方法
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.start()
ca……继续阅读 »
2年前 (2022-07-17) 297浏览 0评论
0个赞