stylus

  • 兼容 less 的大部分语法
  • <link rel="stylesheet" href="stylus/index.css">
  • less 语法 省略 {}
  • 缩进 分割语法块
  • 分号 , 冒号 可以省略
  • 变量使用方式: 不识别 @height: 40px,而是 $height=40px
  • 父级引用器: &
  • 混合 mixins.styl :
  • less:

.line-height(@h){

height: @h

line-height: @h

}

---------------------------------------------------

@import "mixins.styl"

  • stylus:

line-height(h){

height h

line-height h

}

---------------------------------------------------

@import "mixins.styl"

line-height(41px)

  • a

---------------------------------------------------------------------------------

npm install -g stylus

文件后缀: index.styl

stylus 自动编译

File - settings - Tools - file Watchers

点击 +

选择 stylus ,直接 ok 应用

---------------------------------------------------------------------------------

iconfont

选择目标 ---- 添加入库 ---- 购物车添加进项目 ---- 下载到本地

UI会直接给 .eot .svg .ttf .woff .woff2 ---- 查看说明书使用 demo_index.html

将 iconfont.css 放到 项目的 css 文件夹中,引入 css 后直接使用就好 <link >

  • 使用方式一 ---- unicode 只支持单色 引用 兼容到 ie6

<i class="iconfont"></i>

  • 使用方式二 ---- font-class 引用兼容到 ie8

<i class="iconfont"></i>

  • 使用方式三 ---- 引入 js/iconfont.js ---- 引入通用 css 代码

<svg class="icon" aria-hidden="true"></svg>

自制字体图标 https://icomoon.io

选择 svg 生成字体GrnerateSVG&More

修改

下载

保存 font 文件,引入 css 文件

  • 使用方式一 类引用: <i class="icon-search"></i>
  • 使用方式二 Unicode 引用: <i class="icon-"></i>

上线使用:

引入在线 css 链接

<link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css">

---------------------------------------------------------------------------------

<header>

版芯固定 1190px / 1226px,两翼自适应

浮动不会超越上一个块级元素

paddingborder 实现 导航距离分割线 --------自认为不大好,建议 | 直接 li 包裹使用,然后加 padding

---------------------------------------------------------------------------------

轮播图 https://www.swiper.com.cn/usage/index.html

下载 css 和 js 并引入,即可使用

vue 中使用 swiper

  • <template>
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(i,index) in imgNodes" :key="index">
    <img :src="i" :alt="i">
    </div>
    </div>
    <div class="swiper-pagination"></div>
    </div>
    </template> <script>
    import "../../common/swiper/swiper.css"
    import Swiper from "swiper" export default {
    name: 'KJFSwiper',
    data () {
    return {
    imgNodes: ['https://yanxuan.nosdn.127.net/bec4a597a9aed55605eeb7c0c7710f9b.jpg?imageView&quality=75&thumbnail=750x0',
    'https://yanxuan.nosdn.127.net/981c28d7f7276a2c84bf8c7790a9b559.jpg?imageView&quality=75&thumbnail=750x0',
    'https://yanxuan.nosdn.127.net/feadfbdcc0e2dea285d92c6740d46c66.jpg?imageView&quality=75&thumbnail=750x0',
    'https://yanxuan.nosdn.127.net/791dda3ae432212164b1668b25fbd11c.jpg?imageView&quality=75&thumbnail=750x0',
    'https://yanxuan.nosdn.127.net/5afff79cb85dfcd465e6da0d8404ddae.jpg?imageView&quality=75&thumbnail=750x0'
    ]
    }
    },
    mounted() {
    new Swiper('.swiper-container', {
    autoplay: true,//可选选项,自动滑动
    loop: true,
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    },
    })
    }
    }
    </script> <style lang="stylus" rel="stylesheet/stylus" scoped>
    .swiper-container
    width 100%
    height 4.9rem
    .swiper-slide
    position relative
    img
    width 100%
    height auto
    position absolute
    left 0
    top 50%
    transform: translateY(-50%);
    .swiper-pagination-bullets
    bottom 0.5rem
    .swiper-pagination-bullet
    width .5rem
    height .08rem
    border-radius .1rem
    .swiper-pagination-bullet-active
    background white
    </style>

---------------------------------------------------------------------------------

vue 项目界面绘制_stylus_iconfont_swiper的更多相关文章

  1. 使用BootstrapVue相关组件,构建Vue项目界面

    基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了.Bootst ...

  2. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  3. 【View层】界面绘制

    [引用]:http://www.jianshu.com/p/c5fc8c6b967a [View层]IOS纯代码绘制界面(一) 字数2303 阅读385 评论2 喜欢16 IOS开发中界面绘制占据了绝 ...

  4. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

  5. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  6. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  7. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  8. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  9. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

随机推荐

  1. [再寄小读者之数学篇](2014-10-18 利用 Lagrange 中值定理求极限)

    试求 $$\bex \vlm{n}n^2\sex{x^\frac{1}{n}-x^\frac{1}{n+1}},\quad x>0. \eex$$ 解答: $$\beex \bea \mbox{ ...

  2. APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows

    APPLE-SA-2019-3-25-5 iTunes 12.9.4 for Windows iTunes 12.9.4 for Windows is now available and addres ...

  3. 2.9 while循环

    while循环 <1>while循环的格式 while 条件: 条件满足时,做的事情1 条件满足时,做的事情2 条件满足时,做的事情3 ...(省略)... demo i = 0 whil ...

  4. Leetcode#88. Merge Sorted Array(合并两个有序数组)

    题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...

  5. 第四节,目标检测---YOLO系列

    1.R-CNN回顾 适应全卷积化CNN结构,提出全卷积化设计 共享ResNet的所有卷积层 引入变换敏感性(Translation variance) 位置敏感分值图(Position-sensiti ...

  6. Django之分页

    需要知道:每页多少条数据.一共多少条数据.一共需要多少页.每页从哪开始到哪结束 注意问题:1.用户输入页码为非数字.  2.用户输入页码超出页码范围 def books(request): try: ...

  7. 易度文档管理系统--http://www.everydo.com/

    易度文档管理系统--http://www.everydo.com/ 公司工程技术部门需要,暂收藏.

  8. AngularJS初识

     AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

  9. Jupyter Notebook启动不会自动打开浏览器,每次都要自己打开浏览器输入网址

    今天在使用jupyter 时,已启动服务,但每次都需要手动去浏览器 输入网址才可以, 最好找了好久才解决了. 去cmd 命令窗口执行jupyter notebook --generate-config ...

  10. Spring 源码分析-1-启动

    Spring 源码分析-1-启动 在web项目中使用spring的时候,我们会在web.xml中加入如下配置: <listener> <listener-class>org.s ...