图片整合、滑动门、网页制作心得
隐藏元素: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的父级元素才可以。