- 博客(7)
- 收藏
- 关注
原创 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关注的人