- 博客(25)
- 收藏
- 关注
RSS订阅原创 HTML实现banner图切换
首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果）接下来我们来看看详细的代码HTML部分：这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。）存放...
2020-05-06 20:26:45
9293
3
原创 制作交互式导航栏
今天我们要做一个交互式的导航栏，当页面宽度变小时，但导航栏所显示的样式也不同。点击图标打开下拉菜单。先看一下效果把HTML部分：我们先把html代码给出来，这里用到的是最基本的一个布局。设置了两个div第一个是导航栏上方的绿条，第二个div里面通过若干个div来实现他的内容的输出。...
2020-04-30 22:13:09
1007
原创 CSS3综合动画应用
这里我们主要是使用到的是css3的一部分动画效果。主要是用到了animation属性比较多。然后这里每个外层的盒子的背景颜色和宽高等基本属性就可以自己随意设置，所以在下面的代码中就不在讲到。（下面我们挑选其中的几个来讲解）第一个HTML：这里行内式就是设置的动画的延迟时间和第一个div距离外层框架的距离。<div id="box1"> <div style=...
2020-04-17 17:36:18
387
原创 html5+JS制作音乐播放器
今天我们要实现的这个播放页面主要是通过audio标来实现，然后上一首、暂停等按钮时通过字体图标来实现的。先看一下最终的效果：HTML部分：这里最外层用来两个盒子photo和words，分别用来存放图片和歌词。然后左边盒子里面放了两个div标记，分别用来存放图片和图标。这里图标是用的子图图标来实现的。然后歌词部分是直接放在div里面的。<body> <!-- 图片 ...
2020-04-13 16:32:03
3016
2
原创 零基础vue（五）——计算属性+组件
计算属性其实我们使用模板内的表达式是非常便利的，但是表达式实际上只能用于简单的运算。对于任何复杂的逻辑，应当使用计算属性来实现。关键字：computed书写格式：和函数一样下面我们看一个案例，来区别表达式、函数和计算属性的使用。这里使用了三种方法去实现文字的逆序输出。最后实现的效果一样，这里只需要观察他们的区别就可以了。<div id="app"> <h1>...
2020-04-08 14:59:31
467
原创 vue零基础（四）——VueJS指令（2）
v-for可以循环数组、对象。语法：v-for="(item,index) in ditems"v-for=“item in ditems”item：单个项目index：索引值in：item在items里面循环实例代码：在这里插入代码片...
2020-04-03 08:17:47
181
原创 vue零基础（三）——vueJS指令（1）
什么是指令VueJS通过被称为指令的新属性来扩展HTML。ViueJS通过内置的指令来为应用添加功能。VueJS允许你自定义指令。指令的特征所有指令都包含在Vue实例管理的范围内。vueJS指令是扩展的HTML属性，带有前缀v-。v-model指令把元素值(比如输入域的值)绑定到应用程序，存储值。vueJS指令v-text：添加纯文本数据，相当于{{表达式}}——不能...
2020-03-31 17:16:17
217
原创 vue零基础（二）——基础知识（mvvm+VueJS表达式）
简知mvvmVue引入了MVVM (Model-View-ViewModeD)模式，他不同于MVC架构。MVC模式:Model:数据模型，一些JavaScript对象，比如{name :“小小”,age: 18};View:视图，网页中的内容，-般由HTMl模板生成。Contoller:控制器(路由)，视图和模型之间的胶水。MVVM模式:Model:它是与应用程序的业务逻辑相...
2020-03-29 22:51:30
218
原创 vue零基础学习（一）——我的第一个vue程序
在编写第一个vue程序之前先给大家讲解一些基本的知识点。常用指令：指令含义v-text把应用程序数据绑定到元素的更新元素的textContent（也可用过 {{}} 来实现）v-model把元素值（比如输入域的值）绑定到应用程序v-bind可以动态的绑定一个或多个属性到HTML元素上步骤使用vue库引入实例注意事项...
2020-03-29 17:10:49
253
原创 HTML+CSS制作登录界面+H5表单特性
首先，给大家看一下效果图。不过这里用到了一些H5表单的新特性，下面在来讲解。HTML5新增的表单属性autocomplete属性autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值:on: 表单有自动完成功能。...
2020-03-29 11:10:10
1810
原创 JS实现简单选项卡的切换
我们要实现的是单击一个按钮然后显示对于的内容。所以我们先设置4个按钮、4个存放的内容的div标记。先来看一下效果图。然后设置div的宽高属性；使用float属性使其处于同一行，并且要把4个div标记的display设置为none，然后再通过行内式设置第一个div的display为block，这怎么做的目的是实现当前页面只显示了一个盒子；最后还要设置一个avtive类，这个类实现的功能是当点击时...
2020-03-27 20:06:52
903
原创 HTMLtransform属性制作立方体
今天这个立方体主要是通过transform属性实现的，首先，我们先来看一下效果图。这个立方体主要是通过设置了6个div标记，然后通过设置他们的rotate属性来实现三维的效果。整个框架HTML部分这里是整个页面的框架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...
2020-03-25 22:33:51
584
原创 transform、transition属性的部分应用
今天这篇主要是利用一些属性来实现下面图片中完成的效果。首先整个页面的布局是通过使用4个div然后设置他们的宽高以及浮动等属性。在每一个div里面分别存放两个盒子，分别用来装文字和图片。效果图：CSS代码：.one,.two,.three,.four{ width: 200px; height: 240px; float: left; margin-left: 150px; tex...
2020-03-24 23:17:45
312
原创 CSS+HTML制作基本形状图案和动画
今天讲解一下如何制作一些基本形状，先放一张最后的效果图，然后下面一一地讲解。圆环是通过两个正圆，然后设置它的border-radius属性、背景色以及外边距来实现中心对齐。具体的代码如下：HTML部分<!-- 圆环 --> <div class="one"> <div class="one1"></div> <div c...
2020-03-21 10:41:28
1403
原创 HTML制作手机邮箱界面
HTML部分这一个页面没有用到太多新的知识。主要是通过fontawesome字体图标来实现。整个有页面分为6个部分，每一部分定义一栏信息，其中包括字体图标，文字以及右边的消息数量。消息数量主要是通过设置span元素的圆角来实现的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...
2020-03-15 23:24:04
3924
原创 HTML+CSS制作网页推广界面
今天这个网页，其实用以前的基本方法也可以做出来。在这里主要是用到了CSS3的新特性font-face以及fontawesome的应用。HTML部分这一部分的主要框架如下图：黑色的div里面存放的是英文。h3和p标记存放的相应的文字。紫色的div里面是存放的图标和文字，这里的图标不是插入的图片。是使用fontawesome完成的。通过设置边距来实现了四个图标的分布效果。下面是代码：<...
2020-03-15 18:39:53
3259
原创 零基础（二）——vue/cli脚手架安装
安装vue/cli脚手架首先，先确认是否有安装vue/cli.如果有安装的话就可以直接开始创建项目。如果安装了但是不是不想要的版本之类的，可以卸载再安装指定的版本。//安装(如果需要指定版本，则在后面加：@版本号)npm install @vue/cli -g@版本号//卸载npm uninstall cue/cli -g注意：3.0以下的版本是使用vue-cli3.0以上的版...
2020-03-15 11:09:52
218
原创 零基础（一）——node.js安装及环境配置
随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢，今天跟大家分享一下首先先给大家介绍几个基本概念。需要了解的知识HtmlCss+JavascriptsNode.js环境(npm包管理工具)Webpack自动化构建工具npm/cnpm/yarn概念使用npm安装插件:命令提示符执行npm install 。（ps.新版本的nod...
2020-03-14 11:32:55
218
原创 HTML制作课程表界面
HTML部分由于我们做的是一个静态页面。所以在这里用到的只是简单的表格标记。然后通过设置其宽高，行列合并等属性实现课程表的排版。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="styleshe...
2020-03-12 15:27:29
2220
原创 HTML5语义化结构标签
结构元素标签名描述header元素HTML5中的header元素是一种引导和导航作用的结构元素，该元素可以包含通常放在页面头部的内容。nav元素用于定义导航链接，是HTML5的新增元素，该元素可以将具有导航性质的链接归纳在一个区域中navnavnav...
2020-03-02 22:43:53
532
原创 HTML代码制作html5图标
HTML部分这个图标全部是由div标记来实现的，首先定义了一个大的框架，然后在里面并列存放光束、盾牌、数字和HTML字样图片。光束是通过把div设置成长条的形状，然后复制多个，使用transform的rotate属性来实现旋转，最后实现光束的制作然后通过设置宽高和它们的位置来制作盾牌和数字5以及右边橘色部分。最后插入图片。<!DOCTYPE html><html> ...
2020-03-01 17:56:22
2551
原创 HTML表单（正则表达式验证）
HTML部分定义了一个9行3列的表格，通过部分行列的合并，然后将表单的input部件嵌入到表格的单元格中，然后设置单元格的宽高来实现表格的对齐。表单部件中使用了H5新增的颜色选择器color、设置日期data、电子邮件email和required等部件，使得输入更规范有效。<html> <head> <meta charset="utf-8" /> ...
2020-02-29 22:54:13
3880
原创 HTML简单网页制作（传智）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body&...
2020-02-29 22:33:06
1686
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人