网页设计（二）——HTML与BOX

HTML标签

HTML5简介

DIV与CSS布局入门

        认识盒模型

        外边距与内边距

        边框与CSS布局理念

用CSS定位控制网页布局

        position定位

        浮动定位

        定位层叠

        常见布局类型

移动网页设计基础CSS3

        边框与背景

        文本与多列

        转换与过渡

        动画与用户界面

HTML标签

HTML是网页制作的标准语言，所以无论什么样的网页制作软件都提供直接以HTML的方式来制作网页的功能。

段落标签<p></p>

文本标签<font></font>

超链接标签<a href=""></a>

图像标签<img src="images/tu.gif">

表格标签<table ...>

HTML5简介

HTML5是2010年正式推出的，将部分的JavaScript语句使用新的属性取代。以及在另外一些方面有更加优秀的性能。

向后兼容、更加简化。

HTML5语法中的三个要点：可以省略标签的元素（部分省略：li dt dd p rt rp optgroup option colgroup thead tbody tfoot tr td th; 全部省略：HTML  head  body  colgroup  tbody）；

                                                取得Boolean值的属性；

                                                省略属性的引用符。

新增的主体结构元素：article元素

<article>

        <header>

                <h1>文章标题</h1>

                <p>发表日期：<time update="pubdate">2014/12/09</time></p>

        </header>

        <p>具体文章

        </p>

        <footer>

        <p><small>版权所有@诚信教育</small></p>

        </footer>

</aritcle>

section元素、nav元素、aside元素。

新增的非主体元素：header元素、hgroup元素、footer元素、address元素、

DIV与CSS布局入门

使用DIV与CSS布局可以使结构 更为简洁，定位更为灵活。

认识盒模型

CSS盒子是装东西的，如果我们要将文字内容、图片布局到网页中，就需要像盒子一样的东西装下它们。

所有页面中的元素都可以被看作是一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即内边框padding，盒子本身就有边框border，而盒子边框外和其他盒子之间，还有边距margin。

内边距、边框和外边距都分为“上、下、左、右”四个方向，既可以分别定义，也可以统一定义。

CSS布局理念

无论使用表格还是CSS，网页布局都是把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是Div标签。CSS排版是一种很新的，首先要将页面使用div整体划分为几个版块，然后对各个板块进行CSS定位，最后在各个版块中添加相应的内容。

        将页面划分为Div分块

        在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面划分为那些模块，各个模块之间的父子关系等。以最简单的框架为例，页面由Banner、主体内容Content、菜单导航links和脚注footer几个部分组成。各个部分分别用自己的id来标识。

 设计各块的位置

用CSS定位

整理好页面的框架后，就可以利用CSS对各个板块进行定位，以实现对页面的整体规划，然后再往各个板块中添加内容。

 

 用CSS定位控制网页布局

在网页开发中，布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。CSS的布局主要涉及两个属性，position和float。CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

position定位

通过使用position属性，可以选择四种不同类型的定位，可选值如下。

static：无特殊定位。

absolute：绝对定位，使用left、right、top‘bottom等属性进行绝对定位。而其层叠可通过ｚ－index属性定义，此时对象不具有边距，但仍有补白和边框。

relative：相对位置，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

fixed：固定位置。

 固定定位fixed

当容器的position属性值为fixed时，这个容器即被固定定位了。固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。在视野中，固定定位的容器的位置是不会改变的。

相对定位relative

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，通过设置垂直或水平位置，让这个元素相对于它的起点进行移动。

相对定位和其他定位相似，也是独立出来浮在上面，不过相对定位的容器的顶部、底部、左边、右边属性参照对象是其父容器的４条边，而不是浏览器窗口。 

浮动定位

float属性用于定位元素在哪个方向浮动。以往这个属性总被应用于图像，使文本围绕在图像周围，不过在CSS中，任何对象都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float属性

float是相对定位的，会随着浏览器的大小和分辨率的变化而改变。float浮动属性是元素定位中非常重要的属性，常常通过对Div元素应用float浮动来进行定位。

语法：

float:none|right|left

 

这是没有更改float属性的时候的样子，现在添加float属性，变为：

 

 这是经过修改增加float属性之后的结果。

清除浮动clear

clear属性定义了元素的哪些边上不允许出现浮动元素。在CSS1和CSS2中，这是通过自动为清除元素（即设置了clear属性的元素）增加上外边距来实现的。在之后，会在元素上外边距之间增加空间，而外边距本身并不改变。不论哪一种改变，其结果都是一样的，如果声明为左边或右边清除，会使元素的上外边界刚好在该边上浮动圆度的下外边距边界之下。

语法：

clear: none|left|right|both

定位层叠

如果在一个页面中同时使用了几个定位元素，就可能发生定位元素重叠的情况。默认情况下，后添加的元素会覆盖先添加的元素，通过使用层叠定位属性（z-index)，可以调整各个元素之间的显示顺序。

层叠顺序

z-index用来定义定位元素的显示顺序，在层叠定位属性中，其属性值使用auto和没有单位的数字。

语法：

z-index: auto|数字 

 

常见布局类型

一列固定宽度：一列式布局是所有布局的基础，也是最简单的布局形式。一列式固定宽度中，宽度的属性值是固定像素。

一列宽度自适应：在网页设计中自适应布局最常见的一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变宽度或高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。

两列宽度自适应：两列宽度自适应性可以实现左右行列宽度做到自动适应。设置自适应主要通过设置宽度的百分值来实现。

两行两列宽度自适应：

带有边框和边界的图像浮动于文本右侧

创建水平菜单

 

 第十三章 移动网页设计基础CSS3

CSS3是CSS规范的最新版本。其内容包括边框、背景、文本、多列、转换、过渡、动画、用户界面。

边框

圆角边框border-radius

边框图片：border-image

边框阴影：box-shadow

背景

背景图片尺寸background-size；

背景图片定位区域background-origin;

背景绘制区域background-clip;

文本

文本阴影text-shadow

强制换行word-wrap

文本溢出text-overflow

文字描边text-stroke

文本填充颜色text-fill-color

多列

创建多列column-count

列的宽度column-width

列的间隔column-gap

列的规则column-rule

转换：主要包括旋转、扭曲、缩放和移动。

移动translate()

旋转rotate()

缩放scale()

扭曲skew()

矩阵matrix()

过渡：css3的过渡特性能够在web制作中实现一些简单的动画操作，让某些效果变得更具流线性、平滑性。

动画

动画特性能够使格式更加复杂的样式多变化，以及一些互动效果，而不需要任何的flash以及JavaScript代码。

@keyframes规则声明动画

animation使用动画

用户界面

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

box sizing 

resize

outline offset

实例应用

美观的图片排列