样式基础
一、样式的使用
wxml文件中编写view控件
wxss文件中编写样式内容
class属性:使用哪个样式
二、样式的属性:
1、尺寸:width hight
2、背景
3、边框
4、边距
margin:距离父view的距离
给image设上margin相当于设置上image与view的距离
Padding:image与它包裹的内容的距离
5、文本
6、其他(列表、内容、表格)
三、样式选择器
1、基本选择器
类选择器(.name{})
ID选择器(#name{})
元素选择器(name{})
包含选择器(p c{})所包含的所有的
2、属性选择器
E[attr]
E[attr=”value”]
E[attr~=”value”]
E[attr|=”value”]
E[attr^=”value”]
E[attr$=”value”]
E[attr*=”value”]
3、伪类选择器
动态伪类选择器(/*:link ,:visited,:hover,*/:active,:focus)
状态伪类选择器(: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)
自己简单小程序做笔记:
1.
.footer { left: 0px; width: 100%; z-index: 99; margin-top: 20px; } .pay-type { height: 120rpx; width: 100%; } .pay-ul { list-style: none; margin: 0; padding: 0; width: 100%; } .pay-li { float: left; left: 0; text-align: center; top: 0; width: 50%; } .pay-li:after { bottom: 30rpx; height: 60%; right: 50%; width: 1px; } .pay-a { display: block; margin: 0 auto; padding: 5rpx 0; position: inherit; text-align: center; width: 260rpx; } .pay-img { display: inline-block; float: left; height: 88rpx; width: 88rpx; } .pay-tx { color: #707070; display: inline-block; font-size: 35rpx; line-height: 85rpx; text-align: center; margin-left: 5px } /* .page-news { margin-top: 50px; } */
2.
3.
语法:
text-overflow:clip | ellipsis
默认值:clip
适用于:所有元素
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。
在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; 50%;这三个样式共同使用才会有效果,示例代码:
<style type="text/css"> .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;150px;} </style> <div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>
上面的width属性根据实际需要填写,其它样式是固定的。
转载请注明:http://www.tea119.com