輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開發(fā)全功能小程序商城、開發(fā)定制服務(wù)、全程售后服務(wù)、無憂備案
分享、交流、傳播知識分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
做開發(fā)中，寫樣子是最費(fèi)精力和時(shí)間的，好的規(guī)劃會事倍功半，這次就看看如何做出中橫線的樣式。
大家先看中橫線在實(shí)際中的應(yīng)用效果：
當(dāng)提交完訂單后顯示的“您或許會喜歡”，或者：
一般如果來說按有部分人思維可能會做兩條線條的切圖，這樣是對微信小程序加載產(chǎn)生效率的影響，現(xiàn)就實(shí)現(xiàn)純WXSS實(shí)現(xiàn)的方法，首先可以利用元素的偽元素實(shí)現(xiàn)，如：::before，::after
先是wxml文件內(nèi)容：
<view class="goods-tj">
<view class="goods-tj-title">您或許會喜歡view>
view>
再是wxss樣式內(nèi)容：
.goods-tj{
text-align: center;
height: 50rpx;
margin-top: 10rpx;
display: flex;
}
.goods-tj-title {
display: table;
width: 100%;
line-height: 50rpx;
white-space: nowrap;
border-spacing: 2rem 0;
font-size: 30rpx;
color: #999;
}
.goods-tj-title::before, .goods-tj-title::after {
display: table-cell;
content: "";
width: 50%;
background: linear-gradient(#999, #999) repeat-x center;
background-size: 0.1px 0.1px;
}
當(dāng)然如果用圖片切出來排版也是可以的。
