前端教程

首页>前端教程

CSS3教程:border-radius你以为就是个圆角边框吗?

很多人拿border-radius就是做点圆角效果,或者弄一个圆形的头像(说的就是以前的自己^_^),但,这些都是没有真正发掘border-radius的价值的!先看看一些别人的效果↓˂a title="各种参数设置的效果展示,包括兼容性" href="http://muddledramblings...

CSS3教程:box-shadow盒阴影详解

最近忙着暑期补课,在招生路线上,搞得很紧张啊,我的痘痘都多冒了好几颗。关键是一个星期补六天课,还包括三个晚上,觉得日子怎么过得那么慢呢!忙里偷闲,还是继续CSS3的学习之旅吧。讲完了text-shadow,今天我们来八一八box-shadow这个看起来很相似...

CSS3教程:text-shadow文字阴影详解

在web的早期战场,要实现文字或者图片或者盒的阴影效果,必须启用图片,导致html代码和css代码量都要增加很多,而现在,利用css3新增的text-shadow和box-shadow可以轻松完成阴影的添加,而且效果自然,不逊于ps制作出的效果,唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。...

CSS第十八课:PC端和移动端下拉菜单的实现

在CSS第八课讲解了如何制作水平和纵向导航,然后拖到了第十八课才讲解下拉菜单,为什么呢?因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定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效果查看案...
Top