美文网首页前端
css 应用总结

css 应用总结

作者: 字字经心 | 来源:发表于2022-07-18 17:46 被阅读0次

css伪类

下面是自己使用过 伪类的几种场景

:last-child

利用 css:last-child,实现循环四个元素,每一个元素都有底边框,但最后一个元素没有

  1. 注意 xx:last-child 找到有共同父节点样式为xx 的元素
  2. 再选定最后一个元素,该元素必须处在最后一位,且不能有其他不相关元素

比如复杂一点的形式:

<view>
    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>

    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>

    <view class="xx">
        <text>tt</text>
        <view class='yy'>bb</view> 
    </view>
<view>

css 代码应该这样写,

.xx .yy {
    border: 1rpx solid #a7a7a7;
    border-width: 0 0 1rpx 0;
}

.xx:last-child .yy {
    border-width: 0;
}
:nth-child(3n+2)

利用 :nth-child(3n+2) 实现一个九宫格,用于展示图片。实现效果如下,

九宫格.png

页面利用flex 布局,标签代码

<view class='activities'>
    <view wx:for='{{starActivity}}' wx:key='postId' class='activity'>
        <image class='img-activity' src='xx' mode='aspectFill'></image>
        <xx></xx>
        <xx></xx>
    </view>
    
</view>
.activities {
    width: 750rpx;
    padding: 30rpx;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.activity {
    width: 32%;
    height: 226rpx;
    margin-bottom: 15rpx;
    border: 1rpx solid #eee;
    box-sizing: border-box;
}

.activity:nth-child(3n+2){
    margin-left: 15rpx;
    margin-right: 15rpx;
}

.activity .img-activity{
    width: 100%;
    height: 100%;
}

注意,img-activity 宽高设置为 100%,是指子元素 内容宽高==父元素 内容宽高,至于内容宽高指什么,是由box-sizing 值确定的(默认值 content-box)。

  1. box-sizing: border-box 设置的width/height == 内容宽高 + padding + border
  2. box-sizing: content-box 设置的width/height == 内容宽高

在这里 activity 的内容宽高 = wh - (padding + border), 所以img wh = 226rpx - 1rpx

css 动画

很多时候页面要添加动画,优化用户体验,可以利用css 语法支持实现。css 动画,不是瞬间变动,而是有个缓动效果,实现效果

animation1.gif

实现效果,需要在点击后给元素添加一个样式修饰,下次点击又重现效果,类似 xx:hover。微信小程序元素(view/button)的 hover-class 刚好支持。实现如下

<view class="action-sort-mount" hover-class='scale'>
    <image class="user-like img-WH" src="{{isLike?'/images/like_on.svg':'/images/like.svg'}}" />
    <text class='text1'>{{xx}}</text>
</view>

.scale {
    animation: 0.3s myScale;
}

@keyframes myScale {
    from {
        transform: scale(0.5, 0.5);
    }

    to {
        transform: scale(1, 1);
    }
}

transform: translate(x, y)

利用 transform: translate(x, y) 实现一张 图片在底下一张图片(宽高未知)居中的效果,

图片中心居中.png

步骤如下,

<view class='video-one-poster-icon'>
    <image class='video-one-activity' src='{{xx}}' mode="aspectFill"/>
    <view class='bg'></view>  
    <image class='video-icon' src='/images/video-icon.svg' />
</view>


.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.3;
}

.video-icon{
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

善于利用 transform 改变元素大小,移动位置。

css 加边框

利用css 给元素加上边框,可以利用下面两种方式实现

  1. border 属性,设定边框宽度,假设要实现上下边框
border: 1rpx solid rgba(0, 0, 0, 0.15);
border-width: 0rpx 0rpx 1rpx 0rpx;
  1. 设置 box-shadow , 阴影矩形会往上下移动 1rpx
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
<!-- 这个元素阴影盒子的偏移,正负含义类似 定位的left/top-->
box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

<!-- 把阴影延y 轴下移1rpx  -->
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15)

css 加蒙版

  1. 滤镜、透明度实现给元素加一层 蒙版
<!-- 透明度 -->
opacity: 0.7

<!-- 滤镜-->
filter: grayscale(50%)

这就是一些关于学习css 的体会,欢迎大家给我留言,提建议,指出错误,一起讨论学习技术的感受!

相关文章

  • css 应用总结

    css伪类 下面是自己使用过 伪类的几种场景 :last-child 利用 css:last-child,实现循环...

  • Vue中应用animate.css

    先看代码,如下: 总结:在Vue中应用animate.css需要使用enter-active-class,leav...

  • centos web应用 购物模版 全栈

    标题 这是一篇写给自己的总结web应用的笔记 内容包括nodejs的express框架,前端html的设计,css...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • HTML/CSS 06-元素类型

    css元素类型的分类,css 元素类型的转换,css float,css inline-block元素类型的应用 ...

  • CSS基础与选择器

    什么是 CSS CSS(Cascading Style Sheets) 是用来为网页添加样式的代码。 CSS 应用...

  • css应用

    1、 font-weight 属性 设置文本的粗细。 2、overflow 属性 设置溢出内容的显示方式,以及是否...

  • css reset 总结

    css reset 的总结

  • 8.21 C3选择器

    要点总结 与js有很多的共同之处,都是选择出满足各种条件的元素,不过一个是应用于 js 里,一个应用于 css 里...

  • CSS垂直水平居中总结

    css实现垂直水平居中的方法多种,各种方法各有优劣,查阅网上资料,自己总结于此,方便日后应用。 1. 绝对定位居中...

网友评论

    本文标题:css 应用总结

    本文链接:https://www.haomeiwen.com/subject/bchjirtx.html