最近更新

CSS3教程:background-image之放射性渐变(radial-gradient)详解

 写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。容我躺躺,再站起来继续战斗!缓过来了,开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。别人都说径...

CSS3教程:background-image之线性渐变(linear-gradient)最in版!

 long long  ago,我很不喜欢用CSS3的渐变,宁愿一切纯色扁平,因为那时候的渐变TMD太复杂了,版本太多了,真的很想死!今天百度linear-gradient的关键词,翻出的文章几乎都是2011年——2013年的,版本太out了,难道不知道webkit和moz已经手...

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

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

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

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

遵守规则还是为了挑战而挑战规则?

7月7日学生阶段性考试,我第一堂监考是15软件四班的oracle数据库。阶段性考试比统考要严格很多,因为这是校内的考试,也是检测学生这个阶段的学习效果。按照考试规则,我进入教室后,要求同学们把手机上交到手机袋里面,这时候有四个学生主动交上来了,但是还是其他二三十个学生纹丝不动,我稍微有点诧异,考试上...

上课你坐前排还是后排决定你的未来!

根据我站讲台十来年的经验,我发现越坐在前排的学生学习成绩越好,毕业后找到好工作的机会更大,越后排的学生成为学渣的几率越大。为什么小小一个座位对人的影响如此之大呢?一、学生的心理如果学生对学习或者对这门课程感兴趣,心理上是接受的,甚至是渴望的,那么在行动上就会主动的往前靠,希望离老师更近,听得更清楚,...

你是拖延症狂魔吗?

15三年软件二班的DIV+CSS课程正式结束了,7月6日结课,在六月底我就明确告知在最后一天上交结课作业,请同学们提前准备。但是鉴于班上很多同学没有笔记本,不方便完成作业,于是从7月4日星期一我就停课,把每天的四节课让给同学们完成作业。在此期间,同学们完成作业的过程很值得思考,可以从侧面反映出不同学...

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效果查看案...

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

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

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

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

CSS第七课:图片样式

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