1.网站与web标准:web标准中的经典应用模式是“CSS+Div”
五 用CSS制作链接与网站导航
1.超链接基础
1.超链接的基本概念：
.绝对路径
绝对路径是包括服务器规范在内的完全路径。不管源文件在什么位置，通过绝对路径都可以非常精确的将目标文档找到，除非它的位置发生变化，否则连接不会失败。
采用绝对路径的好处是，它与链接的源端点无关。只要网站的地址不变，则无论文档在站点中如何移动，都可以正常实现跳转而不会发生错误。另外，如果如果希望连接到其它站点上的文件，就必须使用绝对路径。
采用绝对路径的缺点在于，这种方式的链接不利于测试。如果在站点中使用绝对路径，要想测试链接是否有效，就必须在Internet服务器端对链接进行测试。
.相对路径
相对路径也叫文档相对路径，对大多数的本地链接来说，是最适合的路径。在当前文档与所链接的文档处于同一文件夹内时，文档相对路径特别有用。文档相对路径还可以用来链接到其它文件夹中的文档，方法是利用文件夹的层次结构，指定从当前文档到所链接文档的路径。
2.使用页面属性设置超链接
<style type=”text/css”>
a {font-family:”黑体”;font-size: 15px; color: #F54447;}
a:visited {color: #627B04;}
a:hover {color: #9A830C;}
a:active { color: #F4C16C;}
</style>
2.链接标记
- a:link：表示未访问过的链接的状态，link选择器不会设置已经访问过的链接的样式。
- a:visited：表示超链接被访问过后的样式
- a:active：表示超链接的激活状态，用来定义鼠标单击链接但还没有释放之前的样式。
- a:hover：表示当鼠标移到链接上时的样式。
3.各种形式的超链接
1.背景色变幻链接
下面使用CSS制作一个背景色变换的超链接
<ul class=”leftmenu”>
<li><a target=”_blank” href=”#”>首页</a>
<li><a target=”_blank” href=”#”>公司简介</a>
<li><a target=”_blank” href=”#”>公司新闻</a>
<li><a target=”_blank” href=”#”>产品展示</a>
</ul>
body {
font-family:”黑体”;
font-size: 14pt
}
.menu {
width:130px;
text-align: center;
}
.menu li {
display: inline;
white-space: nowrap;
}
.menu span,
.menu a:active,
.menu a:visited,
.menuu a:link {
display: block;
text-decoration: none;
margin: 6px 10px 6px 0px;
padding: 2px 6px 2px 6px;
color:#000000;
background-color:#D1F968;
border: 1px solid #CC3300;
}
.menu a:hover {
color: #FFFF00;
background-color:#CC3300;
}
.menu span {
color: #a13100;
} }
2.下划线链接
代码实例:
<style>
.a {
text-decoration:none;
background: url(ti.gif) repeat-x 100% 100%;
padding-bottom; 4px;
white-space: nowrap;}
</style>
font-family:”黑体”;
font-size: 30pt
<p><span class=”a”><a href=”#”>下滑线连接</a></span></p>
3.图像翻转链接
制作原理就是a:link和a:hover在不同状态下，利用background-images显示不同的图像制作而成。
4.边框变换链接
边框变换链接是指当鼠标经过链接时改变连接对象边框的样式，包括边框颜色、样式和边框宽度。
4.项目列表
1.有序列表
1）有序列表标记：ol
ol标记的属性
|
| 属性名 | 说明 |
| 标记固有属性 | type=项目符合 | 有序列表中列表项的项目符号格式 |
| start | 有序列表中列表项的起始数字 | |
| 可在其它位置定义的属性 | id | 在文档范围内的识别标志 |
| lang | 语言信息 | |
| dir | 文本方向 | |
| title | 标记标题 | |
| style | 行内样式信息 |
基本语法：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
...
</ol>
语法说明：
在该语法中，<ol>和</ol>表示这有序列表的开始和结束，而<li>和</li>标记表示一个列表项的开始。
2）有序列表的类型：type
在默认情况下，有序列表的类型是数字，通过type属性可以设置有序列表的类型。
| 有序列表的类型 | |
| 类型值 | 含义 |
| 1 | 数字1、2、3/4...... |
| a | 小写英文字母 |
| A | 大写英文字母 |
| i | 小写罗马数字 |
| I | 大写罗马数字 |
基本语法：
<ol type=”有序列表的类型”>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
...
</ol>
3）有序列表的起始数值：start:使用start属性可以调整有序列表的起始数值，这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。
基本语法：
<ol start=”起始数值”>
<li>列表</li>
<li>列表</li>
<li>列表</li>
...
</ol>
2.无序列表
1）无序列表标记:ul
| ul标记的属性 | ||
|
| 属性名 | 说明 |
| 标记固有属性 | type=项目符合 | 定义无序列表中列表项的项目符号图形样式 |
| 可在其他位置定义的属性 | id、class | 在文档范围内的识别标志 |
| lang | 语言信息 | |
| dir | 文本方向 | |
| title | 标记标题 | |
| style | 行内样式信息 | |
基本语法：
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
...
</ul>
2）设置无序列表的类型：type：默认情况下，无序列表的项目符号是●，而通过属性可以调整。
| 类型值 | 含义 |
| disc | ● |
| circle | ○ |
| square | ■ |
基本语法：
<ul type=”符号类型”>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
3.菜单列表标记
基本语法：
<menu>
<li>列表项<//li>
<li>列表项<//li>
<li>列表项<//li>
...
</menu>
4.目录列表：dir：用于显示文件内容的目录大纲，通常能够设计一个压缩的比较窄的列表，以及显示一系列的列表内容。
基本语法：
<dir>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</dir>
5.横排导航
1.文本导航
一般位于网站的顶部，是一种比较重要的导航行驶。
2.标签式导航
3.竖排导航
#nave对象是竖排导航的容器。
六 CSS+DIV布局入门基础
设计网页的第一步时设计布局
1.网站与web标准:web标准中的经典应用模式是“CSS+Div”
2.什么是web标准
网页主要由3个部分组成：结构、表现和行为。对应的网站标准也分为3个方面：结构化标准语言，主要包括XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
1）结构
结构（structure）对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。
2）表现
表现（presentation）用于对信息进行板式、颜色、大小等形式的控制。在表现中用到的技术主要是CSS叠层样式表。
3）行为
行为（behavior）是指文档内部的模型定义及交互行为的编写，用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript.
DOM（Document Object Model）文档对象模型：是浏览器与内容结构之间的沟通接口，使你可以访问页面上的标准组件。
ECMAScript脚本语言：是标准脚本语言，用于实现具体的界面上对象的交互操作。
3.怎样改进现有网站
大部分设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHEML+CSS的方法需要一个过程，要分阶段来逐步达到网站标准。
1.初级改进
.为网页添加正确的doctype
.设定一个名字空间
.声明编码语言
.用小写字母书写所有的标签
.为图片添加alt属性
.给所有属性值加引号
.关闭所有的标签
2.中级改进
.用CSS定义元素外观
.用结构化元素替代无意义的垃圾代码
.给每个表格和表单加上id
4.Div标记与Span标记
1.Div概述
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>DIV的简单实用</title>
<style type=”text/css”>
<!--
div{
font-size:26px;
font-weight:bold;
font-family:Arial;
color:#5C1012;
background-color:#A3F020;
text-align:center;
width:500px;
height:150px;
}
-->
</style>
</head>
<body>
</div>div的简单实用</div>
</body>
</html>
2.Div与Span的区别
Span是用来定义内嵌内容而不是大块内容的，Div是一个块级元素也可以包含段落、标题、表格，甚至如章节、摘要和备注等。而Span是行内元素，span的前后是不会换行的，他没有结构意义，纯粹是应用样式，当其他行内元素都不适合，可以使用span。
5.盒子模型
1.盒子模型概念
一个盒子由4个独立部分组成
最外面的是边界（margin）
第二部分是边框（border）。边框可以有不同的样式
第三部分是填充（padding）。填充可以用来定义内容与边框之间的空白。
第四部分是内容区域。
填充边框都分为“上、右、下、左”4个方向。为了计算盒子所占的实际区域必须加上padding、border和margin。
实际宽度=左边界+左边框+左填充+内容高度+右填充+右边框+右边界
2.border
1）边框样式：border-style
基本语法：
border-style：样式值
border-top-style：样式值
border-right-style：样式值
border-bottom-style：样式值
border-left-style：样式值
语法说明：
| 边框样式取值和含义 | |
| 属性值 | 描述 |
| none | 默认值，无边框 |
| dotted | 点线边框 |
| dashed | 虚线边框 |
| solid | 实线边框 |
| double | 双实线边框 |
| groove | 3D凹槽 |
| ridge | 3D凸槽 |
| inset | 使整个边框凹陷 |
| outset | 使整个边框突起 |
2）边框颜色：border-color
基本语法：
border-color：颜色值
border-top-color：颜色值
border-right-color：颜色值
border-left-color：颜色值
border-bottom-color：颜色值
3）边框宽度：border-width
基本语法：
border-width：宽度值
border-top-width：宽度值
border-right-width：宽度值
border-left-width：宽度值
border-bottom-width：宽度值
语法说明：
| border-width的属性值 | |
| medium | 默认值 |
| thin | 细 |
| dashed | 粗 |
2.padding
基本语法：
padding：取值
padding-top：取值
padding-right：取值
padding-left：取值
padding-bottom：取值
语法说明：
td {padding: 0.5cm 1cm 4cm 2cm}
3.margin
基本语法：
margin：边距值
margin-top：上边距值
margin-bottom：下边距值
margin-left：左边距值
margin-right：右边距值
语法说明：
取值范围如下：
.长度值相当于设置顶端的绝对边距值，包括数字和单位。
.百分比是设置相对于上级元素的宽度的百分比，允许使用负值
.auto是自动取边距值，即元素默认值。
代码如下：
.top {margin-top: 4px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 4px;}
6.盒子的浮动与定位
1.盒子的浮动float
基本语法：
float:none| left | right
语法说明：
none是默认值，表示对象不浮动；left表示对象浮在左边；right表示对象浮在右边。
CSS允许任何元素浮动。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。
2.position定位
基本语法：
Position: static | absolute | fixed | relative
语法说明：
.static：静态（默认），无定位
.relative：相对，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。
.absolute：绝对，将对象从文档流中拖出，通过width、height、left、right、top、bottom等属性与margin、padding、border进行绝对定位。绝对定位可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。
.fixed：固定。
3.z-index空间位置
z-index是设置对象的层叠顺序的样式。该样式只对position属性为relative或absolute的对象有效。
基本语法：
z-index：auto，数字
语法说明：
auto遵从其父对象的定位，数字必须是无单位的整数值，也可以取负值。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定次属性的定位对象，z-index值为正数的对象会在其之上，负数的在下。（z-index用来定位元素，用来确定定位元素在垂直于显示屏方向（成为Z轴）上的层叠顺序）
实例代码：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>z-index</title>
<style type=”text/css”>
<!--
#Layer1 {
position:absolute; left:56px; top:115px; width:283px; height:140px;
z-index:-5; background-color:#FFA8A9;}
#Layer2 {
position:absolute; left:226px; top:60px; width:286px; height:108px;
z-index:1; background-color:#76FF81;}
#Layer13{
position:absolute; left:256px; top:141px; width:234px; height:145px;
z-index:-10; background-color:#F8F760;}
-->
</style>
</head>
<body>
<div id=”Layer1”><strong>z-index:-5;</strong></div>
<div id=”Layer2”><strong>z-index:1;</strong></div>
<div id=”Layer3”><strong>z-index:10;</strong></div>
</body>
</html>
@欢迎大家指出问题，谢谢
扫一扫
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
