CSS基础(滑动门,雪碧图,网页布局)
2017-08-01 17:49
507 查看
3.11.2017
这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧
CSS可见性(元素可见性)
overflow: hidden; 将超出部分隐藏(部分隐藏)
display: none; 元素隐藏(全部隐藏)(隐藏元素不占位置)
display: block; 显示元素
visibility: hidden; 隐藏元素(全部隐藏)(隐藏元素占位置)
然后就是关于滑动门的讲解,现在的页面中好多地方都会用到滑动门,一般用作于导航背景。
滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果。
滑动门有两个部分:
li -- 左边固定不动的部分,背景左对齐
a -- 右边随着内容变宽的部分,背景右对齐
雪碧图(sprite)也称精灵图
由来:因为网页上有可能有很多小的图片用来做效果,页面上每一张图片都会需要向服务器请求一次,服务器压力很大。把小图集合在一张大图上,将来用到的时候,一次性把小图全都拿过来,这样就会减轻服务器的压力。
雪碧图的使用:用大图作为背景图片,再使用background-position属性控制要显示的区域。
然后就是CSS初始化,这个的目的是为了控制所有的浏览器显示的结果一致,重置掉所有的默认样式,可以更加灵活地控制每一个标签的样式。
不推荐使用 *{margin:0;padding:0;} 因为通配符选择器会对页面中的所有标签产生样式设置,大大的增加了服务器的请求次数,也让样式设置不灵活了。
Css初始化一般是单独写在一个css文件中,然后在HTML页面中的head里使用link标签引用。
最后就是关于网页布局的思路
1、 在我们要开始做一个页面的时候,要首先搭建好目录,在一个大的文件夹里面要有css文件夹,image文件夹,如果页面较多建议再建立一个html的pages文件夹,还有js文件夹等等,这样做的主要目的是为了实现三层分离,还有就是便于代码的管理,也便于后期的维护,严格准守w3c标准。
2、 准备好css初始化文件,可以先写上要常用到的和公用代码,后面如果有需要可以后续添加,初始化文件要独立分开,不能和其他的css文件混合。需要使用时再引用。
3、 准备好这些之后,拿到设计图,要开始分析页面结构,一般是纵向排列,像是堆积木一样一个一个的块搭建的,不同的是页面的搭建是从上往下。
4、 分析完成后开始搭建页面,一块一块的来,在给元素使用选择器命名的时候要有意义,这也是为了代码的整洁和写样式的时候不会发生命名重复(除非是公共样式之类的),还要定好版心,一般页面的版心是固定的,不会改变。版心就是页面的中间部分。
5、 页面搭建好之后就可以开始写css样式了,要新建一个页面样式,实现三层分离。
大概就是这些啦,好好学习,天天向上!
这一篇主要是关于滑动门技术的学习,还有雪碧图(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样式了,要新建一个页面样式,实现三层分离。
大概就是这些啦,好好学习,天天向上!
相关文章推荐
- CSS创建三栏网页布局---CSS基础教程
- 前端基础学习-常见CSS网页布局
- 网页布局之一:XHTML CSS基础知识
- DIV+CSS网页布局常用的一些基础知识整理
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
- CSS网页布局基础
- 网页布局基础-XHTML与CSS基础
- 网页制作中常用的基础知识002-CSS布局与表格布局的区别
- CSS selector选择符 进行CSS网页布局的基础
- 网页设计基础:Div+CSS布局入门教程
- 网页布局基础笔记1 DIV+CSS
- 【CSS+DIV网页样式与布局】——基础知识总结
- DIV+CSS网页布局常用的一些基础知识整理
- CSS网页布局常用的基础知识
- css网页布局基础
- CSS网页布局常用的基础知识
- DIV+CSS网页布局常用的一些基础知识整理
- CSS网页布局基础
- CSS进行简单网页布局(基础知识)