CSS教程

首页>前端教程>CSS教程

CSS第十七课:绝对定位(position:absolute)详解

从小我们学习物理,就知道一句话:“运动是相对的”。或者有人生阅历丰富的人以一种长者的口吻告诉你,“没有什么是绝对的”。那么,绝对定位是否可以说并不是真正的绝对呢。同上,先来看看W3C官方文档怎么说。设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始...

CSS第十六课:相对定位(position:relative)详解

网页的元素默认有四种定位:static(静态文档流)、fixed(固定)、relative(相对)、absolute(绝对)。static就是文档中按照先后顺序正常出现的元素,也是默认的定位方式。比如标题、段落等等普通文档流元素。来自于W3C官方文档的引用:除非专门指定,否则所有框都在普通流中定位。...

CSS第十五课:固定定位(position:fixed)在布局上的应用

固定布局非常有辨识度,那就是无论页面有多长,滚动条怎么滚动,固定的容器都相对于浏览器是静止的,脱离了整个文档流的限制,漂浮在高空中,纹丝不动。常见的固定布局有侧边栏和头部导航固定,“返回到顶部”,“分享”、弹出层等等。比如:赵老师网站前端博客的左边侧栏就是固定不动的。比如:网易的头部导航就是固定不动...

CSS第十四课:头尾自适应+主体固定宽度居中对齐布局

完全自适应的网站很少见,估计是难度有点大吧,或者说是在国内的环境下,精确布局能有更好的视觉和用户体验。所以,很多网站就退而求其次,头尾内容少的部分自适应浏览器,而中间主体内容比较多的还是采用固定宽度居中对齐的方式布局。就好像一个“工”字一样。典型的网站有:站酷查看案例一、百分比的width和min-...

CSS第十三课:固定宽度布局

现在互联网上90%的网站依然采用的是固定宽度布局,然后相对于浏览器居中显示。固定宽度布局需要非常精细化的计算容器的宽高,但是相对来说制作比自适应布局更简单,但维护成本高。腾讯、淘宝等首页都是典型的固定宽度+居中的布局。查看案例这个案例的实际意义不大,因为我们网页几乎都不会这样布局,这个案例的目的是拿...

CSS第十二课:float(浮动)

很多人一提到布局,首先想到的是DIV+CSS,然后DIV+CSS布局的核心就是浮动,其实呢,我想说的是,浮动刚开始并不是拿来布局的,只是table布局out之后,浮动刚好可以实现这种效果,就拿来用了,效果还不错,但是浮动带来的破坏性也是非常大的。今天这篇文章就认真的谈一下浮动。一、浮动的W3C官方解...

CSS第十一课:表单使用float(浮动)去掉控件之间的间隔

每一个网站都应该有一个搜索表单,因为当网站内容太多的时候,依靠导航去翻找内容太困难了,所以翻页太累,不如直接搜索。现在的搜索表单的样式都几乎是扁平化设计,用图片的很少了。查看案例  案例下载完成普通的表单设计的难点在于如何控制输入框和按钮的高度对齐,以及去掉两个控件之间的间隔。因为inpu...

CSS第十课:为文章列表前面添加小图标和数字排行榜

文章列表在网站上占据很大的面积,如何制作出美观的文章列表,以及如何在文章列表前面添加各种小图标,或者有数字的排行榜呢?要掌握这篇文章的内容,需要有背景定位的基础知识哦,如果还不会的童鞋,建议先学习第九课的内容。CSS第九课:利用background-position完成css sprite效果查看案...

CSS第九课:利用background-position完成css sprite效果

刚才写了一大篇,结果网络出问题,没有保存上,气的吐血。最近DNS总是解析出问题,阿里云总说很好,没问题,害的我现在一点心情都没有了。重新写一篇文章的感受就是味同嚼蜡,好吧,不要把坏情绪扩散开来,影响到读这篇文章的童鞋们。进入正题吧。背景是网页非常重要的一个元素,背景颜色和背景图片的应用为网站增色不少...

CSS第八课:利用display:block做纵向导航和水平导航

一个网站,主导航的重要性不言而喻,美观、实用、交互、结构清晰都是要点。前面我们已经学习了超链接a的基本样式,普通超链接的样式主要是鼠标经过的时候改变文字颜色和下划线。而主导航的样式一般改变的是背景颜色或者背景图片。这两年流行扁平化设计,几乎都是纯色为主了。今天我们利用display:block这个关...

CSS第七课:图片样式

图片是网页元素中非常重要的内容,精美大气,排版合理的美图会为网站加分不少。图片一般有哪些常规的样式可以设置呢?首先明白图片是inline-block(内联块状)对象,就是图片可以并排在一起,可以内联,但是图片本身有宽高,又是一个块状对象。查看案例 下载案例一、为图片设置边框和去掉边框一张图...

CSS第六课:文本样式

今天早上,康晓玲同学拿着一个U盘在我面前晃了一晃,问道,老师,这是你的吗?我看着那个熟悉的U盘,不正是我朝思暮想,迷失了一天的U盘吗?失而复得的惊喜实在太大了,让我旋转、跳跃、闭上眼……在此,感谢康晓玲同学,你拯救了我32G的教学资料,我的命,咳咳……,又跑题了!回到正题,大家认为讲完了margin...

CSS第五课:margin外边距、padding内边距详解

今天32G的U盘掉了,其实优盘无所谓,关键是里面满满的教学资料,好多新内容还没有备份到电脑上,好心塞!一点幽默的开头语都想不出来了,直接进入正题吧。一、认识谷歌浏览器“审查元素”中的盒模型。查看一个元素,只需要看这个图,你就应该知道该对象有这几个属性值:1、宽高(336px*114px)2、padd...

CSS第四课:元素的width、height、border属性

一、width(宽度)和height(高度)不是所有的html元素都可以设置宽高的。像div一样的块状对象可以设置宽高,但是像a、span一样的内联对象就不可以设置宽高,除非先转换成块状对象。如果对块状,内联对象不清楚的童鞋,可以先看这篇文章:CSS教程:display常用的四个值(block,in...

CSS第三课:选择器的继承、叠加、冲突优先级详解

CSS的全名叫“层叠样式表”,“层叠”是非常关键的一个词,代表了不同来源的样式在最终的效果上呈现继承、叠加、冲突覆盖等。一、CSS的五种来源1、浏览器默认样式2、浏览器用户自定义样式3、<link>外部样式表4、<style>内部样式表5、<标签  style...

CSS第二课:如何应用CSS到网页中?

CSS如何应用到网页中呢?大致有三种方法:1、行间样式表2、内部样式表3、外部样式表一、行间样式表<h1 style="text-align:center;color:#f90;">文章标题</h1>很明显,这种写法,style样式和html结构...

CSS3教程:利用border的transparent特性完成面包屑导航

border属性在CSS3新增了很多样式,比如border-radius圆角样式,其中可以为border-color设置transparent值则实现了利用该样式绘制三角形等的能力。transparent表示透明,透明不代表不存在。在CSS2里面,只能为background-color设置该值,在C...

CSS第一课:CSS简介及选择器介绍

CSS,全名为“层叠样式表”,Cascading Style Sheets,样式表比较好理解,就是为网页添加了样式,而层叠比较难理解,它的核心是“继承”与“冲突”。CSS的目的:重定义HTML的默认样式。也许你觉得HTML标签的默认样式很丑,但是却没有在意过这些标签为什么丑,它有什么默认的样式?我如...

CSS3教程:box-shadow完成盒阴影效果

与text-shadow的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。如果对盒对象不清楚的童鞋,可以先看这篇文章:CSS教程:display常用的四个值(...

CSS教程:display常用的四个值(block,inline,none,inline-block)

网页的元素总体可以概括为两大类:1、块状对象(block)2、内联对象(inline)一、什么是块状(block)对象?无论宽度多少,都独占一个通栏的,不能和别的对象并排在一起的就是。比如h1~h6,div,ul,li,p等元素。可以通过浮动(float)实现块状元素的并排,但是会产生高度不自适应和...
Top