前端教程

首页>前端教程

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、要有用户能...
Top