福州网站设计使用html5和css3最新制作企业网

  • 福州网站设计使用html5和css3最新制作企业网已关闭评论
  • A+

在福州网站建设众多的网站设计公司里面,基本上都是用html5开发新的企业网站了。福州嘉艺网络燕狂徒给大家介绍下html5在福州网站设计中的好处
福州网站设计使用html5和css3最新制作企业网

HTML5是HTML标准的第五次修订, 由W3C推荐, 它的开发目标是为桌面和移动平台带来无缝衔接的丰富内容。基于其广泛的应用前景, HTML5已成为当前网页设计的主要技术, 也是高校《网页设计与制作》课程的基础内容。网页设计离不开网页排版的层叠样式表CSS, CSS3是当前最新的CSS技术, 有效运用CSS3可令网页的布局更加灵活, 页面效果更新颖美观, 其图形图像特效和动画效果已经能够取代Flash或Java Script的很多特效。脱离了CSS3, HTML5将黯然失色无法展示其强大的支撑能力。本文重点阐述CSS3的扩展功能, 以简明有代表性的案例对CSS3技术应用进行探讨, 并以此作为HTML5网页的教学拓展。

1 CSS3新技术概述

CSS即层叠样式表 (Cascading Style Sheet) 。在网页制作时采用层叠样式表技术, 可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS3是CSS技术的升级版本, 相比原来的CSS2版本, CSS3新增了八大功能, 分别如下。

(1) 圆角:可以指定一个元素的任意一个角或全部角为圆角, 还可以设置圆角的半径 (即曲度) ;

(2) 多背景:在CSS3中可以在一个元素中显示多个背景图像, 还可以将多个背景图像进行重叠显示;

(3) @font-face:允许用户输入自己的字体出现在网站上, 即使该特定的字体在终端计算机上没有安装;

(4) 动画:使用@keyframes规则创建由当前样式逐渐改为新样式的动画效果;

(5) 渐变色:允许元素设置背景双色或多色、线性或径向等平稳过渡的渐变色;

(6) box-阴影:可为盒子元素图像元素等添加阴影, 阴影可设置为半透明的或渐变色;

(7) RGBa-透明色:RGBa中的a代表透明色, 用于设置元素不透明度。

(8) 文字阴影:设置文字阴影效果。

2 CSS3新技术对盒子背景、图像、表格的支持

2.1背景渐变色

以下代码实现红、黄、蓝线性渐变的背景色, 若将最后“background”属性修改如下则实现红、黄、蓝径向渐变的背景色, 网页效果如图1 (b) 。

background:radial-gradient (red, yellow, blue) ;

CSS3定义渐变的颜色数可以多于等于2种, 各颜色间用逗号 (, ) 分隔开。

2.2 CSS3半半透透明明、圆角、阴影图像特效

以下代码实现图像的半透明、圆角及阴影特效,其中, opacity属性的值在0~1之间, 值越小图像越透明。border-radius属性通常有三种取值:属性值只有一个值时, 如“border-radius:70px”表示四个边角均为半径70px圆角;属性值有2个值时表示两对对角的圆角设置;属性值有4个值时按左上、右上、右下和左下分别表示各个角圆角设置。

2.3多图像背景

以下代码实现将三张图像设置成重叠背景, 原图及重叠背景网页效果。当设置多张图像时, 这些背景图是分层的, 先读入的图像将置于最前端。

2.4 CSS3的圆角表格

CSS3的圆角功能不仅能对图像产生效果, 其对表格元素同样可以实现, 以下CSS3样式就能将表格及表项都设置成圆角,

table{border-radius:50px;}

td{border-radius:50px;}