拂柳小清风-优快云博客

原创 H5图标

实例: 该图标背后有放射状线条实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 logo</title>  <style type="te..

2020-09-13 14:54:39 788

原创天气预报图片制作

实例:实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Weather Forecast</title> <style > /*设置外部大盒子的背景图片,宽度,高度*/ .backimage{ margin:0 auto; width: 790px; height: 500px;

2020-09-13 14:23:15 2236

实例:示例代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/h

2020-09-13 14:17:20 1933

原创爱奇艺轮播图滚动

实例:实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频标签栏切换</title> <style> * {

2020-09-13 14:08:07 633

原创 7个简单进度条制作（五、六、七）

实例：实例步骤：第一个进度条外部创建一个盒子内部创建一个左右边框宽度为10像素白色边框，上下边框宽度为10像素半透明白色边框，中间颜色与背景色相同的div盒子让div盒子自转第二个进度条外部创建一个盒子内部创建一个5像素边框的li属性，再创建一个div盒子，使用绝对定位，将div移动到li属性上让li属性和div盒子共同旋转实例代码：<!DOCTYPE html><html> <head> &lt...

2020-09-11 11:42:21 319

原创 7个简单进度条制作(四）

实例：实例步骤：外侧创建一个div盒子内部创建一个小盒子，移动到中心位置，颜色为背景色创建两个宽度与高度稍大于中心小盒子实例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>progress</title> <style> body{ background-color: #808080;

2020-09-11 11:25:04 178

原创 7个简单进度条制作(三)

实例:实例步骤:创建一个外部盒子在盒子左侧创建一个div盒子,用border-radius变成圆形实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>progress</title> <style> body{ background-color: #808080; } div{

2020-09-11 10:56:15 142

原创 7个简单进度条制作(二)

实例:实例步骤: 创建一个外部盒子在外部盒子内部创建四个小盒子在矩形条中添加相应样式和过渡属性实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>progress</title> <style> body{ background-color: #808080; } div{.

2020-09-11 09:40:38 133

原创 7个简单进度条制作 (一)

示例:

2020-09-11 09:33:58 425

原创表单控件实例(含JavaScript验证

此表单控件分为含JS验证和不含JS验证(具体详情请参照表单控件实例1(不含JavaScript验证)) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>From Validation</title> <st...

2020-04-07 17:48:28 301

原创表单控件的实例(不含JavaScript验证)

图例:要点:使用两个嵌套盒子表单控件的相关属性应用左侧文字 , 右侧文本框分别左对齐相关代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>From Validation</titl...

2020-04-04 16:45:22 217

原创利用HTML做一个课程表

↵步骤: 观察该表,建立一个14行*8列的表格第一行合并成一个单元格从第2行1列起,后面的每两行进行合并添加相应的文字及背景颜色代码片段:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...

2020-03-28 17:56:14 6150 1

原创 Transition属性的使用实例

file:///D:/Great%20Wow/Desktop/HTML%E4%BD%9C%E4%B8%9A/%E8%BF%87%E6%B8%A1%E4%B8%8E%E5%8F%98%E5%BD%A2%E7%9A%84%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8/%E8%BF%87%E6%B8%A1%E4%B8%8E%E5%8F%98%E5%BD%A2%E7%9A%84%...

2020-03-27 10:24:19 911

原创 HTML5语义化结构标签(2)

3.页面交互元素1.details和summary元素 details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details 元素的第一个子元素,用于为details定义标题.标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。2.progress元素用于表示一个任务的完成进度,只...

2020-03-11 17:23:35 927

原创 HTML5语义化结构标签(1

1.结构元素Header元素一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容基本格式:<header> <h1>网页主题</h1> </header>nav元素用于定义导航链接,可将具有导航性质的链接归纳在一个区域,是页面元...

2020-03-11 15:59:49 775

Great_Wow的博客