微信小程序 UI样式基础


尺寸

/*width: 宽*/

/*height: 高*/

/*min-width: 最小宽度*/

/*max-width: 最大宽度*/

/*min-height: 最小高度*/

/*max-height: 最大高度*/


背景
 /*background-color: 背景颜色*/

/*background-image: 背景图片*/

/*background-repeat: 背景图片的重叠方式*/


边框
/*border-radius:50% 圆形*/

/*border-radius:20% 方形圆角*/

/*border-width: 10px;*/

/*border-color: red;*/

/*border-style:inset;*/


边距

margin:距离上一个标签的距离

padding:标签距离内部包裹的内容的距离


文本

 /*color: red;*/

 /*font-size: 20px; */

 /*font-weight:700;  加粗*/


其他(列表,内容,表格)




----------------------------------------------------------------------------------------------------

样式选择器

类选择器,ID选择器,元素选择器,通配符选择器(现有的编译器并不支持),

包含选择器 p c{}  //p下面的所有

子元素选择器 p > c{} //p下面的一级

邻近兄选择器 c + c{}

               

通用兄选择器 c~c{} 

                          

动态伪类选择器 (:active  :focus)    (:link  :visited  :hover)--小程序不支持

              .item:active{background-color:yellow}

              

状态伪类选择器(:enable  :disable  :checked)

选择伪类选择器:(:first-child  :last-child  :nth-child()  :nth-last-child()  :nth-of-type()  :nth-last-of-type()  :first-of-type :last-of-type :only-child  :only-of-type)

空内容伪类选择器::empty

否定伪类选择器::not

伪元素:::first-line  ::first-letter  ::before  ::after  ::selection

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值