自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(50)
  • 收藏
  • 关注

原创 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 组件基本原理详解

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;template

2018-11-05 17:42:16 2414 1

原创 vue 组件父子孙 三代传递 以及 子传父 孙传父

   &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;父子孙相互通信&lt;/title&gt; &lt;style&gt; td {

2018-11-05 17:36:20 5332 1

原创 vue watch 监听触发

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div id

2018-11-05 17:33:50 647

原创 vue 增删改

   &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;vue&lt;/title&gt; &lt;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 双向绑定 的一些列基础

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;vue&lt;/title&gt; &lt;script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js&quot

2018-11-05 17:29:43 4919

原创 vue + bootstrap 直接操作数据的列表清单的制作

  &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 基本的表格&lt;/title&gt; &lt;link rel="stylesheet" href="htt

2018-11-05 17:26:58 1223

原创 boortstrap 之 媒体查询 响应式功能 详解原理

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!--&lt;link rel="stylesheet" href

2018-11-05 17:17:56 243

原创 boortstrap 栅格系统 以及一些列响应式的尝试

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0

2018-11-05 17:15:43 164

原创 vue 生命周期详解

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; &lt;/style&gt;&

2018-11-05 17:10:19 201

原创 地图引入方式

&lt;div class="bottom"&gt; &lt;div style="width:100%;height:300px;border:#ccc solid 1px;font-size:12px" id="map"&gt;&lt;/div&gt;&lt;/div&gt;&lt;script type="text/javascript&quot

2018-10-15 11:25:21 406

原创 七个音符 的引入方式 声音的引入方法

 &lt;footer&gt; &lt;ul class="foot"&gt; &lt;li&gt;&lt;section&gt;哆&lt;/section&gt;&lt;/li&gt; &lt;li&gt;&lt;section&gt;来&lt;/section&gt;&lt;/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的,梦幻西游电视剧的链接地址

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jque

2018-10-15 10:53:19 1930

原创 3D 立体感 轮播图 翻转效果,更好的视觉效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ position: relati

2018-10-15 10:44:03 2653 1

原创 华丽遮罩层,鼠标哪里移入,遮罩层从哪里展开,从哪里移出,遮罩层从哪里开始移出

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery

2018-10-15 10:37:54 322

原创 背景图定位实现视觉错屏效果,一般人都不知道的效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ margin:

2018-10-15 10:35:16 537

原创 jq 实现无线图片加载瀑布流 自适应窗口大小变化,json接口读取数据

 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/j

2018-10-15 10:30:20 360

原创 自写梦幻西游人物介绍 手风琴效果套用手风琴效果,json动态添加html内容

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jque

2018-10-15 10:24:23 347

原创 垂直轮播翻页轮播

 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ margin: 0; pad

2018-08-03 09:03:36 361

原创 a 标签跳转轮播 css写成的轮播

   &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #links&gt;a{

2018-08-03 09:01:45 769

原创 弹性布局 display:flex

 弹性布局底层源于浮动 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Document&lt;/title&gt;    &lt;style&gt;        .box{ 

2018-08-03 08:56:44 70

原创 缓慢平移轮播

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ position: absolute; to

2018-08-03 08:51:27 365

转载 数组构成的轮播

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css"&gt;body

2018-08-03 08:48:06 370

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除