H5+CSS3
关注
分享
扫一扫
任由天高
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
实验 视频播放器
效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>八重樱_桃源恋歌&...原创 2020-04-28 21:06:20 · 478 阅读 · 0 评论 -
实验 视频标签栏切换
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频<...原创 2020-04-28 21:00:38 · 270 阅读 · 0 评论 -
作业 音乐盒
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>音乐盒子</title> <style type="text/css"> /*并排放置两个带边框的框时，可令边框和内边距包含在指定宽度和高度内，用来解决盒子被挤掉下去...原创 2020-04-23 20:14:35 · 510 阅读 · 0 评论 -
实验二 响应式、弹性盒子应用
HTML:<!DOCTYPE HTML><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, init...原创 2020-04-21 18:22:12 · 366 阅读 · 0 评论 -
练习 2d、3d转换、图片切换
效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0;...原创 2020-04-19 13:44:15 · 594 阅读 · 0 评论 -
详解CSS3弹性盒模型
弹性盒模型是CSS3规范中提出的一种新的布局方式。弹性盒模型的目的是提供一种更加高效、简洁的方式来对容器中的元素进行布局、对齐和分配富余空间，即使它们的大小是未知或者动态变化的。利用弹性盒模型的新特性可以让我们告别元素浮动、定位，完美实现元素的垂直水平居中。由于弹性盒模型是在2009年提出的，目前它已经得到了所有标准浏览器的支持，所以我们可以尝试一下这种新的布局方式。下面，笔者将详细解读一下弹性...原创 2020-04-17 13:45:37 · 305 阅读 · 0 评论 -
练习 css3动画
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习 CSS3动画</title> <style type="text/css"> body { background-color : grey;...原创 2020-04-16 22:37:20 · 609 阅读 · 0 评论 -
实验一 响应式网站
<!DOCTYPE html><html lang="en"><head> <title>响应式绿色环保</title> <!-- 自定义主题文件 --> <meta name="viewport" content="width=device-width, initial-scale=1"&g...原创 2020-04-14 22:03:36 · 815 阅读 · 0 评论 -
表单验证 JS版
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验</title> <style type="text/css"> *:focus{ outline:none;/*该元素获得焦点时，不出现虚线框（或...原创 2020-04-06 11:47:02 · 252 阅读 · 0 评论 -
GET和POST协议详解
一、GET请求报文分析：技术分享图片1、 请求行：a) GET（描述该请求采用了什么请求方法），HTTP协议中包含8种请求方法：GET 请求获取Request-URI 所标识的资源POST 在Request-URI 所标识的资源后附加新的数据HEAD 请求获取由Request-URI 所标识的资源的响应消息报头PUT 请求服务器存储一个资源，并用Requ...原创 2020-04-02 21:30:56 · 3858 阅读 · 0 评论 -
实验：表单验证
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验</title> <style type="text/css"> *:focus{ outline:none;/*该元素获得焦点时，不出现虚线框（或...原创 2020-03-29 14:06:34 · 397 阅读 · 0 评论 -
THML method属性
1、method属性规定如何发送表单数据（表单数据发送到action属性所规定的页面）2、表单数据可以作为URL变量（method=“get”）或者HTTP post （method=“post”）方式来发送3、method属性：浏览器使用method属性设置的方法将表单中的数据传送给服务器进行处理。post方法和get方法（1）如果采用post方法，浏览器会：首先，浏览器其余action属...原创 2020-03-28 18:53:32 · 257 阅读 · 0 评论 -
表单H5新增属性和常用标签
表单是网页上用来收集用户信息的区域，由文本域、复选框、单选框、菜单、文件址域、按钮等表单元素组成。<form>标签用于创建一个表单，其基本语法如下所示：<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>在上面的语法中，name属性用来区分一个网页中的多个表单；action属性用于...原创 2020-03-28 11:45:55 · 998 阅读 · 0 评论 -
CSS3动画
CSS3 animations一个完整的CSS animiations由两部分构成：(1)一组定义的动画关键帧——@keyframes规则(2)描述该动画的CSS声明——animation属性@keyframes规则-在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。-@keyf...原创 2020-03-28 09:49:30 · 308 阅读 · 0 评论 -
CSS字体样式属性
CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS常用的字体样式属性如下表所示。CSS对字体综合设置样式，语法如下：CSS3@font-face规则-@font-face是CSS3的新特征，用于定义服务器字体。通过@font-face规则，开发者便可以使用户计算机未安装的字体。-@font-face规则的语法格式如下所示。yourWebFontName：自定义的字体名称...原创 2020-03-24 09:07:09 · 798 阅读 · 0 评论 -
实验：过渡与变形
效果图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ background-color: bl...原创 2020-03-23 14:19:05 · 245 阅读 · 0 评论 -
图文展示网页设计
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 圆角边框</title> <style> body { padding: 0; background-color: #F7F7F7; } ...原创 2020-03-20 09:34:24 · 974 阅读 · 1 评论 -
CSS3的filter(滤镜)属性详解
1、blur模糊blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图，我非常怀疑今年朋友圈的红包照片微信团队就是这么干的：blur(10px)当blur(100px)时可以看到图片几乎看不到了blur(100px)这个值必须为正值，为负值时没有任何效果，如blur(-100px)：blur(-100px)2、...原创 2020-03-20 09:36:13 · 2338 阅读 · 0 评论 -
HTML5中常用的文本标签
HTML5中常用的文本标签详解：一、<wbr>标签<wbr> 标签的定义<wbr>标签的定义<wbr>标签是英文单词“Word Break Opportunity”的缩写，表示单词换行时机；<wbr>标签属于单标签，也叫空标签，只书写成<wbr>或<wbr/>皆可，但后者较为规范；<wbr>...原创 2020-03-14 10:37:08 · 3241 阅读 · 0 评论 -
常用的CSS3选择器
常用的CSS选择器CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。伪选择器比较特殊，分为伪元素和伪类元素两种。一、属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...原创 2020-03-05 21:57:57 · 3358 阅读 · 0 评论 -
H5网页元素和全局属性
1.元素元素是一种具有引导和导航作用的辅助元素，通常，元素可以包含一个区域的标题，也可以包含网站logo图片、搜索条件等其他内容。例：代码：`html Welcome to my homepage My name is Donald DuckThe rest of my home page...`2.元素元素在页面中用来表示结构完整且独立的内容部分，里面可包含独立的、等结构...原创 2020-03-04 13:49:58 · 724 阅读 · 0 评论