vue基础教学（11）

I`ivresse

于 2022-06-09 19:38:11 发布

阅读量143

点赞数 2

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/Taojia9958/article/details/125209709

版权

本文主要介绍了在Vue.js中进行京东插槽的实践操作，通过实例详细讲解了插槽的使用方法和技巧，适合Vue初学者巩固基础知识。

摘要由CSDN通过智能技术生成

京东插槽练习

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		*{
			margin: 0px;
			padding: 0px;
		}
		div{
			display: inline-block;
		}
        .bk{
            background-color: #A9054A;
			width: 380px;
			height: 40px;
			line-height: 40px;
			padding: 8px 10px;
			box-sizing: border-box;
			position: absolute;
        }
		.list{
			width: 25px;
			padding-bottom: 3px;
		}
		.bk .tilte{
			background-color: #fff;
			width: 260px;
			height: 30px;
			margin:0px 15px;
			border-radius: 30px;
			color: darkgray;
			padding: 0px 15px;
			box-sizing: border-box;
			position: relative;
			position: absolute;
			top:5px;
		}
		.bk .tilte img{
			width: 20px;
		}
		.bk .tilte img:nth-child(1){
			padding