无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

對于以前搞客戶端開發(fā)的來說，有著客戶端的邏輯，就是不知道怎么設(shè)置樣式，把對應(yīng)的控件顯示出來

一、wxml

界面結(jié)構(gòu)wxmL比較容易理解，主要是由八大類基礎(chǔ)組件構(gòu)成：

 

一、視圖容器(View Container)：		二、基礎(chǔ)內(nèi)容(Basic Content)
組件名	說明	組件名	說明
view	視圖容器	icon	圖標(biāo)
scroll-view	可滾動視圖容器	text	文字
swiper	可滑動的視圖容器	progress	進(jìn)度條
三、表單組件(Form)		四、操作反饋組件(Interaction)
組件名	說明	組件名	說明
button	按鈕	action-sheet	上拉菜單
form	表單	modal	模態(tài)彈窗
input	輸入框	progress	進(jìn)度條
checkbox	多項選擇器	toast	短通知
radio	單項選擇器	五、導(dǎo)航(Navigation)
picker	列表選擇器	組件名	說明
slider	滑動選擇器	navigator	應(yīng)用內(nèi)跳轉(zhuǎn)
switch	開關(guān)選擇器
label	標(biāo)簽
六、多媒體(Media)		七、地圖(Map)
組件名	說明	組件名	說明
audio	音頻	map	地圖
image	圖片
video	視頻
八、畫布(Canvas)
組件名	說明
canvas	畫布

 

 

關(guān)于這八大類的屬性和具體用法可參考以下參考文獻(xiàn)鏈接：

http://www.w3cschool.cn/weixinapp/itz51q8o.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

二、wxss

wxml理解起來容易，但光搭好了框架，并不能達(dá)到我們想要的界面效果，這就需要用到wxss樣式了。

wxss樣式?jīng)Q定了組件應(yīng)該如何顯示，并在css的基礎(chǔ)上做了一些功能擴展，主要包括：

1.尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。一般以iphone6屏幕做為視覺設(shè)計標(biāo)準(zhǔn)。

rpx 與 px單位換算如下：

 

設(shè)備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

 

 

2.樣式導(dǎo)入

可以使用@import語句來導(dǎo)入外聯(lián)樣式表，其后面跟需要導(dǎo)入外聯(lián)樣式表的相對路徑，并以分號結(jié)束。

例如：

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局樣式，作用于每一個頁面，而page下的每一個的wxss文件只作用于當(dāng)前頁面，并對全局樣式中的相同屬性會覆蓋。

 

對于微信小程序wxss樣式的使用來說，其實大部分都和css樣式一致，下面簡單的進(jìn)行介紹一下：

 

wxss樣式屬性
一、wxss display(顯示)
屬性	說明
flex	多欄多列布局	flex-direction:row/column
inline-block	行內(nèi)塊元素
inline	此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符
inline-table	作為內(nèi)聯(lián)表格來顯示（類似 <table>），表格前后沒有換行符
inline-flex	將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
none	此元素不會被顯示
block	此元素將顯示為塊級元素，此元素前后會帶有換行符
list-item	此元素會作為列表顯示
table	會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符
table-caption	作為一個表格標(biāo)題顯示（類似 <caption>）
table-cell	作為一個表格單元格顯示（類似 <td> 和 <th>）
table-column	作為一個單元格列顯示（類似 <col>）
table-column-group	作為一個或多個列的分組來顯示（類似 <colgroup>）
table-row	作為一個表格行顯示（類似 <tr>）
table-row-group	作為一個或多個行的分組來顯示（類似 <tbody>）
table-header-group	作為一個或多個行的分組來顯示（類似 <thead>）
table-footer-group	作為一個或多個行的分組來顯示（類似 <tfoot>）
inherit	從父元素繼承 display 屬性的值
flex:多欄多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

 

 

 

二、wxss position(定位)
屬性	說明
absolute	生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
relative	生成相對定位的元素，相對于其正常位置進(jìn)行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
fixed	生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
static	默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
inherit	規(guī)定應(yīng)該從父元素繼承 position 屬性的值

 

 

 

三、wxss float(浮動)
屬性	說明
left	元素向左浮動
right	元素向右浮動
none默認(rèn)值	元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
inherit	規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

 

 

 

四、wxss background(背景)
屬性	說明	語法(屬性值)
background	簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中	background: color position size repeat origin clip attachment image;
background-color	指定要使用的背景顏色
background-position	指定背景圖像的位置	background-position:center
background-size	指定背景圖片的大小	background-size:80px 60px;寬度 高度
background-repeat	指定如何重復(fù)背景圖像	repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin	指定背景圖像的定位區(qū)域	padding-box 背景圖像填充框的相對位置 border-box 背景圖像邊界框的相對位置 content-box 背景圖像的相對位置的內(nèi)容框
background-clip	指定背景圖像的繪畫區(qū)域	屬性值，同上
background-attachment	設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。	scroll 背景圖片隨頁面的其余部分滾動。這是默認(rèn) fixed 背景圖像是固定的 inherit 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 local 背景圖片隨滾動元素滾動
background-image	指定要使用的一個或多個背景圖像	url('URL') 圖像的URL none 無圖像背景會顯示。這是默認(rèn) inherit 指定背景圖像應(yīng)該從父元素繼承

 

 

 

五、wxss border(邊框)
屬性	說明	語法(屬性值)
border	簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明	border:5px solid red;
border-width	用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度	border-top-width 上右下左邊框厚度 屬性值：thin medium thick length
border-style	設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。	border-top-width 上右下左邊框樣式 屬性值：solid,dashed,dotted,double等
border-color	元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色	border-top-width 上右下左邊框顏色

 

 

 

六、wxss 輪廓（outline）
屬性	說明	語法(屬性值)
outline	在一個聲明中設(shè)置所有的外邊框?qū)傩?/td>	outline: outline-color, outline-style, outline-width
outline-color	設(shè)置外邊框的顏色
outline-style	設(shè)置外邊框的樣式。	屬性值：solid,dashed,dotted,double等
outline-width	設(shè)置外邊框的寬度	屬性值：thin medium thick length

 

 

 

七、wxss 文本屬性（text）
屬性	說明	語法(屬性值)
color	設(shè)置文本顏色
direction	設(shè)置文本方向。	ltr:文本方向從左到右;rtl:文本方向從右到左
letter-spacing	設(shè)置字符間距
line-height	設(shè)置行高
text-align	對齊元素中的文本	left：把文本排列到左邊。默認(rèn)值，由瀏覽器決定。 right：把文本排列到右邊。 center：把文本排列到中間。 justify：實現(xiàn)兩端對齊文本效果。 inherit: 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。
text-decoration	向文本添加修飾	underline 定義文本下的一條線。 overline 定義文本上的一條線。 line-through 定義穿過文本下的一條線。 blink 定義閃爍的文本。
text-indent	縮進(jìn)元素中文本的首行
text-shadow	設(shè)置文本陰影	text-shadow: h-shadow v-shadow blur color; h-shadow:水平陰影的位置,允許負(fù)值; v-shadow:垂直陰影的位置,允許負(fù)值; blur:模糊的距離; color:陰影的顏色
text-transform	控制元素中的字母	capitalize 文本中的每個單詞以大寫字母開頭。 uppercase 定義僅有大寫字母。 lowercase 定義無大寫字母，僅有小寫字母。
unicode-bidi	設(shè)置或返回文本是否被重寫
vertical-align	設(shè)置元素的垂直對齊
white-space	設(shè)置元素中空白的處理方式
word-spacing	設(shè)置字間距

 

 

 

八、wxss 字體屬性（font）
屬性	說明	語法(屬性值)
font	在一個聲明中設(shè)置所有字體屬性	font:font-style font-variant font-weight font-size/line-height font-family(按順序)
font-style	指定文本的字體樣式	normal 默認(rèn)值。瀏覽器顯示一個標(biāo)準(zhǔn)的字體樣式。 italic 瀏覽器會顯示一個斜體的字體樣式。 oblique 瀏覽器會顯示一個傾斜的字體樣式。 inherit 規(guī)定應(yīng)該從父元素繼承字體樣式。
font-variant	以小型大寫字體或者正常字體顯示文本	normal 默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。 small-caps 瀏覽器會顯示小型大寫字母的字體。 inherit 規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。
font-weight	指定字體的粗細(xì)	normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。 bold 定義粗體字符。 bolder 定義更粗的字符。 lighter 定義更細(xì)的字符。 inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。
font-size	指定文本的字體大小	smaller 把 font-size 設(shè)置為比父元素更小的尺寸。 larger 把 font-size 設(shè)置為比父元素更大的尺寸。 length 把 font-size 設(shè)置為一個固定的值。 % 把 font-size 設(shè)置為基于父元素的一個百分比值。
font-family	指定文本的字體系列

 

 

 

九、wxss margin(外邊距)（margin）
屬性	說明	語法(屬性值)
margin	在一個聲明中設(shè)置所有外邊距屬性。	margin:10px 5px 15px 20px;(上邊距，右邊距，下邊距，左邊距)
margin-top	設(shè)置元素的上外邊距。
margin-right	設(shè)置元素的右外邊距。
margin-bottom	設(shè)置元素的下外邊距。
margin-left	設(shè)置元素的左外邊距

 

 

 

十、wxss padding(填充)（padding）
屬性	說明	語法(屬性值)
padding	使用縮寫屬性設(shè)置在一個聲明中的所有填充屬性	padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)
padding-top	設(shè)置元素的頂部填充。
padding-right	設(shè)置元素的右部填充
padding-bottom	設(shè)置元素的底部填充
padding-left	設(shè)置元素的左部填充

 

 

 

十一、wxss 選擇器
選擇器	樣例	樣例描述
.class(類選擇器)	.intro	選擇所有擁有class="intro"的組件
#id(id選擇器)	#firstname	選擇擁有id="firstname"的組件
element	view	選擇所有view組件
element, element	view checkbox	選擇所有文檔的view組件和所有的checkbox組件
::after	view::after	在view組件后邊插入內(nèi)容
::before	view::before	在view組件前邊插入內(nèi)容

 

 

 

有一些屬性值太多且實際應(yīng)用的比較少 可以參考w3cschool的css文檔：

http://www.w3cschool.cn/css/css-tutorial.html

對于微信小程序的文檔手冊可參考以下鏈接：

http://www.w3cschool.cn/weixinapp/9wou1q8j.html