样式基础

样式基础

一、样式的使用

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.

width: auto;......

 width：100%是相对你上层的标签而言，基本上跟你上层便签一样的宽度，但是width：auto是根据你这个标签里面的元素的宽度来自动调节本身的宽度

3.

text-overflow: ellipsis;

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记(...)，而是将溢出的部分裁切掉。 
ellipsis： 当对象内文本溢出时显示省略标记(...)。

在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果，示例代码：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>

上面的width属性根据实际需要填写，其它样式是固定的。

转载请注明：http://www.tea119.com