6条html和css的小结（html和css简单例子）

1、list的ul的li的width一样时，

width要固定，还有高

2、制作滚动插件时，的结构

<div class=” body ”>

<div class=” prev ”></div>

<div class=” list ”> // width的值为滚动个li的宽度 或 n个里的宽度

<div class=” wrap ”> //width: 999999px;

<ul>

<li></li>

</ul>

</div>

</div>

<div class=” next ”> </div>

</div>

3、高度不一样的文字、图片垂直居中

用拥有vertical-align的属性的标签包裹<img> ，如i、sub、sub等标签

<div class=” img”>

<i> <img src=”” /><i>

</div>

css的样式：

i {

display:table-cell;

vertical-align:middle;

width: ;

height: ;

}

4、定位的图片居中，知道多个图片的高度h是一样的

<div class=” img ”>

<img >

</div>

img {

display:block;

margin:0 atuo;

position:absolute;

top:50%;

margin-top: h/2;

}

注：方法3也可以解决第四种问题

5、z-index

1. position:static; //z-indent设置是没用

2.position：relative；//z-indent的值大覆盖z-indent的值小

注：条件要在同一个父级下，若不在同一父级下

6、透明opacity和rgba（ ， ， ， ）的区别

1.apacity——标签透明（考虑兼容性）

2.Rgba（）——背景图片、颜色透明

切图网（qietu.com）是首家专门从事web前端开发的公司，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。