Volcano_WQL-CSDN博客

原创＜video＞标签实现制作视频播放器

标签实现制作视频播放器使用font-awesome实现小图标，video标签放置视频，设置自动播放、循环播放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="sty

2020-09-12 10:11:27 440

原创邮箱导航-使用font-awesome实现导航小图标

邮箱导航-使用font-awesome实现导航小图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>邮箱导航页面</title> <link href="font-awesome.min.css" rel="stylesheet"> <style> body{

2020-09-12 09:59:26 40425

原创实现矩形颜色渐变

实现矩形颜色渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡transitions</title> <style> div{ width: 100px; height:100px; margin: 0 auto;

2020-09-12 09:53:15 476

原创使用transform以及border实现多彩组合正方形

使用transform以及border实现多彩组合正方形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方形1</title> <style> #l_f{ top:100px; left:100px; margin:

2020-09-12 09:47:07 235

原创使用transform和border实现五角红星

使用transform和border实现五角红星<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五角星</title> <style> #star-five { top:100px; left:100px; margin

2020-09-12 09:41:55 142

原创实现鼠标移上缩小字间距-trasition

实现鼠标移上缩小字间距-trasition<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style> body{ background-color: #00CCFF; } p{ text-al

2020-09-12 09:37:11 125

原创响应式设计实现个人信息页面

知识储备： 1.媒体查询 2.视口属性 3.弹性盒布局<---栅格系统弹性盒介绍实现效果：改变屏幕分辨率后：代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...

2020-04-23 15:55:21 2818 1

原创响应式之绿色环保

简介：使用响应式web设计一个绿色环保栏知识储备： 1.视口属性的配置：在`<head>`中的`<meta>`标签中配置视口属性 the![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423152217729.png) content="user-scalable=no" 用于设置用户是否可以缩放（默...

2020-04-23 15:43:05 3087

原创天气图切换

首先，框架是模仿前辈的知识储备 1.设置图片全屏居中显示 2.使用伪类进行设计样式 3.CSS3 animation 4.CSS3 选择器 :target 结构如下：<body><div class="nav"> <ul> <li><a href="#bg1" ><br/><b...

2020-04-22 17:18:03 402

原创用动画实现10种进度条样式

知识储备：1.设计网页结构（html/5)2.利用CSS3 的animation实现动画效果3.给样式设置position属性，利用“父相子绝”实现定位4.使用box-shadow实现小点点效果如下：结构如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

2020-04-22 16:49:21 437

原创 vue之设置样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .page{ width:200px; he...

2020-04-12 11:40:20 163

原创 vue之侦听器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>侦听器</title> <script src="../vue.js"></script></head><body&g...

2020-04-12 11:39:09 134

原创 Vue之事件绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body...

2020-04-12 11:38:30 72

原创 vue之事件修饰符

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body...

2020-04-12 11:37:26 280

原创 Vue之事件传参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .page{ width:200px; he...

2020-04-12 11:36:29 180

原创 Vue之计算属性

computed:{}将计算结果缓存，若不改变内容，计算结果保持相同<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script src="../vue.js"><...

2020-03-31 14:59:49 94

原创 Vue之模板语法

v-once一次使用，不受改变影响v-html 插入含有html标签的内容、v-band: ->：、v-on: ->@<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板语法</title> &l...

2020-03-31 14:57:53 103

原创 Vue之循环渲染

v-for=" index in arr"表示循环arr中的各个属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渲染v-for</title> <script src="../vue.js">...

2020-03-31 14:46:36 194

原创实验:CSS3变形的综合运用

实现如下效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style> body{ margin:0; ...

2020-03-26 15:46:18 146

原创 CSS3之绘制五角星

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方形1</title> <style> #l_f{ top:100px; left:1...

2020-03-26 15:43:34 524

原创 CSS3 绘制第二个彩色矩形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方形1</title> <style> #l_f{ top:100px; left:1...

2020-03-26 15:41:33 134

原创 CSS3transform绘制彩色正方形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五角星</title> <style> #l_b { width: 0; height:...

2020-03-26 15:39:54 174

原创 CSS3之文字过渡

使用transitions 设置文字样式的改变改变文字的字间距以及字体大小和透明度等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style> body{...

2020-03-26 15:35:49 1369

原创 CSS之 border-radius

boder-radius:设置圆角边框使用border-radius绘制同心圆<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>同心圆</title> <style> div{ ...

2020-03-26 15:32:39 71

原创 CSS过渡：transitions

设置样式过渡渐变：transitiontransitions 的属性由四个属性构成： 1. transitions-property -> 规定过渡的css属性名称 property 值有三： none 没有属性会获得过渡效果 all 默认值，所有属性将会获得过渡效果 prop...

2020-03-26 15:25:21 140

原创 Vue之例一 tab切换

运用v-if 或者v-show实现首页、新闻和个人中心按钮的切换效果：点击首页按钮，显示首页对应内容；点击新闻按钮，显示新闻对应内容；点击个人中心，显示个人中心内容v-if实现代码如下形式1:设置一个函数根据设置的id值实现切换效果<!DOCTYPE html><html lang="en"><head> <meta charset...

2020-03-24 18:03:12 124

原创 Vue之 v-if 与 v-show的异同

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-show</title> <script src="vue.js"></script></head><body&g...

2020-03-24 17:54:21 103

原创 Vue——条件渲染

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="vue.js"></script></head><body>...

2020-03-24 17:51:38 88

原创 Vue初识

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue介绍</title></head><body> MVC --> ...

2020-03-24 17:48:50 97

原创设计网站简介页面

传智播客网站简介页面html与CSS结合实现将主体放进一个table中，通过嵌入式引入css样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .align{ font-fam...

2020-03-19 15:42:13 594

原创 HTML5之 LOGO绘制

H5之LOG1.定义整个页面背景区域"bg",并设置背景光束旋转5度[style=“transform:rotate(5deg)”]定义’logo’样式，画出盾牌的左半边，css样式- ->d_shield 统一设置背景颜色，并分别设置盾牌每个不同位置的区域大小同理画出盾牌右半边,css样式–>l_shield画出5，样式->grayz、white用色块遮盖多余的...

2020-03-19 15:11:47 486

原创 CSS选择器之结构化伪类选择器

:root选择器：匹配文档根元素:not 选择器：首先得向该结构元素需要排除的子结构元素设置样式才有效果Example：:only-child：first-child、:last-child：:nth-child(n)、nth-last-child(n)：:nth-of-type(n)、nth-last-of-type(n)：:nth-child(n)与:nth-of-type...

2020-03-14 15:25:41 861

原创 HTML——超级课程表页面制作

方法：借助html,css相关知识制作。1.用表格来做主体设计，相同课程使之显示效果相同。2.使用属性选择器将相同课程的效果同化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超课</title> &lt...

2020-03-12 17:46:28 985

原创 CSS选择器之属性选择器、关系选择器

属性选择器1.E[att^=value]E代表标签名，如p,div等等；att表示该标签定义了的一个属性名，如class、id等，value为该属性的属性值，该属性值为包含前缀 value的子字符串。若去掉E,则表示匹配满足条件的任意元素2.E[att$=value]基本原理同上，不过value表示该属性值应包含以value为后缀的子字符串3.E[att*=value]基本原理同上，但...

2020-03-07 17:23:18 693

原创预备CSS

CSS选择器一览表伪选择器伪选择器 ->不是直接对应HTML中定义的元素，->而是向选择器增加特殊的效果。伪元素，格式 -> ::<伪元素>，双冒号伪类，格式->:<伪类>，单冒号...

2020-03-07 16:33:16 140

原创初识Web前端——语义化标签之全局属性

全局属性draggablehiddenspellcheck<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全局属性</title></head><body> <h1&gt...

2020-03-04 10:09:47 183

原创初识Web前端——语义化标签之页面交互元素

页面交互元素details &summaryprogressmeter<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面交互</title></head><body> ...

2020-03-04 10:05:16 244

原创初识Web前端——语义化标签之文本层次语义元素

文本层次语义元素timemarkcite<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本层次语义元素</title></head><body> <time>&...

2020-03-04 09:54:38 278

原创初识Web前端——语义化标签之分组元素

分组元素1.figure and figcaption元素2.hgroup元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分组元素</title></head><body> ...

2020-03-04 08:58:11 203

原创初识Web前端——语义化标签之结构元素

结构元素 ## 各元素的介绍参见如下代码header元素nav元素article元素aside元素section元素footer元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>结构元素</title&...

2020-03-03 23:43:43 149

空空如也

空空如也