前端uniapp块样式写法

请添加图片描述

<template>
	<view class="block">
		<view class="block_box">
			<view class="block_box_content">
				<view class="block_box_left">
					左边
				</view>
				<view class="block_box_right">
				右边
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			imgList: [],
		},
		methods {}
	}
</script>

<style>
	.block{
		background: #000;
	}
	.block_box {
		background-color: #FFFF;
		border-radius: 7px;
		margin: 10px;
		font-size: 15px;
	}

	.block_box_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 10px;
		box-sizing: border-box;
		font-size: 15px;
	}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp中,样式嵌套的写法可以通过两种方式实现:内联样式和外部样式表。 1. 内联样式:可以直接在标签的属性中使用样式属性来设置元素的样式,这种写法适合于少量样式的情况。例如: ``` <view style="width: 200rpx; height: 200rpx; background-color: red;"> <text style="font-size: 32rpx; color: white;">这是一段文本</text> </view> ``` 上述代码中,view标签使用了内联样式来设置宽度、高度和背景色,text标签也使用了内联样式来设置字体大小和字体颜色。 2. 外部样式表:UniApp也支持通过引入外部样式表来设置元素的样式,这种写法适合于大量样式的情况,并且可以在多个页面之间共享样式。首先需要在根目录的App.vue文件或页面的vue文件中,使用<style>标签来引入外部样式表,如: ``` <style> @import "../common/style.css"; </style> ``` 然后在common文件夹下创建style.css文件,并在其中书写样式规则,例如: ``` .view-class { width: 200rpx; height: 200rpx; background-color: red; } .text-class { font-size: 32rpx; color: white; } ``` 最后,在页面的标签中使用class属性来引用样式类: ``` <view class="view-class"> <text class="text-class">这是一段文本</text> </view> ``` 通过外部样式表,可以更好地管理和复用样式,并提高代码的可维护性。 以上是UniApp样式嵌套的两种写法,开发者可以根据具体需求选择合适的方式来设置元素的样式

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值