快捷導(dǎo)航

微信小程序 css使用技巧總結(jié)

更新時(shí)間：2017年01月09日 11:44:45 投稿：lqh

這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下

微信小程序 css使用技巧

1:用純CSS創(chuàng)建一個(gè)三角形的原理把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）

.demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

2:設(shè)置最高高度..超過后可以滑動(dòng)

 max-height: 550rpx;

 overflow-y: scroll;

3: text-overflow 當(dāng)屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情

clip: 修剪文本
ellipsis : 用省略號(hào)來代表被修剪的文字
string: 使用給定的字符串來代表被修剪的文字
重點(diǎn)是三個(gè)同時(shí)使用：text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

4:overflow: hidden當(dāng)強(qiáng)制不換行的時(shí)候,使用overflow:hidden隱藏超過界面的部分

5: margin-bottom失效

margin-bottom是下方的外邊距，并不能讓元素向下方移動(dòng)，margin-top作為上邊距，把元素“推”了下去。
希望圖標(biāo)距離下方30px，那么可以在ul上設(shè)置 position:absolute, bottom:30px ，(這一句我沒有加同樣實(shí)現(xiàn)了效果)另外父元素position:relative

6:強(qiáng)制不換行

white-space:nowrap;

自動(dòng)換行

div{ 

word-wrap: break-word; 

word-break: normal; 

}

強(qiáng)制英文單詞斷行

div{

word-break:break-all;

}

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript對(duì)象的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JS實(shí)現(xiàn)圖片產(chǎn)生波紋一樣flash效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片產(chǎn)生波紋一樣flash效果的方法,通過遞歸調(diào)用自定義函數(shù)f_wave實(shí)現(xiàn)波紋效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
JavaScript的詞法結(jié)構(gòu)精華篇
今天小編就為大家分享一篇關(guān)于JavaScript的詞法結(jié)構(gòu)精華篇，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2018-10-10
JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07
setTimeout函數(shù)兼容各主流瀏覽器運(yùn)行執(zhí)行效果實(shí)例
setTimeout是一個(gè)很不錯(cuò)的函數(shù)，網(wǎng)站頁面前端工程師經(jīng)常將其用于幾秒后執(zhí)行的動(dòng)作，下文要講的setTimeout可以很好地兼容IE6，7,8,9以及谷歌等主流瀏覽器
2013-06-06
JS實(shí)現(xiàn)向iframe中表單傳值的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向iframe中表單傳值的方法,涉及js針對(duì)頁面元素及表單屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
javascript 獲取radio的value的函數(shù) [已測(cè)]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺(tái)語言結(jié)合時(shí)，一般用不到，但在純js環(huán)境下是必須的。
2009-06-06
js操作iframe兼容各種主流瀏覽器示例代碼
遇到了操作iframe的相關(guān)問題，其實(shí)就是在操作iframe內(nèi)部某個(gè)窗體時(shí)，調(diào)用父窗體的一個(gè)函數(shù)，下面與大家分享下操作iframe兼容各種瀏覽器的方法
2013-07-07
關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
原來是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。（如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料）
2010-10-10
使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例
下面小編就為大家分享一篇使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02