微信小程序简单框架

最新推荐文章于 2025-05-19 11:18:44 发布

fireabcdefg

最新推荐文章于 2025-05-19 11:18:44 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fire669842703/article/details/79246133

本文介绍了一个使用WXML和WXSS实现的家装案例展示页面。页面包含两个带有家装背景的按钮，通过WXSS设置了按钮的样式，包括圆角、背景颜色等，并定义了按钮激活状态的颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码如下wxml：

<!--pages/test/test.wxml-->
<view 
class='one' 
>
<button
class='btn1'
style='width:270rpx;height:270rpx'><text>\n家装案例
</text></button>
</view>
<view 
class='line'>

</view>
<view 
class='one' 
>
<button
class='btn1'
style='width:270rpx;height:270rpx'><text>\n工程案例
</text></button>
</view>

wxss：

/* pages/test/test.wxss */
.one{
display: flex;

background-image: 
url("https://mmbiz.qpic.cn/mmbiz_png/8NCVRQmNLueKSb8fSmmGFF0Ge1tvwGr9DXJCsl51Q0DaCyPBQzdhYKE6LkqEgaTc8jicvoSicbrI8vPP6dBVmtqA/0?wx_fmt=png");
background-size: 
cover;
opacity: 0.8;
height: 550rpx
}
.btn1{
border-radius: 
150rpx;
background-color: 
salmon;
margin-top: 130rpx;
}
.btn1 text{
font-size: 35rpx
}
.btn1:active{
color: blue;
background-color: 
red
}
.line{
border: double
1px black
}