Topic 1 : 滑动门 :
核心技术 ： 内部所有盒子都要左浮动；
作用 ：自适应非直角矩形尺寸；（所以宽度就不用我们写）
注意 ：滑动门用什么标签都可以制作 我们这里以 ul li来示例：
1.基础的滑动门 ：
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门</title>
<style type="text/css">
*{padding: 0px; margin:0px; list-style: none; }
body{padding: 200px; }
li{height: 50px;}
.left{ height: 40px; width: 5px; background: url(image/left.jpg); float: left;}
.center{ height: 40px; background: url(image/center.jpg); float: left; line-height: 40px; }
.right{ height: 40px; width: 5px; background:url(image/right.jpg); float:left;}
</style>
</head>
<body>
<ul>
<li>
<span class="left"></span>
<div class="center">我是一个基础的滑动门</div>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<div class="center">我可以自适应你输入文字的长度</div>
<span class="right"></span>
</li>
</ul>
</body>
</html>
网而示例：
拓展的方法：
网页示例：
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门</title>
<style type="text/css">
*{padding: 0px; margin:0px; list-style: none; }
body{padding: 200px; }
li{height: 50px;}
.left{ height: 40px; width: 5px; background: url(image/left.jpg); float: left;}
.center{ height: 40px; background: url(image/center.jpg); float: left; line-height: 40px; }
.right{ height: 40px; width: 5px; background:url(image/right.jpg); float:left;}
.huadong li{height: 40px; float: left; background: url(image/bg.jpg); margin: 20px; padding-left: 5px; }
.huadong div{height: 40px; float: left; background: url(image/bg.jpg) right 0px; padding-right: 5px; line-height: 40px; }
</style>
</head>
<body>
<ul>
<li>
<span class="left"></span>
<div class="center">我是一个基础的滑动门</div>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<div class="center">我可以自适应你输入文字的长度</div>
<span class="right"></span>
</li>
</ul>
<ul class="huadong">
<li>
<div>我是拓展的</div>
</li>
<li>
<div>原理是一张大图</div>
</li>
<li>
<div>li可以去背景的左圆角 div取右圆角</div>
</li>
<li>
<div>li可以去背景的左圆角 div取右圆角 但是我有一个缺点就是如果我太长的话就会有bug 会看见圆角</div>
</li>
</ul>
</body>
</html>
Topic 2 : 浏览器的兼容性问题 :
浏览器的兼容性问题 一直都是我们初学者的难点；
有自己内核的浏览器一共有五个：Chrome（谷歌） Firefox（火狐） IE Opera（欧朋） Safari（苹果的浏览器）；
这里对我们网页兼容性最好的是 火狐 兼容性最差的是IE6 所以我们在测试兼容性的问题的时候 我们一般就使用他们两个浏览器来测试：
1 . 双倍边距的问题 ：
当 外边距方向和浮动方向相同，在ie6浏览器中，一定会出现双倍边距问题；
当外边距方向和浮动方向不同，ie6浏览器中，可能出现双倍边距问题 ;
解决方法：
解决方案：
在出现问题的盒子身上，添加display：inline属性；
又因为双倍边距问题只存在在ie6浏览器中，所以display属性只ie6加载即可，做法就是在属性之前添加一个下划线，任何属性之前添加下划线，表示只有ie6识别
2 . 图片链接在 ie6到ie9 都会出现描边的问题 ；
描边出现在img的身上 ：
解决办法：在清空标签默认样式环节添加属性：border：0；或者border：none；
none比0加载的快 因为0还要加载描边的其他属性 比如是虚线还是实现，是什么颜色的 而none不需要所以他加载的快；
3.img的底部留白问题
注意：代码如果书写不规范，甚至火狐浏览器都有这个问题，一旦书写规范，火狐问题可以规避掉
解决办法：父级添加overflow：hidden
Img添加display：block
注意： 浏览器在处理行内或行内块的时候保留文字的特性处理 ；这就导致了img底部留白的问题，
然后我们就可以把img变成块级的，那么这个问题就可以解决了这就是第二种解决办法的原理；
Topic 3 : css滤镜:
他的作用就是：制作半透明的效果；
子级绝对父级相对；（父相子绝） ： 定位时：子级以父级为参考；
定位哪个标签会把哪个标签变成行内块（行内块不人为的定义宽高的话就要靠内容来把这个标签给撑起来）；
filter兼容的是ie11以下的浏览器（ie11他的兼容性做的更好了，更趋近于火狐了所以他也不兼容filter：alpha（opacity=60）；）；后面的这个60就是百分之60的透明度；
其他浏览器：opacity：0.6；
所以我们要兼容所有的浏览器就要两种滤镜都加上：
例 ：filter:alpha(opacity=60); opacity:0.6;
网页示例：
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css滤镜</title>
<style type="text/css">
*{margin: 0px; padding: 0px; list-style: 0px; border: none; }
.main{ width: 1024px; height: 528px; margin: 0 auto; position: relative; }
.main p{ width: 1004px; height: 100px; position: absolute; left: 0px; bottom: 0px; color: white; padding: 10px; filter: alpha(opacity=60); opacity: 0.6; background : black; }
</style>
</head>
<body>
<div class="main">
<img src="../image/hashiqi.jpg" width="1024" height="528" alt=""/>
<p>
wo shi yi zhi kuai le de ha shi qi <br>
wo jiu shi xi huan dou bi
</p>
</div>
</body>
</html>
注意 ：网页中的示例我们可以看出 半透明背景的那个分区的文字也被半透明化了；
我们解决这个问题的原理为：
我们半透明化是半透明化那个分区里的所有东西我们如果不想把文字也半透明化的话，那么我们可以把他们分到两个不同的标签内；
代码为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css滤镜</title>
<style type="text/css">
*{margin: 0px; padding: 0px; list-style: 0px; border: none; }
.main{ width: 1024px; height: 528px; margin: 0 auto; position: relative; }
.main .touming{ width: 1004px; height: 100px; position: absolute; left: 0px; bottom: 0px; filter: alpha(opacity=60); opacity: 0.6; background : black; }
.main .character{color: white; position: absolute; left: 0px; bottom: 0px; padding: 10px; line-height: 20px; }
</style>
</head>
<body>
<div class="main">
<img src="../image/hashiqi.jpg" width="1024" height="528" alt=""/>
<p class="touming">
</p>
<p class="character">
wo shi yi zhi kuai le de ha shi qi <br>
wo jiu shi xi huan dou bi
</p>
</div>
</body>
</html>