Dcloud 全栈之旅1-2 组件属性-class

     组件属性 class 样式实现

  上一篇我们讲了怎么在界面实现一个功能 比如button 按钮 图片 视频地图。但是没有具体样式，比如颜色 样式，这一篇我们讲解怎么用组件的属性功能  其中之一class 功能实现。

    我们还是用上一个连载的button按钮来举例实现  先看一段代码class怎么实现样式的

<!--1 template 如同画板 我们可以在这里面画你自己想要的界面 -->
<template>
	<view>
		<button class="button">我是按钮</button> <!-- 在class里面写上样式名字 -->
	 
	</view>
</template>
 
 
<!--3 style顾名思义风格 比如界面颜色形状的代码写这里面 -->
<style>
      这里就可以先写一个. 后面写上名字 括号连写样式
	 .button{
		 width: 150px;
		 height: 40px;  
		 background: #007AFF;
	 }

 
</style>

具体效果 

 下面我们来解构一下代码   

          首先需要在组件里面写上  class=" "  这个意思是你需要在 style里面写一个样式 取上一个名字。然后填回到class里面赋值给class，以上就是标准写法。这样就可以把按钮改成我们自己想要的样式 

     style里面写法就是CSS 详细更多样式大家可以去查下百度这里只举简单例子。这里实现的是一个取名button的样式 赋值给class 。样式里面 有width长 150 px。px是长度单位。 height是高度40px  。我们还定义了一个背景蓝色的 效果 用background：去实现

更多的样式 我们可以到官网去查看学习  

https://www.runoob.com/css/css-tutorial.html

欢迎加QQ群 免费学习沟通交流.  群号 982792631

​​​​​​​​​​​​​​