CSS整理，自己碰到的一些例子

最新推荐文章于 2024-04-19 05:48:47 发布

黑胡子大叔的小屋

最新推荐文章于 2024-04-19 05:48:47 发布

阅读量148

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/111360695

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

这里写目录标题

- 例子
- - 例子一
  - JS实现累加的效果

例子

例子一

<template>
    <div class="nav-frame">
        <!-- 封装一个导航组件，用在搜索功能的导航栏处 -->
        <!-- <ul>
            <li v-for="(item,index) in title" :key="index">{{item}}</li>
        </ul> -->
        <div v-for="(item,index) in title" :key="index" :class="{active:index===ActiveIndex}" @click="ChangeIndex(index)" class="nav-frame-item">
            <div class="nav-item">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"NavFrame",
    props:{
        title:[]
    },
    data(){
        return{
            ActiveIndex:0
        }
    },
    methods:{
        ChangeIndex(index){
            this.ActiveIndex=index
        }
    }
}
</script>
<style scoped>
.nav-frame{
    background:#e5e4e2;
    display: flex;
    height: 50px;
    border-top: 2px #bbbcbc solid;
    border-right: 1px #bbbcbc solid;
    border-left: 1px #bbbcbc solid;
}

.nav-frame-item{
    float: left;
    flex: 1;
    border-bottom: 1px #bbbcbc solid;
}

.nav-frame-item:hover{
    border-top: 3px #c20c0c solid;
}

.nav-item{
    padding: 12px;
}
.active{
    border-top: 3px #c20c0c solid;
    border-right: 1px #bbbcbc solid;
    border-left: 1px #bbbcbc solid;
    border-bottom: 1px #ffffff00 solid;
}
</style>

发现

.class-item>div{
}
这种的优先级要比直接用获取class的方式优先级要高
我在动态赋值 active（class）时发现会先用class>div中的重名样式

在这里插入图片描述

<template>
    <div class="nav-frame">
        <!-- 封装一个导航组件，用在搜索功能的导航栏处 -->
        <!-- <ul>
            <li v-for="(item,index) in title" :key="index">{{item}}</li>
        </ul> -->
        <div v-for="(item,index) in title" :key="index" :class="{active:index===ActiveIndex}" @click="ChangeIndex(index)" class="nav-frame-item">
            <div class="nav-item">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"NavFrame",
    props:{
        title:[]
    },
    data(){
        return{
            ActiveIndex:0
        }
    },
    methods:{
        ChangeIndex(index){
            this.ActiveIndex=index
        }
    }
}
</script>
<style scoped>
.nav-frame{
    background:#e5e4e2;
    display: flex;
    height: 50px;
    border-top: 2px #bbbcbc solid;
    border-right: 1px #bbbcbc solid;
    border-left: 1px #bbbcbc solid;
}

.nav-frame-item{
    float: left;
    flex: 1;
    border-bottom: 1px #bbbcbc solid;
}

.nav-frame-item:hover{
    border-top: 3px #c20c0c solid;
}

.nav-item{
    padding: 12px;
}
.active{
    border-top: 3px #c20c0c solid;
    border-right: 1px #bbbcbc solid;
    border-left: 1px #bbbcbc solid;
    border-bottom: 1px #ffffff00 solid;
}
</style>

在这里插入图片描述

JS实现累加的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js实现数字动态递增效果</title>
</head>
<body>
    <span id="span1">0</span>
    <script>
    //调用方法
    NumDynamic("span1",10,100);
    /**
    * 动态数字方法
    * ID    => 对应ID
    * speed => 递增速度 
    * value => 接入的数字
    */
    function NumDynamic(ID,speed,value){
    	var span1 = document.getElementById(ID);
    	if(value>0){
	    	var num = 0;
	        var t = setInterval(function(){
		       num++;
		       span1.innerText = num;
			        if(num==value){
			        	clearInterval(t);
			        }       
	        },speed);
    	}else{
    		span1.innerText = value;
    	}
    }	
	</script>
</body>
</html>

黑胡子大叔的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS整理，自己碰到的一些例子

例子例子一<template> <div class="nav-frame">   <div
复制链接

扫一扫