CSS基础(滑动门,雪碧图,网页布局)

时间:2021-09-28 00:03:29

3.11.2017

这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧

CSS可见性(元素可见性)

overflow: hidden;   将超出部分隐藏(部分隐藏)

display:   none;   元素隐藏(全部隐藏)(隐藏元素不占位置)

display:   block;   显示元素

visibility: hidden;  隐藏元素(全部隐藏)(隐藏元素占位置)

然后就是关于滑动门的讲解,现在的页面中好多地方都会用到滑动门,一般用作于导航背景。

滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果。

滑动门有两个部分:

li -- 左边固定不动的部分,背景左对齐

a -- 右边随着内容变宽的部分,背景右对齐

 li {
float: left;
height: 33px;
line-height: 33px;
padding-left: 14px;
background: url("weixin.png") left -192px;}
a {
float: left;
height: 33px;
padding-right: 14px;
background: url("weixin.png") right -192px;}
li:hover {
background-position: left -144px;
}
li:hover a {
background-position: right -144px; }

雪碧图(sprite)也称精灵图

由来:因为网页上有可能有很多小的图片用来做效果,页面上每一张图片都会需要向服务器请求一次,服务器压力很大。把小图集合在一张大图上,将来用到的时候,一次性把小图全都拿过来,这样就会减轻服务器的压力。

雪碧图的使用:用大图作为背景图片,再使用background-position属性控制要显示的区域。

 .btn {
width: 86px;
height: 34px;
background: url("qq.png") no-repeat -350px -110px;
}

然后就是CSS初始化,这个的目的是为了控制所有的浏览器显示的结果一致,重置掉所有的默认样式,可以更加灵活地控制每一个标签的样式。

不推荐使用  *{margin:0;padding:0;}  因为通配符选择器会对页面中的所有标签产生样式设置,大大的增加了服务器的请求次数,也让样式设置不灵活了。

Css初始化一般是单独写在一个css文件中,然后在HTML页面中的head里使用link标签引用。

最后就是关于网页布局的思路

1、 在我们要开始做一个页面的时候,要首先搭建好目录,在一个大的文件夹里面要有css文件夹,image文件夹,如果页面较多建议再建立一个html的pages文件夹,还有js文件夹等等,这样做的主要目的是为了实现三层分离,还有就是便于代码的管理,也便于后期的维护,严格准守w3c标准。

2、 准备好css初始化文件,可以先写上要常用到的和公用代码,后面如果有需要可以后续添加,初始化文件要独立分开,不能和其他的css文件混合。需要使用时再引用。

3、 准备好这些之后,拿到设计图,要开始分析页面结构,一般是纵向排列,像是堆积木一样一个一个的块搭建的,不同的是页面的搭建是从上往下。

4、 分析完成后开始搭建页面,一块一块的来,在给元素使用选择器命名的时候要有意义,这也是为了代码的整洁和写样式的时候不会发生命名重复(除非是公共样式之类的),还要定好版心,一般页面的版心是固定的,不会改变。版心就是页面的中间部分。

5、 页面搭建好之后就可以开始写css样式了,要新建一个页面样式,实现三层分离。

大概就是这些啦,好好学习,天天向上!