前端教程

首页>前端教程

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标签的默认样式很丑,但是却没有在意过这些标签为什么丑,它有什么默认的样式?我如...

HTML第八课:表单

表单的目的是获取用户的信息,然后处理信息并返回给用户结果,比如百度搜索,登录表单,或者保存用户的信息到数据库中,比如注册表单,发表日志,评论别人的文章等。一、表单的结构1、必须有表单的标签<form></form>,把所有可以输入信息的控件包含在表单的标签里面。2、要有用户能...

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

与text-shadow的原理一样,只不过text-shadow是为文字做阴影,而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。如果对盒对象不清楚的童鞋,可以先看这篇文章:˂a href="http://www....

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

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

CSS3教程:text-shadow制作文字阴影效果

在css2时代,如果文字制作了特殊的样式,比如图层样式之阴影发光等效果,必须把该文字保存为图片才能展示在网站上。而css3新增的text-shadow属性,可以轻松实现文字投影、发光、内阴影等很棒的立体效果,具体效果如图:˂...

HTML第七课:图像

图像传达信息的能力与文字一样,甚至更具感染力,所以网页中一定少不了图片的应用。图像主要有三种用法:1、普通图片,用<img/>标签显示在网页中的素材。2、背景图片,用来美化网页或者显示特殊字体效果。3、图片地图热区,实现一张图片有多个超链接。一、普通图片<img/><i...

HTML第六课:列表

列表是组织网页内容非常有用的一种方法。列表主要分为:1、无序列表2、有序列表3、定义列表一、无序列表用在网站的导航(网站主导航,侧边栏导航,文章列表)上,用来组织内容,是一种结构性标签。在li里面可以包含div等布局性的标签。1、基本结构<ul>    &...
Top