- 博客(50)
- 收藏
- 关注
RSS订阅原创 vue3.0迅速安装 scss
创建：//安装vue官方命令行工具npm insatll --global @vue/cli//创建项目vue create vue-ts-demoscssnpm install sass-loader@7.3.1 --save-dev //安装sass-loadernpm install node-sass@4.14.1 //安装node-loadernpm install style-loader --save-dev
2021-07-16 13:48:53
171
原创 完美的头部导航 底边宽度固定并且挪动
<template> <div class="page"> <div class="nav-tabs-container"> <div class="bottom-line" :style="{transform:`translateX(${barStyle}px)`}"/> <div class="tab-text" v-for="(item,index) in arrData" @cl...
2021-04-30 03:56:34
303
原创 pc 底边 动态挪动 导航栏
底边动态左右挪动效果 element 插件<el-tabs v-model="activeName"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="角色管理" name="thi...
2021-03-24 00:10:18
126
原创 2021-03-23
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> #head{ height: 64px; background: #fff; border-bottom: #E8E8E8 solid 1px; .
2021-03-23 18:24:18
91
原创 css 共用样式 模板
uni-button:after { border:none;}.page,uni-page-wrapper,page{ background: #F7F7F7;}.flex{display: flex;}.flex.space{justify-content: space-between;}.flex.center{justify-content: center;}.flex.alcenter{align-items: center;}.flex.alend{align-...
2020-08-28 17:23:49
609
翻译 html命名规范
default/index.html 首页 404.html 404错误页 print.html 打印页 header.html 页头 footer.html 页脚 sitemap.html 网站地图 passport.html 通行证 rank.html 排行榜 roll.html 滚动新闻...
2020-06-19 16:42:27
112
翻译 前端css 命名规范
(1)页面结构- 容器: container- 页头：header- 内容：content/container- 页面主体：main- 页尾：footer- 导航：nav- 侧栏：sidebar- 栏目：column- 页面外围控制整体布局宽度：wrapper- 左右中：left right center(2)导航- 导航：nav- 主导航：mainbav- 子导航：subnav- 顶导航：topnav- 边导航：sidebar- 左导航：leftsidebar-
2020-06-19 16:41:42
121
翻译 affter before 的使用列子
<style> body{padding:100px;} .box{width:200px; height:100px; background:#777; line-height:100px; text-align:center;} a{position:relative;text-decoration:none; display:inline-block; width:100px; height:30px; background:gre...
2020-06-17 11:10:09
251
原创 tabs 底部小短线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style: none; float: left; list-style: none; ...
2020-06-17 10:59:48
550
翻译 小程序 商品搜索
<view class="SearchBox"><view class="Search_input_top_box"><view class="Search_ico_box"><image class="Search_ico" src="../../images/home_icon_search_nor@2x.png"&g...
2019-07-31 15:59:01
520
翻译 多商品倒计时
<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">剩余<text class='tui-conutdown-box'>{{item.day}}</text>天<text class='tui-conutdow...
2019-07-29 17:38:28
276
转载 小程序 购物车 多个店铺
<view class='cartallview'><view class="cart-box" wx:for="{{cartsdata}}" wx:key="{{index}}" wx:for-index="idx"> <!-- wx:for 购物车信息列表 头部商家名称 --> <view class='storehed...
2019-06-29 09:54:45
2466
2
转载 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现
<view class="container"><!-- tab导航栏 --><!-- scroll-left属性可以控制滚动条位置 --><!-- scroll-with-animation滚动添加动画过渡 --><scroll-view scroll-x="true" class="nav" scroll-left...
2019-06-19 15:49:13
1794
翻译 小程序 swiper 自适应高度
<view class='swiper'><swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchang...
2019-06-19 14:00:54
1323
1
翻译 小程序 瀑布流
<view style="display:none"><image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image></view><scroll-view scroll-y...
2019-06-19 11:33:36
393
转载 小程序 swiper
w'x'm'l<scroll-view scroll-x="true" class="weui-navbar"><block wx:for-items="{{tabs}}"><view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindta...
2019-06-19 11:14:15
159
原创 安装脚手架
vue-cli的安装：1、推荐环境： node.js 8.10以上 （能用node -v 检测版本） npm最新版本 （能用npm -v 检测版本）2、卸载旧版本（1.x或2.x） npm uninstall vue-cli -g3、安装3.X版本 npm install -g @vue/cli-init （可用vue...
2018-11-06 14:41:03
606
原创 vue 组件基本原理详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><template
2018-11-05 17:42:16
2414
1
原创 vue 组件父子孙 三代传递 以及 子传父 孙传父
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子孙相互通信</title> <style> td {
2018-11-05 17:36:20
5332
1
原创 vue watch 监听触发
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id
2018-11-05 17:33:50
647
原创 vue 增删改
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.
2018-11-05 17:32:39
157
原创 vue 的 v-for 循环 v-if 判断 v-model 双向绑定 的一些列基础
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"
2018-11-05 17:29:43
4919
原创 vue + bootstrap 直接操作数据的列表清单的制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 基本的表格</title> <link rel="stylesheet" href="htt
2018-11-05 17:26:58
1223
原创 boortstrap 之 媒体查询 响应式功能 详解原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" href
2018-11-05 17:17:56
243
原创 boortstrap 栅格系统 以及一些列响应式的尝试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0
2018-11-05 17:15:43
164
原创 vue 生命周期详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style>&
2018-11-05 17:10:19
201
原创 地图引入方式
<div class="bottom"> <div style="width:100%;height:300px;border:#ccc solid 1px;font-size:12px" id="map"></div></div><script type="text/javascript"
2018-10-15 11:25:21
406
原创 七个音符 的引入方式 声音的引入方法
<footer> <ul class="foot"> <li><section>哆</section></li> <li><section>来</section></li&
2018-10-15 11:19:34
765
原创 ajax 原生代码 已封装get,post,封装 附加 Promise 如何请求数据 详解
function ajax(method, url, data) { var xhr = null; if (XMLHttpRequest) { xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject("Microsoft.XMLHTTP") } if (met...
2018-10-15 11:08:13
498
原创 网页添加电视剧，52集梦幻西游连续剧，json动态添加视频地址，tabre切换内套用tabre切换功能， 外加json的，梦幻西游电视剧的链接地址
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jque
2018-10-15 10:53:19
1930
原创 3D 立体感 轮播图 翻转效果，更好的视觉效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ position: relati
2018-10-15 10:44:03
2653
1
原创 华丽遮罩层，鼠标哪里移入，遮罩层从哪里展开，从哪里移出，遮罩层从哪里开始移出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery
2018-10-15 10:37:54
322
原创 背景图定位实现视觉错屏效果，一般人都不知道的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:
2018-10-15 10:35:16
537
原创 jq 实现无线图片加载瀑布流 自适应窗口大小变化，json接口读取数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/j
2018-10-15 10:30:20
360
原创 自写梦幻西游人物介绍 手风琴效果套用手风琴效果，json动态添加html内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jque
2018-10-15 10:24:23
347
原创 垂直轮播翻页轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; pad
2018-08-03 09:03:36
361
原创 a 标签跳转轮播 css写成的轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #links>a{
2018-08-03 09:01:45
769
原创 弹性布局 display:flex
弹性布局底层源于浮动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{
2018-08-03 08:56:44
70
原创 缓慢平移轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ position: absolute; to
2018-08-03 08:51:27
365
转载 数组构成的轮播
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style type="text/css">body
2018-08-03 08:48:06
370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人