- 博客(24)
- 收藏
- 关注
RSS订阅原创 练习二：工作日天气预报
工作日天气预报分享一个小练习——工作日天气预报，该练习会运用到CSS3的圆角边框属性、简单的文本设置、盒子模型以及选择器的使用等，一起来看看吧！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习二</title>...
2020-04-18 21:10:52
2596
1
原创 练习一：10种动态图标
10种动态图标的制作下面这张图就是效果图，那么如何实现呢？其实就是对CSS3相关属性的综合应用，其中涉及到CSS3的变形、动画以及HTML5的文本属性等等。一起来看看吧!具体代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>练习一</...
2020-04-18 21:01:50
951
原创 CSS3 动画——animations
CSS3动画( CSS3 animations )我们学习了CSS3的transition 和transform属性，虽然二者结合可以实现一些简单的动画效果，但是也有-些难以克服的缺点，如无法实现动画在多个状态中转换。CSS3中最后一个动画相关的属性是animations，有了它就可以解决这样的问题。一个完整的CSS animations由两部分构成: 一组定义的动画关键帧和描述该动画的C...
2020-04-09 20:27:58
1193
原创 实验一：员工信息登陆表
实验一：员工信息登陆表方法一：使用网页设计<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>员工信息表</title></head><style type="text/css"> ....
2020-04-09 19:09:05
541
原创 CSS3transition属性实现文本的动态变化
文本动态变化CSS3 transition属性不仅能实现图案的变化，也能实现文本的动态变化，那么如何让文本发生变化呢？例如，变化前文本颜色为浅灰色，字间距为30px，字体大小为80px，当鼠标移上去时，文本移动，文本字间距变为0 ，颜色变为白色。<!DOCTYPE html><html lang="en"><head> <meta ch...
2020-03-27 08:41:28
798
2
原创 CSS3过渡和变形综合应用——不同图片效果
CSS3过渡和变形的综合应用在前面的文章我们了解了CSS3的过渡属性和变形属性，今天利用这两个属性的来实现不同的图片效果，一起来看看吧！要求：（1）当鼠标移上第一-张图像时，产生直角边框过渡为圆角边框的效果。（2） 当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。（3） 当鼠标移上第三张图像时，产生图片旋转的过渡效果。（4）当鼠标移上第四张图像时，产生图片透明度逐渐变暗的过渡效果...
2020-03-26 17:09:51
826
原创 CSS3 3D 转换——实现透明多色正方体
CSS3 3D转换上篇文章分享了2D 转换，那么今天就来了解一下3D转换。既然transform- -origin支持Z轴的偏移，那么transform 支持3D变形也是理所当然的事情。3D变形是指某个元素围绕其x轴、y轴、z轴进行旋转。3D转换的常用函数函数名描述参数说明rotate3d(x,y,z,angel)定义3D旋转前3个值用于判断需要旋转的轴，旋转轴...
2020-03-23 20:15:12
660
原创 CSS3利用圆角边框属性制作图案下篇
CSS3变形transform属性上篇文章分享了使用圆角边框属性制作饼环和四边不同色的正方形，今天分享加上CSS3的`变形transform属性`做一个由八个同色的三角形组成的正方形。CSS3动画相关的第二个属性就是transform,翻译成中文是“改变，使…变彩;转换”，CSS3transform属性允许我们对元素进行旋转、缩放、移动或倾斜，向元素应用2D或3D转换。tanton性的基...
2020-03-22 20:02:17
335
原创 利用css3圆角边框属性实现饼环图案以及由不同颜色组成的正方形图案
CSS3圆角边框属性在CSS3以前，如果要制作圆角效果，需要在圆角的元素标签中加上4个空标签，再在每个空标签中应用一个圆角的背景，然后对这几个应用了圆角的标签进行相应的定位,这个过程十分麻烦。但是，使用CSS3中的border-radius属性，实现边框圆角效果就非常简单了。CSS3的圆角边框实际上是在矩形的4个角分别做内切圆,然后通过设置内切圆的半径来控制圆角的弧度。其基本语法格式如下：b...
2020-03-21 21:11:49
911
原创 vue.js入门学习之模板语法——指令
模板语法——指令指令(Directives)是带有v- 前缀的特殊特性。指令特性的值预期是单个JavaScript 表达式。指令的职责是，当表达式的值改变时， 将其产生的连带影响，响应式地作用于DOM。<p v-if=" seen >现在你看到我了</p>具体代码< !DOCTYPE html><html><head>&...
2020-03-19 16:44:52
255
原创 vue.js入门学习之模板语法——插值，一起学习吧！
模板语法Vue.Js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML ,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue 将模板编译成虚拟DOM渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新這染多少组件，并把DOM操作次数减到最少。如果你熟悉虚拟DOM并且偏爱JavaScript...
2020-03-19 16:07:28
482
原创 vue.js入门学习之生命周期
生命周期一、生命周期钩子每个Vue实例在被创建时都要经过一系列的初始化过程。例如， 需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如created 钩子可以用来在一个实例被创建之后执行代码：new Vue({data: (a : 1}，created: f...
2020-03-19 14:47:07
168
原创 vue.js入门学习之数据与方法，一起来学习吧！
数据与方法当一个Vue实例被创建时，它将data 对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。< !DOCTYPE html><html><head><meta charset="utf-8"><title></title><scrip...
2020-03-18 17:21:49
160
原创 新手入门——创建第一个vue应用！
声明式渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系統。下面展示一个例子，用<div>标签声明一个massage变量，这是一种常见的文本插值方式。使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量，通过new vue 的方式可以获得一个vue应用。在使用new vue 的时候需要传递一个对象作为参数，该对象有两...
2020-03-18 16:39:51
271
原创 CSS3 @font-face 规则笔记
CSS3新特性——@font-face@font-face 是CSS3中的新特性，主要是用于把自定义的Web字体嵌入到你的网页中。@font-face 可以让前端工程师随心所欲的使用各种字体，字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。@font-face 不仅仅可以让我们的前端文字变得更加丰富，我们在前端页面中使用的很多图标也可以通过@font-face实现。...
2020-03-17 21:26:38
385
原创 html5常用文本标签、CSS文本外观属性，你了解多少？
一、HTML5中常用的文本标签1、标题标签（1）定义及用法：HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。（2）语法格式：<h1>1号标题</h1><h2>2号标题</h2><h3>3号标题</h3><h4>...
2020-03-17 20:57:45
1584
原创 web前端——HTML5笔记整理与心得分享
一、响应式web设计简介1、响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括:（1）HTML5+CSS3：HTML5+ CSS3基本网页设计。（2）HTML5中的viewport：提供可以配置视口的属性。（3）CSS3媒体查询：识别媒体类型，特征(屏蒂宽度、像素比等)。（4）流式布局：,可以根据浏览器的宽度和屏荐的大小自动调整效果。（5）响应式栅格系统：依赖于媒体查...
2020-03-14 14:55:06
1110
原创 软件工程定义问题与可行性研究相关课后习题
定义问题与可行性研究1、在软件开发的早期阶段为什么要进行可行性研究?应该从哪些方面研究目标的可行性?(1)开发一个软件时，需要判断原定的系统模型和目标是否现实，系统完成后所能带来的效益是否大到值得投资开发这个系统的程度，为了防止浪费花费在工程上的任何时间、人力、软硬件资源和经费，就需要进行可行性研究。可行性研究的实质是要进行一次大大压缩简化了的系统。而分析和设计过程，就是在较高层次上以较抽象的...
2020-03-13 23:55:47
5038
原创 html制作课程表界面——小白笔记
html制作超级课程表界面先看看制作的效果整体构思：综合使用了<div>标记、列表以及CSS样式。详细代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超级课程表</title> &...
2020-03-09 10:19:29
1319
原创 CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？
CSS常用选择器CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！一、通配符选择器通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}例子使用该选择器定义样式，清除所有HTML标记的默认边距。*{margin：0； /*定义...
2020-03-07 15:20:58
48766
原创 HTML5新增元素用法
HTML5 新增元素的用法一、结构元素1、header用法header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。在HTML5中，一个hea...
2020-03-04 21:55:49
759
原创 源代码——员工信息表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>员工信息表</title></head><style type="text/css"> .box{ width:800p...
2020-03-04 21:53:42
726
原创 源代码——传智播客页面
<!DOCTYPE html><html><head> <title>传智播客</title> <meta charset="UTF-8"> <style type="text/css"> .one{ width: 640px; ...
2020-03-04 21:50:47
3886
原创 HTML5 logo源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 logo</title> <style> body{ margin:0; p...
2020-03-04 21:50:00
4073
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人