2017_7_19图片整合、活动门、网页制作心得

图片整合、滑动门、网页制作心得

隐藏元素：visibility:hidden;隐藏但是占据位置

display:none;隐藏且不占据位置

图片整合

css sprites精灵图、雪碧图，将导航背景图片、按钮背景图片等有规则的合并成一张背景图片（精灵图、雪碧图），即将多张图片合为一整张图，然后用background-position来实现背景图片的定位技术。

图片整合优点：1.通过整合来减少对服务器的请求次数，从而提高加载速度；2.通过整合来减少图片体积。

滑动门

滑动门技术：利用css背景图像可层叠性。

滑动门特征：兼具传统布局的图像效果，与css布局的高效扩展性。

案例：<li>

<a><span></span></a>

<li>

1.不能给li加背景图，是因为li的padding-left是a的margin-left，这样会导致hover li的时候，在li的padding-left区域不能触发a；

2.滑动门的实质是让a标签background-image放在left，span的background-image放在右边，然后利用a标签的padding-left，为span的margin-left，从而使span的背景图不会叠a的上面。

网页制作心得

1.base.css中，一般不使用*通配符，而是写出来，常用的h1,h2,h3,h4（一般只到h4）,p,ul,li,dl,dt,dd{margin:0;padding:0;}

2.版心容器.container{width:; margin:0 aut0;}写在base.css中；而#header #banner等宽一般设置为width:100%。

3有边框的a标签，且边框小于a的height时，需要在a标签内套span标签， 这是为了保证整个区域都可以点击选择a；如果将边框直接加在a标签中，那么a的height必须减少，如果用margin填充，那么则无法覆盖整个区域。

4<dl>

<dt></dt>

<dd></dd>

<dd></dd>

</dl>

 只想显示dt，只有hover dt时，再出现dd。显示命令dl:hover dd{display:block;},其中dl不能用dt代替，是因为dt与dd是兄弟元素，hover dt不能显示dd，只有是包裹dd的父级元素才可以。