第12章 Web标准与CSS网页布局实例
12.1 Web标准与CSS布局
web标准是网站开发中一系列标准的集合，包括XHTML、XML、CSS、DOM和ECMAScript等。制定这些标准是为了便于维护，代码更加简洁，降低带宽的运行成本，更容易被搜索引擎搜索到、改版方便、不需要变动页面内容、提高网站易用性等
12.1.1 什么是web标准
web标准是由W3C和其他标准化组织制定的一套规范集合，web标准的目的在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。
web标准由一系列规范组成，目前web标准主要由三大部分组成：结构（Structure)、表现（Presentation）、行为（behavior）。真正符合web标准的网页设计是指能够灵活使用web标准对web内容进行结构、表现与行为的分离
1.结构（structure）
结构用于对网页中用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML
2.表现（Presentation）
表现用于对信息进行版式、颜色、大小等形式的控制。在表现中用到的技术主要是CSS层叠样式表。
3.行为（Behavior）
行为指的是文档内部的模型定义及交互行为的编写，用于编写交互式文档。在行为中用到的技术主要包括DOM和ECMAScript.
DOM(Document Object Model)文档对象模型：DOM是浏览器与内容结构之间沟通的接口，使浏览者可以访问页面上的标准组件。
ECMAScript脚本语言：ECMAScript.是标准脚本语言，用于实现具体界面上对象的交互操作
12.1.2 CSS布局的优势
自己在项目中体会
12.2 DIV+CSS布局网页基础
12.2.1 认识DIV
DIV是XHTML的一个标记，DIV在使用时以<div></div>的形式出现。DIV本身就是容器性质的，不但可以内嵌table,还可以内嵌文本和其它的HTML代码。
DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIV+CSS布局
12.2.2 一列固定宽度
一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的像素。下面举例说明一列固定宽度的布局方法，具体步骤如下：
1.在HTML文档的<head>与</head>之间相应的位置输入定义的CSS样式代码，如下所示。
<style>
#Layer{
background-color: chartreuse;
border: 3px solid #ff3399;
width: 500px;
height: 350px;
}
</style>2.在HTML文档的<body>与</body>之间的正文中输入一下代码，对div使用layer作为id名称
<div id="Layer">
1列固定宽度
</div>综合：
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css</title>
<!--语法：border:边框宽度 边框样式 颜色值 solid 定义实线样式。-->
<style>
#Layer{
background-color: chartreuse;
border: 3px solid #ff3399;
width: 500px;
height: 350px;
}
</style>
</head>
<body>
<div id="Layer">
1列固定宽度
</div>
</body>
</html>运行结果：
无论浏览器页面如何伸缩，div的宽度都不变
12.2.3 一列自适应
自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。自适应布局需要将宽度由固定值改为百分比。
高度自适应是一个问题，参考链接
一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.在页面中,#layout 是直接放置在body之中,因此它的父级对象
是body,在默认状态下,浏览器并没有给bodyy一个高度属性,因此我们所设置的#layout为height:100%;并不会产生任何效果.但是
一旦我们给body设置了100%之后,它的子级对象#layout 的height:100%;便发生了作用了,这便是浏览器解析规则引发的高度自适应
问题.
代码中除了给body定义了100%之外,还给html对象也应用了想吐的样式定义,这样做的好处是,使用IE与firefox浏览器都能够实现
高度自适应,IE与firefox对页面对象的解析方式存在一定差异.在IE中,html对象默认为100%的高度，body却不是.而在firefox中,
html标签却不是100%高度,因此我们给两个标签都定义为height:100%;，这样可以保证两款浏览器下均能够正常工作.
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1列自适应</title>
<style>
<!-- html,不能省略-->
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}/*这里是关键*/
#Layer1{
background-color: chartreuse;
border: 3px solid #ff3399;
width:80%;
height: 80%;
}
</style>
</head>
<body>
<div id="Layer1">1列自适应</div>
</body>
</html>运行结果：
12.2.4两列固定宽度
两列固定宽度布局非常简单,两列的布局要用两个div,分别将两个div的id设置为left和right,表示两个div的名称,首先为他们设置宽度,然后让两个div在水平线中并排显示,从而形成两列式布局
1.在html的<head>和</head>之间输入定义CSS样式代码,如下所示:
<style>
#left{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 250px;
height: 250px;
float: left;
}
#right{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 250px;
height: 250px;
float: left;
}
</style>2.在HTML的<body>和</body>之间的正文中输入以下代码,对div使用left和right作为id名称
<div id="left">左列</div>
<div id="right">右列</div>eg:综合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列固定宽度</title>
<style>
#left{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 250px;
height: 250px;
float: left;
}
#right{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 250px;
height: 250px;
float: left;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="right">右列</div>
</body>
</html>运行结果:
12.2.5 两列宽度自适应
将宽度改成百分比即可
高度自适应还要加上:
<!-- html,不能省略-->
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}/*这里是关键*/eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列固定宽度</title>
<style>
<!-- html,不能省略-->
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}/*这里是关键*/
#left{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 30%;
height: 30%;
float: left;
}
#right{
background-color: chartreuse;
border: 1px solid #ff3399;
width: 30%;
height: 30%;
float: left;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="right">右列</div>
</body>
</html>运行结果:
12.2.6两列右列宽度自适应
在实际应用中,有时需要左栏固定宽度,右边栏随浏览器自适应大小.只需左栏固定宽度,右栏不设置任何宽度值,且右栏不浮动
eg:
12.3 使用CSS设计网站导航栏
12.3.1 实现背景变换的导航菜单
导航也是一种列表,每个列表数据就是导航中的一个导航频道,使用ul元素以及li元素以及CSS样式可以实现背景变换的导航菜单,具体操作步骤如下:
hover设置鼠标放在元素上时元素高亮状态的样式
eg:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hovor</title>
<style type="text/css">
p:hover{
background-color: yellow;
font-size: 30px;
}
a:hover{
background-color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<p>我命由我不由天</p>
<a href="#">百度一下</a>
</body>
</html>运行结果:
eg:导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现背景变换的导航菜单</title>
<!--padding 填充 即是标签内文字与标签边框的距离 -->
<!--单独的color 文字颜色 列表内的超链接,由于超链接默认蓝色 color不影响 但影响列表元素(左边的点或编号)-->
<style>
#button{
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: "宋体";
font-size: 13px;
background-color: #ff9933;
color: black;
}
#button ul{
/*list-style复合属性 第一个是类型 列表符号 eg: list-style: square url("images/icon.gif") inside; */
list-style: none;
margin:0;
padding: 0;
border: none;
}
#button li{
/*每一个li都有了自己的下边距*/
margin: 0;
border-bottom: 1px solid #ffff00;
}
#button li a{
/*display 属性规定元素应该生成的框的类型。 block 此元素将显示为块级元素，此元素前后会带有换行符。*/
display: block;
padding: 5px 5px 5px 0.5em;
background-color: #ff9933;/*<a>标签的背景不同与ul的背景了*/
color: #fff;/*超链接文字颜色也变了*/
text-decoration: none;/*text-decoration对文本进行修饰，如下划线、删除线等 此处设置为none去掉超链接的下划线*/
width: 100%;
border-right: 10px solid #ffcc00;
border-left: 10px solid #ffcc00;
}
#button li a{
width: auto;/*自动设置宽度 宽度自适应 防止前面设置大了 最靠近标签的那个有效*/
}
#button li a:hover{
background-color: #ffcc00;
color: #fff;
border-right: 10px solid #f0f;
border-left: 10px solid #f0f;
}
</style>
</head>
<body>
<div id="button">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司频道</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">客服介绍</a></li>
<li><a href="#">酒店服务</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">旅行社</a></li>
</ul>
</div>
</body>
</html>运行结果:
12.3.2 利用CSS制作横向导航
display:block使得标签内的内容成块显示
text-algin:center 文本在标签内居中显示
margin:边框与边框之间的距离
padding:单个边框内文本与该边框的距离
eg:横向导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作横向导航</title>
<style type="text/css">
#n li{
float: left;
}
#n ul{
list-style: none;
}
#n ul li a{
color:#ffffff;
text-decoration: none;
padding-top: 4px;
display: block;/*重要 美观*/
width: 100px;
height: 20px;
text-align: center;
background-color: #6600cc;
margin-left: 3px;
}
#n ul li a:hover{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="n">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司频道</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">客服介绍</a></li>
<li><a href="#">酒店服务</a></li>
<li><a href="#">休闲娱乐</a></li>
<li><a href="#">旅行社</a></li>
</ul>
</div>
</body>
</html>运行结果:
12.4 使用CSS设计表单样式
12.4.1 改变按钮的背景颜色和文字颜色
直接在CSS块里写即可
input.ann{
color: XXX;
background-color: XXX;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变按钮背景颜色和文字颜色</title>
<style type="text/css">
input.ann{
border: 3px solid #99cc00;
color: #6600ff;/*文字颜色*/
font-size: 20pt;
font-style: normal;
font-variant: normal;/*font-variant: normal;*/
font-weight: normal;/*font-weight （设置文本的粗细）*/
height: 50px;
width: 100px;
line-height: normal;
background-color: #999;
}
</style>
</head>
<body>
<input type="submit" value="登录" name="Submit" class="ann">
<input type="reset" value="取消" name="close" class="ann">
</body>
</html>运行结果:
12.4.3 设计文本框中的文字样式
利用在input标记内直接插入内嵌样式"style=font-family:"宋体";font-size:12px",可以改变文本框中的文字样式,具体操作步骤如下:
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
textarea{
font-size: 30px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<textarea name="textarea" cols="100" rows="20" style=font-family:"宋体">输入文本</textarea>
</body>
</html>运行结果:
12.5 字体及段落样式设计
12.5.1 利用CSS控制字体大小和行距
CSS提供了包括字体,字号,颜色等多种字体样式,下面设置利用font-size控制字体大小,利用line-height控制行距,具体操作如下
css3设置背景图片的大小
background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
4 background-size:cover;/* 将背景图片等比缩放填满整个容器 */
5 background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS控制字体大小和行距</title>
<style type="text/css">
.dx{
font-family: "华文楷体";
font-size: 30px;
line-height: 30px;
}
p{
background-image: url("images/logo.png");
background-size: 600px 350px;
background-repeat: no-repeat;/*图像不平铺*/
}
</style>
</head>
<body>
<p class="dx">
小女斗胆问公子一句，何为有才，寒窗苦读一朝金榜题名？<br>
小女斗胆问公子一句，何为有才，富甲一方终日锦衣玉食？<br>
小女斗胆问公子一句，何为有才，做个不羁侠客仗剑天涯？<br>
小女斗胆问公子一句，何为有才，权力滔天一人下万人上？<br>
小女斗胆问公子一句，何为有才，杀敌数万做那民族英雄？<br>
小女斗胆问公子一句，何为有才，坐拥天下指点万里山河？<br>
小女斗胆问公子一句，何为有才，少小神童随意七步成诗？<br>
小女斗胆问公子一句，何为有才，满腹诗文受于世人敬佩？<br>
小女斗胆问公子一句，何为有才，佳人在怀且红颜各倾心？<br>
小女斗胆问公子一句，何为有才，负糟糠于红尘不管不顾？<br>
那公子的确有才，是小女不才配不上公子，此分别各生欢喜
</p>
</body>
</html>运行结果:
12.5.2 制作光晕字体效果
利用Glow滤镜可以使得目标对象产生边缘光晕的模糊效果,下面制作光晕文字效果,具体操作如下
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光晕文字效果</title>
<style type="text/css">
p{
filter: glow(color=#87ca27, strength=10);/*无用*/
filter: drop-shadow(1px 1px 1px yellow);/*上次百度得来*/
/*drop-shadow(水平阴影 垂直阴影 模糊距离 阴影颜色)*/
}
</style>
</head>
<body>
<p>
那年初夏，他十六，她十四<br>
他正直年少不羁的时光，贵为当朝七皇子，深得盛宠<br>
她不过农家少女，却生的可人儿<br>
他带兵打仗，途中遇见了她在荷塘边采莲子，青丝如瀑。一见倾心，他骑着战马，伸出血迹斑驳的手“跟我走。”她愣着头看了他半晌<br>
轻轻的笑了，伸出雪白的小手，他的手很大，让人很安心。她在军中整整待了三年。凯旋而归，那年，还是初夏<br>
她十八，他二十，他被封太子<br>
他许她一世繁华，不顾朝中阻拦，十里红妆，灼灼其华<br>
却在新婚之夜，她一纸离书，告诉他，她早已倾心他人<br>
他冷笑，依旧完婚，新娘不是她<br>
多少年后，某个小山村中，青丝变白发的她依旧在荷塘边采莲<br>
尘满面，鬓如霜，她永远会记得，皇后的话：“你若不想毁了他，便走“<br>
现在，我走了，你可安好？
</p>
</body>
</html>运行结果:
12.6 使用CSS设计图片样式
12.6.1 鼠标指针移上图片时渐变的效果
用alpha滤镜设置图像的透明度,来制作鼠标指针移上时图片的渐变效果....已经失效
直接opacity:0~1即可
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标指针移上时图片的渐变效果</title>
<style type="text/css">
.hi img{
/*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);*/
/*-moz-opacity: 0.5;*//*果然还是失效了 直接opacity 0~1内取值即可*/
opacity: 0.3;
}
.hi:hover img{
/*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);*/
/*-moz-opacity: 1;*/
opacity: 1;
}
</style>
</head>
<body>
<a class="hi" href="http://www.baidu.com/"><img src="images/yxz.jpeg"></a>
</body>
</html>运行结果:
12.6.2 设计不重复出现背景
12.5.1 利用CSS控制字体大小和行距已经做过了,即是:
background-repeat: no-repeat;/*图像不平铺*/
12.7 使用CSS控制链接样式
12.7.1 使用CSS实现鼠标指针形状的改变
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现鼠标形状的改变</title>
<style type="text/css">
.shb{
cursor: e-resize;
font-size: 30px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/" class="shb">百度一下</a>
</body>
</html>运行结果:
详情见 第十一章 使用CSS样式表 特效属性部分 11.10 光标属性 cursor
12.7.2 鼠标指针移动到链接文字上时改变文字大小或颜色
前面12.3.1实现背景变换的导航菜单介绍了hover时也有一列
用CSS实现鼠标指针移动到链接文字上时改变文字大小或颜色的具体操作步骤如下
说明:
a:link定义链接文字样式
a:visited:定义已访问链接样式
a:hover定义变换图像链接样式(鼠标放上去时)
a:active定义活动链接样式
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:link{
font-size: 22px;
text-decoration: none;
color: #000;
}
a:visited{
font-size: 22px;
text-decoration: none;
color: #000;
}
a:hover{
font-size: 30px;
text-decoration: none;
color: #00f;
}
a:active{
font-size: 25px;
text-decoration: none;
color: #c9f;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>运行结果:
