h5
关注
分享
扫一扫
xqiitan
前端菜鸟，多多指教
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue使用小细节点
动态class绑定：<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index" @click="setTheme(index)"> <div class="preview" :style="{background: item.style.body.backgro...原创 2019-07-16 16:04:24 · 176 阅读 · 0 评论 -
JavaScript 实现快速回到顶部（仿淘宝页面）
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript 回到顶部效果</title> <link rel="stylesheet" type="text/css" href="st...原创 2019-03-29 14:35:17 · 1706 阅读 · 0 评论 -
垂直菜单的实现（使用hovor+无序列表）
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title>...原创 2019-03-25 17:32:43 · 852 阅读 · 0 评论 -
flex综合 应用，制作携程旅游，主页面效果。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>携程网Demo</title> <style type="text/css"> * { padding: 0; marg原创 2019-03-13 16:31:08 · 648 阅读 · 0 评论 -
伸缩盒子案例：宽高自动适应
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>伸缩盒子案例：宽高自动适应</title> <style> * { padding: 0; margin: 0; } .layo原创 2019-03-13 14:56:30 · 1389 阅读 · 0 评论 -
flex 伸缩盒子，使用范例（子元素在侧轴对齐方式align-items；单个元素，在侧轴对齐方式align-self）
根据服务器返回条目，N个菜单平分标题栏宽度。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex：伸缩菜单</title> <style> * { margin: 0; padd原创 2019-03-13 13:46:11 · 1538 阅读 · 0 评论 -
flex 伸缩布局：
伸缩布局传统的布局方案，基于盒状模型，依赖display+position+float属性。它对于那些特殊布局非常不方便，重要属性：display:flex 如果一个容器设置了这个属性，那么这个盒子里面的所有直接元素都会自动变成伸缩项flexjustify-content:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。语法：justify-content:flex-start|...原创 2019-03-13 13:26:45 · 389 阅读 · 0 评论 -
布局:伸缩盒子flex(display: flex justify-content flex-flow flex-direction)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>布局:伸缩盒子flex</title> <style> * { margin: 0; padding: 0; } .box {原创 2019-03-12 18:03:18 · 1363 阅读 · 0 评论 -
column 实现多列布局
多列布局，常用属性：column-count:设置列的具体个数column-width:控制列的宽度column-gap:两列之间的缝隙间隙column-rule:规定列之间的宽度，样式和颜色column-span:规定元素应横跨多少列（n指定跨n列，all跨所有列）<!DOCTYPE html><html> <head> <m...原创 2019-03-12 16:53:31 · 1025 阅读 · 0 评论 -
字体图标的使用，伪元素的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>字体图标的使用、伪元素content的使用</title> <style> .myFont{ font-family: iconfont; }原创 2019-03-12 16:34:16 · 2011 阅读 · 0 评论 -
动画实现始终效果案例（动画的使用，居中的使用）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>时钟案例</title> <style type="text/css"> * { padding: 0; margin:原创 2019-03-11 16:37:04 · 593 阅读 · 0 评论 -
前端开发，细节小点。
*多列布局的实现1列：直接流的形式（上、中、下）2列：使用浮动float：left/right 的形式3列：使用定位：中间div使用margin值设置。.left{width:200px;height:500px;background:#ccc;position:absolute; top:0；left:0;}.middle{width:200px;height:500px;backgro...原创 2019-03-26 13:59:09 · 225 阅读 · 1 评论 -
新手引导页，实现效果。https://www.imooc.com/video/167
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{ margin:0; padding:0}html{ height:100%}body{ background:url...原创 2019-03-26 16:16:59 · 1311 阅读 · 0 评论 -
字体图标的使用
字体图标生成：1、iconfont网站下载svg图片，2、登录iconMoon，选择IcoMoon App，新建一个新的图标集合（修改集合名字）; Import Icons,选择要导入的svg文件。选中导入的所有图标。 点击[Generate Font]， 点击[Download]下载字体图标，下载后是zip包的形式。3、解压压缩包，4、集成图标： 拷贝fonts...原创 2019-07-16 10:48:54 · 200 阅读 · 0 评论 -
Vuex介绍（状态管理模式）
常用调试：console.log, alert()阻塞的行为, debugger断点调试-多个视图依赖同一个状态（eg：菜单导航）-来自不同视图的行为需要变更同一状态store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ sta...翻译 2019-07-15 15:51:11 · 175 阅读 · 0 评论 -
Get全栈技能点Vue2.0/Node.js/MongoDB打造商城系统
基础学习：视图层： 商品列表，购物车，地址列表，商品结算，订单成功组件列表： 公共组件，VueResource，Vue-Router，Axios，Vuex，Util，依赖，Vue.js-MVVM后端：Node，Express数据库：MongoDB1、基于MV*模式的vue框架。 model绑定View 没有控制器的概念 数据驱动，状态管理。...原创 2019-07-09 14:35:25 · 350 阅读 · 0 评论 -
给页面列表，动态添加元素的例子
实现网页留言功能，点击确定按钮，把输入框的内容添加到留言列表中。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ ...原创 2019-05-09 18:26:15 · 691 阅读 · 0 评论 -
列表开发
给列表添加span，设置列表内容的图标。ul li span{width:20px; height:20px; background:#f93; display:inline-block;text-align:center; line-height:20px;}内连元素，要想设置width、height、需要设置display:inline-block.<li><spa...原创 2019-05-06 15:40:37 · 265 阅读 · 0 评论 -
人人网，评论，点赞效果实现。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .con { width: 200px; ...原创 2019-04-25 11:22:04 · 1021 阅读 · 2 评论 -
使用精灵图，实现分页导航UI
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>分页页码的制作</title> <style> .page_normal { color: #ff6500; text-align: center; ...原创 2019-03-29 11:45:33 · 805 阅读 · 0 评论 -
鼠标滑过，二级菜单显示
使用css方式，实现菜单效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l...原创 2019-04-02 13:30:45 · 3525 阅读 · 3 评论 -
jd 收起与展开效果。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展开与收起效果</title> <style type="text/css"> body { margin: 0 auto; padding: 0;...原创 2019-04-01 17:43:05 · 303 阅读 · 0 评论 -
Cookie读取操作。
cookie的读取操作//读取操作,获取www.baidu.comvar res = document.cookie.substring(5);if(res！= "www.baidu.com") { // 显示新手引导层 // 添加cookie var oDate = new Date(); oDate.setDate(oDate.getDate() + 30...原创 2019-03-26 16:53:06 · 361 阅读 · 0 评论 -
动画的创建、常见属性
过渡：从一个状态到另外一个状态。动画：可以添加多个关键帧。<html> <head> <meta charset="utf-8"> <title>动画的实现：keyframes</title> <style> * { padding: 0; margin: 0; }原创 2019-03-11 16:12:14 · 263 阅读 · 0 评论 -
立方体,生成6个面，修改透视、俯视角度
透视/景深效果a) perspective(length)为一个元素设置三位透视的距离。仅作用于元素的后代，而不是元素本身。当perspective：none/0时，相当于没有设置perspective。比如你要建立一个立方体，长宽高都是200px，如果你的perspective<200px,那就相当于站在盒子里面看的结果，如果perspective非常大，那就相当于站在非常远的地方看，...原创 2019-03-11 13:33:51 · 2221 阅读 · 0 评论 -
伪类选择器：相对于父元素的伪类
伪类选择器：选择某些元素更加方便（是否添加了 type，last）a）之前学习的：a:hovar a:link a:active a:vistedb）以某元素相对于其父元素 或 兄弟元素的位置来获取元素的 结构伪类。 E:first-child: 查找E这个元素的父元素的第一个子元素E E:last-child: 查找最后一个元素 E:nth-chil...原创 2019-03-06 16:25:24 · 2506 阅读 · 0 评论 -
属性选择器，兄弟伪类选择器，
属性选择器，通过属性，来选择对应的标签，并设置相应的css样式。/* 属性选择器：属性是相对于标签而言。所谓的属性选择器，就是根据指定名称的值来查找元素 a) E[attr],表示存在attr属性的E标签； div[class] b) E[attr=val],表示属性值完全等于val；div[class=mydemo] c...原创 2019-03-06 15:13:08 · 977 阅读 · 0 评论 -
三维3d移动，旋转，缩放
3D动画实现。1、3D移动translate3d(x,y,z),使元素在这三个维度中移动，也可以分开写。translateX(x), translateY(y), translateZ(z). transform:translateX(100px); // X轴移动2、3D缩放scale3d(number, number, number), 也可以分开写：scaleX(), ...原创 2019-03-08 17:04:19 · 681 阅读 · 0 评论 -
使用transfrom实现元素居中显示，行级元素，块级元素居中显示。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>transform: 实现任意元素居中</title> <!-- 行级元素：text-align：center 块级元素：margin:0 auto; -->原创 2019-03-08 16:32:34 · 860 阅读 · 0 评论 -
transform-origin,多个动画放一起执行
/* 旋转 */div:nth-of-type(3):active { /* 设置旋转轴心origin： 1.x,y 2.关键字：left，top，right，bottom，center*/ /* transform-origin: right top; transform:rotate(150deg); */}div:nth-of-type(3):active { /* ...原创 2019-03-08 16:03:45 · 1164 阅读 · 0 评论 -
获取元素，类名操作，自定义属性
1- 获取元素document.getElementsByClassName('class'); 通过类名获取元素，以类伪数组形式存在。 下标是从0开始的。document.getElementById('id'); id具有唯一性。document.querySelector('selector') 通过css样式选择器，来获取元素。 获取的是符合条件（选择器）的的第1个元...原创 2019-03-02 16:59:59 · 3964 阅读 · 0 评论 -
HTML5 语义化标签
HTML5 定义了一系列新元素，还提供了一系列JavaScript API，如地理定位、重力感应、硬件访问等。同事结合css3的过渡、转换、动画等特性，可以增强用户体验，提升开发功能的可应用性。HTML5在语法规范上：更简洁，更宽松。语义化标签：使用方法与普通标签一样，只是体现语义。header、footer、nav导航、article文章、section区块、aside侧边栏，fi...原创 2019-03-01 14:03:28 · 208 阅读 · 0 评论 -
音频，视频的使用
<body> <!--embed:直接插入视频文件：本质是调用本机上已经安装的软件，有兼容性flash插件：安装flash，audio音频： src：文件路径，controls显示控制器，autoplay自动播放，loop循环video视频： src，controls，autoplay，loop，width宽度，height高度， poster当前视频默认显示...原创 2019-02-17 13:59:25 · 187 阅读 · 0 评论 -
新增表单事件
<html><head> <meta charset="utf-8"> <title>表单新增事件</title></head><body><form action=""> 用户名：<input type="原创 2019-02-17 11:29:21 · 200 阅读 · 0 评论 -
表单form新增的type属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单新增的type属性</title> </head> <body> <form action="test原创 2019-02-16 16:48:47 · 3276 阅读 · 0 评论 -
伪元素选择器（隐形的翅膀 选择器）
伪元素选择器：（虚假的元素，一对隐形的翅膀）A 重点：E::before/ E::after 1- 是一个行内元素，如果想设置宽高则需要转换成块： display:block float:* position: 2- 必须添加content，哪怕不设置内容，也需要content:"" 3- E:after/E:before 在旧版本里是伪元素，...原创 2019-03-06 17:53:40 · 288 阅读 · 0 评论 -
获取页面元素的方法。querySelector，querySelectorAll
<ul> <li>请选择</li> <li class="red">前00232323端</li> <li class="green">后4444端</li> <li class="blue">P5555HP&l原创 2019-02-27 16:39:15 · 4824 阅读 · 0 评论 -
transfrom：移动、缩放、旋转、斜切
CSS3中的transfrom属性，能够对元素进行移动、缩放、旋转、斜切等操作。translate移动：translate(tx) | translate(tx, ty) translateX(tx), translateY(ty)如果只有个参数，就代表x方向；如果有2个参数，就代表x和y方向。scale缩放：让元素根据中心原点对对象 进行缩放。默认值1如果值在0.01-0.9...原创 2019-03-07 17:46:09 · 2760 阅读 · 0 评论 -
transition 过渡效果
过渡效果 只针对特定的数值有效，针对某些属性值（block），是无效的。过渡：可以在不适用flash动画或JavaScript的情况下，当元素从1中样式变化成另一种样式时，为元素添加效果。要实现这一点，必须规定两项内容：1.规定希望把效果添加到那个css属性上，2.规定效果的时长。语法：transition:property |duration |timing-function |de...原创 2019-03-07 17:03:08 · 1284 阅读 · 0 评论 -
HTML5，图片边框，.9效果处理
图片边框背景，九宫格效果裁剪。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>边框图片的本质是背景，并不会影响元素内容的放置，类似九宫格效果，9个位置 一一对应</title> <style type="te原创 2019-03-07 14:10:44 · 6399 阅读 · 2 评论