HTML
关注
分享
扫一扫
开心肖肖乐-
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
制作交互式导航栏
今天我们要做一个交互式的导航栏，当页面宽度变小时，但导航栏所显示的样式也不同。点击图标打开下拉菜单。先看一下效果把HTML部分：我们先把html代码给出来，这里用到的是最基本的一个布局。设置了两个div第一个是导航栏上方的绿条，第二个div里面通过若干个div来实现他的内容的输出。...原创 2020-04-30 22:13:09 · 1072 阅读 · 0 评论 -
HTML实现banner图切换
首先呢，我们做出来的效果去下图，这里只是简单的写的文字，如果需要更好的话，可以自己添加或修改。（这里图片大小没有统一，有一丢丢影响效果）接下来我们来看看详细的代码HTML部分：这里主要设置了三个盒子并列。一个存放banner图、一个是左侧的黑色背景还有一个是左侧的文字。（因为这里是设置了黑色盒子的背景透明度，为了实现背景透明、文字不透明，所以这里用的是两个盒子通过设置位置来实现的。）存放...原创 2020-05-06 20:26:45 · 9474 阅读 · 3 评论 -
CSS3综合动画应用
这里我们主要是使用到的是css3的一部分动画效果。主要是用到了animation属性比较多。然后这里每个外层的盒子的背景颜色和宽高等基本属性就可以自己随意设置，所以在下面的代码中就不在讲到。（下面我们挑选其中的几个来讲解）第一个HTML：这里行内式就是设置的动画的延迟时间和第一个div距离外层框架的距离。<div id="box1"> <div style=...原创 2020-04-17 17:36:18 · 428 阅读 · 0 评论 -
HTML制作简单交互网页
今天我们要做的事一个简单的交互式网页，主要用的是设置百分比宽度以及媒体查询器。先看一下效果：原创 2020-04-14 17:48:54 · 9074 阅读 · 0 评论 -
零基础vue（五）——计算属性+组件
计算属性其实我们使用模板内的表达式是非常便利的，但是表达式实际上只能用于简单的运算。对于任何复杂的逻辑，应当使用计算属性来实现。关键字：computed书写格式：和函数一样下面我们看一个案例，来区别表达式、函数和计算属性的使用。这里使用了三种方法去实现文字的逆序输出。最后实现的效果一样，这里只需要观察他们的区别就可以了。<div id="app"> <h1>...原创 2020-04-08 14:59:31 · 499 阅读 · 0 评论 -
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 · 238 阅读 · 0 评论 -
vue零基础学习（一）——我的第一个vue程序
在编写第一个vue程序之前先给大家讲解一些基本的知识点。常用指令：指令含义v-text把应用程序数据绑定到元素的更新元素的textContent（也可用过 {{}} 来实现）v-model把元素值（比如输入域的值）绑定到应用程序v-bind可以动态的绑定一个或多个属性到HTML元素上步骤使用vue库引入实例注意事项...原创 2020-03-29 17:10:49 · 285 阅读 · 0 评论 -
HTML+CSS制作登录界面+H5表单特性
首先，给大家看一下效果图。不过这里用到了一些H5表单的新特性，下面在来讲解。HTML5新增的表单属性autocomplete属性autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值:on: 表单有自动完成功能。...原创 2020-03-29 11:10:10 · 1854 阅读 · 0 评论 -
JS实现简单选项卡的切换
我们要实现的是单击一个按钮然后显示对于的内容。所以我们先设置4个按钮、4个存放的内容的div标记。先来看一下效果图。然后设置div的宽高属性；使用float属性使其处于同一行，并且要把4个div标记的display设置为none，然后再通过行内式设置第一个div的display为block，这怎么做的目的是实现当前页面只显示了一个盒子；最后还要设置一个avtive类，这个类实现的功能是当点击时...原创 2020-03-27 20:06:52 · 927 阅读 · 0 评论 -
HTMLtransform属性制作立方体
今天这个立方体主要是通过transform属性实现的，首先，我们先来看一下效果图。这个立方体主要是通过设置了6个div标记，然后通过设置他们的rotate属性来实现三维的效果。整个框架HTML部分这里是整个页面的框架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...原创 2020-03-25 22:33:51 · 613 阅读 · 0 评论 -
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 · 342 阅读 · 0 评论 -
CSS+HTML制作基本形状图案和动画
今天讲解一下如何制作一些基本形状，先放一张最后的效果图，然后下面一一地讲解。圆环是通过两个正圆，然后设置它的border-radius属性、背景色以及外边距来实现中心对齐。具体的代码如下：HTML部分<!-- 圆环 --> <div class="one"> <div class="one1"></div> <div c...原创 2020-03-21 10:41:28 · 1471 阅读 · 0 评论 -
HTML制作手机邮箱界面
HTML部分这一个页面没有用到太多新的知识。主要是通过fontawesome字体图标来实现。整个有页面分为6个部分，每一部分定义一栏信息，其中包括字体图标，文字以及右边的消息数量。消息数量主要是通过设置span元素的圆角来实现的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...原创 2020-03-15 23:24:04 · 4427 阅读 · 0 评论 -
HTML+CSS制作网页推广界面
今天这个网页，其实用以前的基本方法也可以做出来。在这里主要是用到了CSS3的新特性font-face以及fontawesome的应用。HTML部分这一部分的主要框架如下图：黑色的div里面存放的是英文。h3和p标记存放的相应的文字。紫色的div里面是存放的图标和文字，这里的图标不是插入的图片。是使用fontawesome完成的。通过设置边距来实现了四个图标的分布效果。下面是代码：<...原创 2020-03-15 18:39:53 · 3322 阅读 · 0 评论 -
HTML制作课程表界面
HTML部分由于我们做的是一个静态页面。所以在这里用到的只是简单的表格标记。然后通过设置其宽高，行列合并等属性实现课程表的排版。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="styleshe...原创 2020-03-12 15:27:29 · 2270 阅读 · 0 评论 -
HTML5语义化结构标签
结构元素标签名描述header元素HTML5中的header元素是一种引导和导航作用的结构元素，该元素可以包含通常放在页面头部的内容。nav元素用于定义导航链接，是HTML5的新增元素，该元素可以将具有导航性质的链接归纳在一个区域中navnavnav...原创 2020-03-02 22:43:53 · 579 阅读 · 0 评论 -
HTML代码制作html5图标
HTML部分这个图标全部是由div标记来实现的，首先定义了一个大的框架，然后在里面并列存放光束、盾牌、数字和HTML字样图片。光束是通过把div设置成长条的形状，然后复制多个，使用transform的rotate属性来实现旋转，最后实现光束的制作然后通过设置宽高和它们的位置来制作盾牌和数字5以及右边橘色部分。最后插入图片。<!DOCTYPE html><html> ...原创 2020-03-01 17:56:22 · 2604 阅读 · 0 评论 -
HTML表单（正则表达式验证）
HTML部分定义了一个9行3列的表格，通过部分行列的合并，然后将表单的input部件嵌入到表格的单元格中，然后设置单元格的宽高来实现表格的对齐。表单部件中使用了H5新增的颜色选择器color、设置日期data、电子邮件email和required等部件，使得输入更规范有效。<html> <head> <meta charset="utf-8" /> ...原创 2020-02-29 22:54:13 · 3992 阅读 · 0 评论 -
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 · 1778 阅读 · 0 评论