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 应用
---------------------------------------------------------------------------------
选择目标 ---- 添加入库 ---- 购物车添加进项目 ---- 下载到本地
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>
选择 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,两翼自适应
浮动不会超越上一个块级元素
padding 和 border 实现 导航距离分割线 --------自认为不大好,建议 | 直接 li 包裹使用,然后加 padding
---------------------------------------------------------------------------------
轮播图 https://www.swiper.com.cn/usage/index.html
下载 css 和 js 并引入,即可使用
-
<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>
---------------------------------------------------------------------------------
所有评论(0)