- 博客(7)
- 收藏
- 关注
RSS订阅原创 css高级技巧
1. 黑白图像这段代码会让你的彩色照片显示黑白照片。img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}2.使用 :not() 在菜单上应用/取消应用边框该代码用在导航菜单非常的实用。先
2020-07-06 16:40:37
272
原创 css:精灵图,滑动门,三角形
sprites（精灵图）1.概念CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。2.优点（1）减少图片的字节。（2）减少网页的http请求，从而大大的提高页面的性能。（3）解决了网页设计师在图片命名上的困扰，只需对
2020-07-06 16:03:35
201
原创 css常用选择器
1.普通选择器（重点）.class 类选择器#id id选择器element 标签选择器2.复合选择器2.1 后代选择器（重点）作用：用于选择元素内部的元素（匹配的元素可以是祖先元素的孩子，孙子，曾孙等等）.class p{} /*空格*/2.2 子选择器作用：用于选择某元素的子元素（亲儿子）.class>p{} /*>大于号*/2.3 组选择器（重点）作用：用于选取第一个指定的元素之后(不是内部)紧跟的元素
2020-07-05 12:19:04
189
原创 小程序scroll-view做商品页面
第一：wxml先把页面分成左右两部分，左边部分为商品分类，右边为每个商品类别的相关商品<view class="cates"> <SearchInput></SearchInput> // 此为我自定义组件，为一个搜索框 <view class="cates_container"> <scroll-view scroll-with-animation="{{true}}" scroll-y="{{true}}" c
2020-07-04 17:13:36
369
原创 flex的常见知识点：flex:1
首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：.item {flex: 2333 3222 234px;}.item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px;}当 flex 取值为 n
2020-07-04 17:11:02
1125
原创 css常见布局解决方案
1. 水平居中布局<div class="parent"> <div class="center"></div></div>1.margin+定宽.center{ width: 100px; margin: 0 auto;}2.table+margin.center{ display: table; margin: 0 auto;}3.text-align+inline-block.parent{ text
2020-07-04 16:59:52
139
原创 微信小程序自定义swiper组件
自定义指示点swiper组件一般结构为<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item> <view class="swiper-item
2020-06-14 11:05:15
817
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人