自定义竖向SeekBar ,横向SeekBar 样式
2016-12-06 17:49
337 查看
效果图
竖向SeekBar 背景宽了，是因为，progress 的图片两边有透明留白。导致两个图片颜色区不一样宽。
贴代码：
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:orientation="vertical" >
<TextView
android:id="@+id/radio_volume_value"
android:layout_width="46px"
android:layout_height="wrap_content"
android:layout_marginLeft="30px"
android:layout_marginTop="30px"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="22px" />
<com.tan.seekbaractivity.view.VerticalSeekBar1
android:id="@+id/verticalSeekBar"
android:layout_width="36px"
android:layout_height="230px"
android:layout_marginLeft="36px"
android:layout_marginTop="10px" />
<SeekBar
android:id="@+id/sb_progress"
android:layout_width="400px"
android:layout_height="wrap_content"
android:layout_marginLeft="100px"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxHeight="2px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_po_sound"
android:thumb="@drawable/slide_selected"
android:thumbOffset="16px" />
</LinearLayout>
drawable
seekbar_po_sound.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- <item android:id="@android:id/background" android:drawable="@drawable/slide_bg">
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/slide_content" >
</clip>
</item> -->
<item android:id="@android:id/background">
<shape>
<corners android:radius="6px" />
<solid android:color="#19ffffff" />
<size
android:height="5px"
android:width="245px" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="6px" />
<gradient
android:angle="0"
android:startColor="#a1f5c587"
android:centerColor="#fdf4b5"
android:endColor="#fffde0"/>
<size
android:height="5px"
android:width="245px" />
</shape>
</clip>
</item>
</layer-list>
MainActivity.java
package com.tan.seekbaractivity;
import com.tan.seekbaractivity.view.VerticalSeekBar1;
import com.tan.seekbaractivity.view.VerticalSeekBar1.Callback;
import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;
public class MainActivity extends Activity {
private VerticalSeekBar1 VerticalSeekBar;
private TextView radio_volume_value;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 隐藏标题栏
ActionBar actionBar = getActionBar();
actionBar.hide();
initView();
setListener();
}
private void initView() {
VerticalSeekBar = (VerticalSeekBar1) this.findViewById(R.id.verticalSeekBar);
radio_volume_value = (TextView) this.findViewById(R.id.radio_volume_value);
}
private void setListener() {
VerticalSeekBar.setMax(40);
VerticalSeekBar.setProgress(0);
VerticalSeekBar.setCallback(new Callback() {
@Override
public void changed(int mProgress) {
radio_volume_value.setText(String.valueOf(mProgress));
}
});
}
}
View
VerticalSeekBar.java
package com.tan.seekbaractivity.view;
import com.tan.seekbaractivity.R;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class VerticalSeekBar1 extends RelativeLayout implements OnTouchListener {
public VerticalSeekBar1(Context context) {
super(context);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public interface Callback {
public void changed(int mProgress);
}
private Callback mCallback;
public void setCallback(Callback c) {
mCallback = c;
}
private ImageView backgroundView;
private ImageView mthumb;
private ImageView progressView;
private void init(Context context) {
backgroundView = new ImageView(context);
this.addView(backgroundView);
progressView = new ImageView(context);
this.addView(progressView);
mthumb = new ImageView(context);
this.addView(mthumb);
setResource(this.getResources().getDrawable(R.drawable.radio_volume_progress_thumb), this.getResources()
.getDrawable(R.drawable.radio_volume_progress_nomal),
this.getResources().getDrawable(R.drawable.radio_volume_progress_press));
this.setOnTouchListener(this);
// mthumb.setOnTouchListener(this);
}
private void setResource(Drawable thumb, Drawable background, Drawable progress) {
backgroundView.setBackgroundDrawable(background);
progressView.setBackgroundDrawable(progress);
mthumb.setImageDrawable(thumb);
}
private int offsetThumb = 18;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
int width = this.getWidth();
int height = this.getHeight();
step = (height - 36) / (mMax);
int backgroundwidt = backgroundView.getWidth();
backgroundView.layout((width - backgroundwidt) / 2, offsetThumb, (width - backgroundwidt) / 2 + backgroundwidt,
height - offsetThumb);
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
mthumb.layout(0, 0, mthumb.getWidth(), mthumb.getHeight());
setProgress(progress);
}
public void setProgress(int p) {
if (p > mMax || p < 0) {
return;
}
progress = p;
int currentY = (int) (step * p);
lastY = currentY;
int y = 230 - 18 - currentY;
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
}
private float mMax;
private float step;
private int lastY;
private int progress;
public void setMax(int max) {
mMax = max;
}
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int y = msg.arg1;
if (y - 18 < 0) {
y = 18;
}
if (y > VerticalSeekBar1.this.getHeight() - 18) {
y = VerticalSeekBar1.this.getHeight() - 18;
}
if (y == VerticalSeekBar1.this.getHeight() - 18) {
progress = 0;
} else if (y == 18||(y > 18 && y < step+18)) {
progress = (int) mMax;
} else {
int tempY = Math.abs(y-212);
//int tempY = Math.abs(y - (230 - 18));
int number = (int) (tempY / step);
progress = number;
int currentY = (int) (step * number);
if (currentY == lastY) {
return;
}
lastY = currentY;
y = 230 - 18 - currentY;
//
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
}
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
if (mCallback != null) {
mCallback.changed(progress);
}
}
};
private boolean isTouchDown = false;
public boolean isTouchDown() {
return isTouchDown;
}
@Override
public boolean onTouch(View view, MotionEvent event) {
int y = 0;
switch (event.getAction())// 根据动作来执行代码
{
case MotionEvent.ACTION_MOVE:// 滑动
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_DOWN:// 按下
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_UP:// 松开
case MotionEvent.ACTION_CANCEL:// 松开
isTouchDown = false;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
default:
}
return true;
}
}
横向SeekBar 样式：
<SeekBar
android:id="@+id/sb_progress"
android:layout_width="400px"
android:layout_height="wrap_content"
android:layout_marginLeft="100px"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxHeight="2px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_po_sound"
android:thumb="@drawable/slide_selected"
android:thumbOffset="16px" />
一般SeekBar 轨道（Track） 和 拖动按钮（Thumb） 是等高的
当遇到设计图，Track 比Thumb 高度小很多时，就不好处理 。
1.利用android:maxHeight="2px" 限制Track 的高度，控件的高度wrap_content , 就是Thumb 高度。
2。android:thumbOffset="16px" 用来控制Thumb 的偏移大小，就是Thumb 拖动范围比Track 长度大。避免Thumb出现拖不到头的情况。
3. 利用 android:progressDrawable="@drawable/seekbar_po_sound"
控制进度条的样式。
注意：遇到这种情况，尽量不要用图片做Track 。会出现，Track 高度不可控，并且会使Thumb 不居中。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<corners android:radius="6px" />
<solid android:color="#19ffffff" />
<size
android:height="5px"
android:width="245px" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="6px" />
<gradient
android:angle="0"
android:startColor="#a1f5c587"
android:centerColor="#fdf4b5"
android:endColor="#fffde0"/>
<size
android:height="5px"
android:width="245px" />
</shape>
</clip>
</item>
</layer-list>
这里采用的是利用shape绘制 背景图和拖动条。
第一个item @android:id/background 就是最底层的灰色条
第二个Item 一般用不到，@android:id/secondaryProgress 。这里设置成透明
第三个item @android:id/progress 当前的进度。
注意使用 clip 属性 ，并用shape 绘制了渐变色。
第二和第三的区别使用场景
想想视频播放器，在线缓存播放。
第二条就是 当前缓存下载的进度
第三条 就是 正在播放视频的进度
自定义竖向SeekBar
就是自定义一个相对布局，控制拖动条和Thumb 的显示位置。
通过onLayout 方法重新绘制
目前这个空间没有自定义attrs 属性，坐标值是写死的，有待改进。
介绍，拖动块 Thumb , 大小是 36X36
控件 的大小是 36X 230
Thumb 的 thumbOffset = 18
代码中的数字都是暂时写死的。
具体绘制思路如图：
竖向SeekBar 背景宽了，是因为，progress 的图片两边有透明留白。导致两个图片颜色区不一样宽。
贴代码：
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:orientation="vertical" >
<TextView
android:id="@+id/radio_volume_value"
android:layout_width="46px"
android:layout_height="wrap_content"
android:layout_marginLeft="30px"
android:layout_marginTop="30px"
android:gravity="center"
android:textColor="#FFFFFF"
android:textSize="22px" />
<com.tan.seekbaractivity.view.VerticalSeekBar1
android:id="@+id/verticalSeekBar"
android:layout_width="36px"
android:layout_height="230px"
android:layout_marginLeft="36px"
android:layout_marginTop="10px" />
<SeekBar
android:id="@+id/sb_progress"
android:layout_width="400px"
android:layout_height="wrap_content"
android:layout_marginLeft="100px"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxHeight="2px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_po_sound"
android:thumb="@drawable/slide_selected"
android:thumbOffset="16px" />
</LinearLayout>
drawable
seekbar_po_sound.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- <item android:id="@android:id/background" android:drawable="@drawable/slide_bg">
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/slide_content" >
</clip>
</item> -->
<item android:id="@android:id/background">
<shape>
<corners android:radius="6px" />
<solid android:color="#19ffffff" />
<size
android:height="5px"
android:width="245px" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="6px" />
<gradient
android:angle="0"
android:startColor="#a1f5c587"
android:centerColor="#fdf4b5"
android:endColor="#fffde0"/>
<size
android:height="5px"
android:width="245px" />
</shape>
</clip>
</item>
</layer-list>
MainActivity.java
package com.tan.seekbaractivity;
import com.tan.seekbaractivity.view.VerticalSeekBar1;
import com.tan.seekbaractivity.view.VerticalSeekBar1.Callback;
import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;
public class MainActivity extends Activity {
private VerticalSeekBar1 VerticalSeekBar;
private TextView radio_volume_value;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 隐藏标题栏
ActionBar actionBar = getActionBar();
actionBar.hide();
initView();
setListener();
}
private void initView() {
VerticalSeekBar = (VerticalSeekBar1) this.findViewById(R.id.verticalSeekBar);
radio_volume_value = (TextView) this.findViewById(R.id.radio_volume_value);
}
private void setListener() {
VerticalSeekBar.setMax(40);
VerticalSeekBar.setProgress(0);
VerticalSeekBar.setCallback(new Callback() {
@Override
public void changed(int mProgress) {
radio_volume_value.setText(String.valueOf(mProgress));
}
});
}
}
View
VerticalSeekBar.java
package com.tan.seekbaractivity.view;
import com.tan.seekbaractivity.R;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class VerticalSeekBar1 extends RelativeLayout implements OnTouchListener {
public VerticalSeekBar1(Context context) {
super(context);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public interface Callback {
public void changed(int mProgress);
}
private Callback mCallback;
public void setCallback(Callback c) {
mCallback = c;
}
private ImageView backgroundView;
private ImageView mthumb;
private ImageView progressView;
private void init(Context context) {
backgroundView = new ImageView(context);
this.addView(backgroundView);
progressView = new ImageView(context);
this.addView(progressView);
mthumb = new ImageView(context);
this.addView(mthumb);
setResource(this.getResources().getDrawable(R.drawable.radio_volume_progress_thumb), this.getResources()
.getDrawable(R.drawable.radio_volume_progress_nomal),
this.getResources().getDrawable(R.drawable.radio_volume_progress_press));
this.setOnTouchListener(this);
// mthumb.setOnTouchListener(this);
}
private void setResource(Drawable thumb, Drawable background, Drawable progress) {
backgroundView.setBackgroundDrawable(background);
progressView.setBackgroundDrawable(progress);
mthumb.setImageDrawable(thumb);
}
private int offsetThumb = 18;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
int width = this.getWidth();
int height = this.getHeight();
step = (height - 36) / (mMax);
int backgroundwidt = backgroundView.getWidth();
backgroundView.layout((width - backgroundwidt) / 2, offsetThumb, (width - backgroundwidt) / 2 + backgroundwidt,
height - offsetThumb);
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
mthumb.layout(0, 0, mthumb.getWidth(), mthumb.getHeight());
setProgress(progress);
}
public void setProgress(int p) {
if (p > mMax || p < 0) {
return;
}
progress = p;
int currentY = (int) (step * p);
lastY = currentY;
int y = 230 - 18 - currentY;
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
}
private float mMax;
private float step;
private int lastY;
private int progress;
public void setMax(int max) {
mMax = max;
}
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int y = msg.arg1;
if (y - 18 < 0) {
y = 18;
}
if (y > VerticalSeekBar1.this.getHeight() - 18) {
y = VerticalSeekBar1.this.getHeight() - 18;
}
if (y == VerticalSeekBar1.this.getHeight() - 18) {
progress = 0;
} else if (y == 18||(y > 18 && y < step+18)) {
progress = (int) mMax;
} else {
int tempY = Math.abs(y-212);
//int tempY = Math.abs(y - (230 - 18));
int number = (int) (tempY / step);
progress = number;
int currentY = (int) (step * number);
if (currentY == lastY) {
return;
}
lastY = currentY;
y = 230 - 18 - currentY;
//
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
}
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
if (mCallback != null) {
mCallback.changed(progress);
}
}
};
private boolean isTouchDown = false;
public boolean isTouchDown() {
return isTouchDown;
}
@Override
public boolean onTouch(View view, MotionEvent event) {
int y = 0;
switch (event.getAction())// 根据动作来执行代码
{
case MotionEvent.ACTION_MOVE:// 滑动
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_DOWN:// 按下
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_UP:// 松开
case MotionEvent.ACTION_CANCEL:// 松开
isTouchDown = false;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
default:
}
return true;
}
}
横向SeekBar 样式：
<SeekBar
android:id="@+id/sb_progress"
android:layout_width="400px"
android:layout_height="wrap_content"
android:layout_marginLeft="100px"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxHeight="2px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_po_sound"
android:thumb="@drawable/slide_selected"
android:thumbOffset="16px" />
一般SeekBar 轨道（Track） 和 拖动按钮（Thumb） 是等高的
当遇到设计图，Track 比Thumb 高度小很多时，就不好处理 。
1.利用android:maxHeight="2px" 限制Track 的高度，控件的高度wrap_content , 就是Thumb 高度。
2。android:thumbOffset="16px" 用来控制Thumb 的偏移大小，就是Thumb 拖动范围比Track 长度大。避免Thumb出现拖不到头的情况。
3. 利用 android:progressDrawable="@drawable/seekbar_po_sound"
控制进度条的样式。
注意：遇到这种情况，尽量不要用图片做Track 。会出现，Track 高度不可控，并且会使Thumb 不居中。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background">
<shape>
<corners android:radius="6px" />
<solid android:color="#19ffffff" />
<size
android:height="5px"
android:width="245px" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="6px" />
<gradient
android:angle="0"
android:startColor="#a1f5c587"
android:centerColor="#fdf4b5"
android:endColor="#fffde0"/>
<size
android:height="5px"
android:width="245px" />
</shape>
</clip>
</item>
</layer-list>
这里采用的是利用shape绘制 背景图和拖动条。
第一个item @android:id/background 就是最底层的灰色条
第二个Item 一般用不到，@android:id/secondaryProgress 。这里设置成透明
第三个item @android:id/progress 当前的进度。
注意使用 clip 属性 ，并用shape 绘制了渐变色。
第二和第三的区别使用场景
想想视频播放器，在线缓存播放。
第二条就是 当前缓存下载的进度
第三条 就是 正在播放视频的进度
自定义竖向SeekBar
就是自定义一个相对布局，控制拖动条和Thumb 的显示位置。
通过onLayout 方法重新绘制
目前这个空间没有自定义attrs 属性，坐标值是写死的，有待改进。
介绍，拖动块 Thumb , 大小是 36X36
控件 的大小是 36X 230
Thumb 的 thumbOffset = 18
代码中的数字都是暂时写死的。
具体绘制思路如图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android 自定义SeekBar以及几个要注意的问题
- 拖动条SeekBar的简单使用
- Android seekbar样式介绍
- Android自定义可长按 可点击不可拖动的SeekBar
- Android开发之seekbar动态显示进度
- 安卓android 自定义SeekBar进度条样式
- 自定义seekbar中，thumb被覆盖掉一部分问题
- Android 可拖动进度条：SeekBar之自定义进度条
- Android自定义可拖动进度条
- CSS3 transition效果 360度旋转 旋转放大 放大 移动
- css3 实现png图片改变背景颜色
- css代码编写空心箭头
- 《图解CSS3——第2章 CSS3选择器-1》
- css超过一定宽度显示点点
- css收集整理
- console.log改变样式
- CSS使用总结
- DOM2级样式style
- 关于Sublime text 3如何编辑less并转(编译)成css文件，亲测可用
- css学习之盒子模型应用