CSS 图片
本章节将为大家介绍如何使用 CSS 来布局图片。
圆角图片
实例
圆角图片:
img { border-radius: 8px;}
实例
椭圆形图片:
img { border-radius: 50%;}
缩略图
我们使用 border 属性来创建缩略图。
实例
img { bor……继续阅读 »
2年前 (2022-06-18) 116浏览 0评论
0个赞
Bootstrap4 加载效果
要创建加载中效果可以使用 .spinner-border 类:
实例
<div class="spinner-border"></div>
尝试一下 »
可以使用文本颜色类设置不同的颜色：
实例
<div class="spinner-border text-muted"></div>……继续阅读 »
2年前 (2022-06-18) 309浏览 0评论
0个赞
CSS3 字体
CSS3 @font-face 规则
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您”自己的”的字体是在 CSS……继续阅读 »
2年前 (2022-06-18) 107浏览 0评论
0个赞
Bootstrap 标签页（Tab）插件
标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bo……继续阅读 »
2年前 (2022-06-18) 263浏览 0评论
0个赞
CSS 图片廊
.responsive .img {
border: 1px solid #ccc;
}
.responsive .img:hover {
border: 1px solid #777;
}
.responsive .img img {
width: 100%;
height: auto;
}
.responsive .desc {
padding: 15px……继续阅读 »
2年前 (2022-06-18) 132浏览 0评论
0个赞
HTML DOM Document 对象
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它……继续阅读 »
2年前 (2022-06-18) 85浏览 0评论
0个赞
Font Awesome 交通工具图标
下表显示了所有的 Font Awesome 交通工具图标：
图标
描述
实例
fa fa-ambulance
尝试一下
fa fa-automobile
尝试一下
fa fa-bicycle
尝试一下
fa fa-bus
尝试一下
fa fa-cab
尝试一下
fa fa-car
尝试一下
fa fa-fighter-jet
……继续阅读 »
2年前 (2022-06-18) 157浏览 0评论
0个赞
Bootstrap 面包屑导航（Breadcrumbs）
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 ……继续阅读 »
2年前 (2022-06-18) 236浏览 0评论
0个赞
HTML5 Canvas
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
你的浏览器不支持 HTML5 的 <canvas> 元素.
var c=document.getElementById(“myCanvas”);
var canvOK=1;
try ……继续阅读 »
2年前 (2022-06-18) 242浏览 0评论
0个赞
Bootstrap 插件概览
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下……继续阅读 »
2年前 (2022-06-18) 308浏览 0评论
0个赞
JavaScript 作用域
作用域是可访问变量的集合。
JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
JavaScript 局部作用域
变量在函数内声明，变量为局部变量，具有局部作用域。
局部变量：只能在函数内部访问。
实例
// 此处不……继续阅读 »
2年前 (2022-06-18) 201浏览 0评论
0个赞
Bootstrap5 信息提示框
Bootstrap 5 可以很容易实现信息提示框。
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
实例
<div cl……继续阅读 »
2年前 (2022-06-17) 107浏览 0评论
0个赞
HTML5 Geolocation（地理定位）
HTML5 Geolocation（地理定位）用于定位用户的位置。
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geol……继续阅读 »
2年前 (2022-06-17) 200浏览 0评论
0个赞
JavaScript for 循环
循环可以将代码块执行指定的次数。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：
一般写法：
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>"……继续阅读 »
2年前 (2022-06-17) 246浏览 0评论
0个赞
.imgbox
{
float:left;
text-align:center;
width:120px;
height:135px;
border:1px solid gray;
margin:4px;
padding:0px;
}
.thumbnail
{
width:110px;
height:90px;
margin:3px;
}
.box
{
width:110px;
padding:0px;
}
func……继续阅读 »
2年前 (2022-06-17) 157浏览 0评论
0个赞
#rotate2D,#rotate3D {
width: 80px;
height: 70px;
color: white;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin-right:50px;
border-ra……继续阅读 »
2年前 (2022-06-17) 167浏览 0评论
0个赞
HTML5 表单属性
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性：
autocomplete
novalidate
<input>新属性：
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalid……继续阅读 »
2年前 (2022-06-17) 136浏览 0评论
0个赞
CSS3 2D 转换
#rotate2D,#rotate3D {
width:80px;
height:70px;
color:white;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin-right:50px;
……继续阅读 »
2年前 (2022-06-17) 127浏览 0评论
0个赞
HTML5 测验
/*$(function() {
$.post(“/try/quiz/html5.php”,
{
},
function(data){
$(“#content”).html(data)
});
})*/
HTML5 测验一
HTML5 测验二
HTML5 测验三
HTML5 测验四
HTML5 测验五
HTML5 测验六……继续阅读 »
2年前 (2022-06-17) 161浏览 0评论
0个赞
CSS3 多媒体查询实例
本章节我们将为大家演示一些多媒体查询实例。
开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：
实例 1
<!DOCTYPE html><html><head><style>ul {
list-style-type: none;}
ul li a { col……继续阅读 »
2年前 (2022-06-17) 135浏览 0评论
0个赞
CSS 网页布局
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
CSS3 实例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
菜单导航区域
菜单导航条包含了一……继续阅读 »
2年前 (2022-06-17) 92浏览 0评论
0个赞
Bootstrap4 Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron:
实例
<div class="jumbotron"……继续阅读 »
2年前 (2022-06-16) 158浏览 0评论
0个赞
JavaScript 用法
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script>……继续阅读 »
2年前 (2022-06-16) 165浏览 0评论
0个赞
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 – 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/……继续阅读 »
2年前 (2022-06-16) 196浏览 0评论
0个赞
Bootstrap4 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏
(大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class=”navbar-nav” 类。
然后在 <li> 元素上添加 .nav……继续阅读 »
2年前 (2022-06-16) 207浏览 0评论
0个赞
Bootstrap5 表格
Bootstrap5 基础表格
Bootstrap5 通过 .table 类来设置基础表格的样式，实例如下:
实例
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Last……继续阅读 »
2年前 (2022-06-16) 365浏览 0评论
0个赞
JavaScript 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法
window.alert(“sometext“);
window.alert() 方法可以不带上window对象，直接使用alert()方法。
实例
<!DOCTYP……继续阅读 »
2年前 (2022-06-15) 189浏览 0评论
0个赞
JavaScript 类继承
JavaScript 类继承使用 extends 关键字。
继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。
super() 方法用于调用父类的构造函数。
当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。
继承代表了 is a 关系。例如，哺乳动物……继续阅读 »
2年前 (2022-06-15) 309浏览 0评论
0个赞
Bootstrap4 创建一个网页
接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm
HTML 代码
<div class="jumbotron text-center" style="margin-bo……继续阅读 »
2年前 (2022-06-15) 137浏览 0评论
0个赞
Font Awesome 方向图标
下表显示了所有的 Font Awesome 方向图标：
图标
描述
实例
fa fa-angle-double-down
尝试一下
fa fa-angle-double-left
尝试一下
fa fa-angle-double-right
尝试一下
fa fa-angle-double-up
尝试一下
fa fa-angle-down
尝试一……继续阅读 »
2年前 (2022-06-15) 177浏览 0评论
0个赞
