如何在微信小程序中使用css?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)烏達(dá)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎ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è)置最高高度..超過(guò)后可以滑動(dòng)
max-height: 550rpx; overflow-y: scroll;
3: text-overflow 當(dāng)屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情
clip: 修剪文本 ellipsis : 用省略號(hào)來(lái)代表被修剪的文字 string: 使用給定的字符串來(lái)代表被修剪的文字 重點(diǎn)是三個(gè)同時(shí)使用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
4:overflow: hidden當(dāng)強(qiáng)制不換行的時(shí)候,使用overflow:hidden隱藏超過(guò)界面的部分
5: margin-bottom失效
margin-bottom是下方的外邊距,并不能讓元素向下方移動(dòng),margin-top作為上邊距,把元素“推”了下去。 希望圖標(biāo)距離下方30px,那么可以在ul上設(shè)置 position:absolute, bottom:30px ,(這一句我沒(méi)有加同樣實(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; }
看完上述內(nèi)容,你們掌握如何在微信小程序中使用css的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!