小程序模板网

微信小程序 UI样式基础及相对定位和绝对定位

2018-04-17 须达多

作者:xiaochun365,来自原文地址

 

一: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

 

二:相对定位和绝对定位

相对定位:元素是相对自身进行定位,参照物是自己。

绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位

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

相对定位:

        position:relative;    /*启用相对定位*/

        left:150rpx;    /*相对于自己往右偏离150*/

        top:50rpx;     /*相对于自己往下偏离150*/

                

绝对定位:

          position: absolute;
          left: 50rpx;
          top: 50rpx;

          (父级元素一定要是已定位)

               



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23527.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询