一 CSS简介
CSS作用和发展
-
什么是CSS?
(1)CSS(Cascading Style Sheet),称之为层叠样式单。
(2)它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小、颜色、以及元素的精确定位等。
(3)在传统的web网页设计里,使用CSS能让单调的HTML网页更富表现力。 -
CSS与传统HTML描述数据方式比较有哪些优势?
(1)表达效果丰富
(2)文档体积比较小
(3)便于信息检索
(4)可读性好 -
现要求显示效果如下:
使用HTML传统描述数据方式:
<body>
<h2>
<font color="#FF0000" face="黑色">CSS标记1</font>
</h2>
<p>CSS标记的正文内容1</p>
<h2>
<font color="#FF0000" face="黑色">CSS标记2</font>
</h2>
<p>CSS标记的正文内容2</p>
<h2>
<font color="#FF0000" face="黑色">CSS标记3</font>
</h2>
<p>CSS标记的正文内容3</p>
<h2>
<font color="#FF0000" face="黑色">CSS标记4</font>
</h2>
<p>CSS标记的正文内容4</p>
</body>
使用CSS传统描述数据方式:
表现和结构分离
<head>
<style>
<!--
h2{
font-family : 黑体;
color : red;
}
-->
</style>
</head>
//表现形式
<body>
<h2>CSS标记1</h2>
<p>CSS标记的正文内容1</p>
<h2>CSS标记2</h2>
<p>CSS标记的正文内容2</p>
<h2>CSS标记3</h2>
<p>CSS标记的正文内容3</p>
<h2>CSS标记4</h2>
<p>CSS标记的正文内容4</p>
</body>
//文档结构
- CSS发展历程
(1)CSS1.0:1996年12月,CSS1.0作为第一个正式规范面世,其中已经加入了字体、颜色等相关属性。
(2)CSS2.0:1998年5月,CSS2.0规范正式推出,这个版本的CSS也是最广为人知的一个版本,以前的前端开发者使用的一般就是这个CSS规范。
(3)CSS2.1:2004年2月,CSS2.1对原来的CSS2.0进行了一些小范围的修改,删除了一些浏览器支持不成熟的属性,我们可以认为CSS2.1是CSS2.0的修订版。
(4)CSS3.0:2010年CSS3规范推出,这个版本完善了前面CSS存在的一些不足,例如:颜色模块增加了色彩校正、透明度等功能,还增加了变形和动画模块等。
二 CSS的基本使用
CSS的引入方式
- CSS可以控制HTML文档的显示。但在控制文档显示之前,首先应需要显示的HTML文档中引入CSS样式单,HTML提供了以下四种引入方式:
- 使用内联样式:这种方式将样式内联定义到具体的HTML元素上,通常用于精确控制一个HTML元素的表现。
- 使用内部样式定义:这种方式是通过在HTML文件头定义样式单部分来实现,在这种方式下,每批CSS样式只控制一份HTML文档。
- 链接外部样式文件:这种方式将样式文件彻底与HTML文档分离,样式文件需要额外引入。在这种方式下,一份样式可控制多份文档。
- 导入外部样式文件:这种方式与第三种方式类似,只是使用@import来引入外部样式表文件。
- 使用内联样式(行内样式)
- 内联样式是所有样式中最为直接的一种,它直接对HTML标签使用style属性。
- .示例效果:
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
<p style="color:#000000; font-style:italic;">正文内容2</p>
<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>
- 使用内部样式定义(内嵌样式)
- 内部样式是将CSS写在与之间,并且用标记进行声明。
- .示例效果:
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{
color : #FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
- 引入外部样式文件
- 此种方式使用频率最高,也是最使用的方式,让结构与表现分离。
- 语法:
<link type="text/css" rel="stylesheet" href="外部样式文件">
- 示例效果:
<html>
<head>
<title>页面标题</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
</body>
</html>
//====================== 1.css ======================//
h2{
color : #0000FF;//蓝色
}
p{
color : #FF00FF;//紫色
text-decoration : underline;
font-weight : bold;
font-size : 20px;
}
//外部样式文件可以给多个html所使用
- 导入外部样式文件
- 这种导入方式和方式功能类似,就是语法不同,在之间使用。
- 语法:
@import "样式文件"
或@import url ("样式文件")
- 示例效果:
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
@import url (1.css);
-->
</style>
</head>
<body>
<h2>CSS标题1</h2>
<p>紫色、粗体、下划线、25px的效果1</p>
<h2>CSS标题2</h2>
<p>紫色、粗体、下划线、25px的效果2</p>
<h3>CSS标题3</h3>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
// ====================== 1.css ====================== //
h2{
color : #0000FF;//蓝色
}
p{
color : #FF00FF;//紫色
text-decoration : underline;
font-weight : bold;
font-size : 20px;
}
- 各种方式的优先级问题
- 一个HTML文件中可以同时使用以上四种样式方式,当四种方式中有相同的属性的时候,它们的优先级是怎样的?
优先级顺序:内联 > 内部 > import > link
提示:
虽然各种CSS样式加入页面的方式有先后的优先级,但在设计网站的时候,最好只使用1-2种,这样既有利于后期的维护和管理,也不会出现各种各样的 “ 撞车 ” 的情况,便于设计者理顺设计的整体思路。
三 CSS选择器
CSS常用选择器的介绍
- CSS定义的语法格式:
Selector{
property : value1;
property : value2;
}
- 上面的语法可分为两个部分
(1)Selector(选择器):选择器决定该样式定义对哪些元素起作用。
(2){property : value1 ; property : value2} (属性定义):属性定义部分决定这些样式起怎样的作用(字体、颜色、布局等)。
总结:学习CSS大致需要掌握两个部分的内容:
- 掌握选择器定义的用法;
- 掌握各种CSS属性的定义。
- 标记选择器(元素选择器)
E{······} /* 其中E代表有效的HTML元素 */
- 示例效果:
<html>
<head>
<title>页面标题</title>
<style>
p{color:red;font-size:18px;} /* 字体红色,大小18px */
div{background-color:gray;font-size:25px;}
</style>
</head>
<body>
<p>正文内容1</p>
<p>正文内容2</p>
<div>正文内容3</div>
</body>
</html>
- 类选择器
[E] . classValue{······} /*其中E代表有效的HTML元素*/
示例效果:
<html>
<head>
<title>页面标题</title>
<style>
.one{color:red;font-size:18px;} /*字体红色,大小18px*/
div.two{background-color:gray;font-size:25px;}
</style>
</head>
<body>
<p class="one">正文内容1</p>
<p>正文内容2</p>
<p class="two">正文内容2</p>
<div class="two">快内容1</div>
<div class="one">快内容2</div>
</body>
</html>
同时运用多个类选择控制器的运行效果:
<html>
<head>
<title>同时使用两个class</title>
<style type="text/css">
.one{ color:blue; } /* 颜色 */
.two{ font-size:22px; } /* 字体大小 */
</style>
</head>
<body>
<h4>一种都不使用</h4>
<h4 class="one">同时使用两种class,只使用第一种</h4>
<h4 class="two">同时使用两种class,只使用第二种</h4>
<h4 class="one two">同时使用两种class,同时使用</h4>
<h4>一种都不使用</h4>
</body>
</html>
- ID选择器
[E] # idValue {······} /*其中E代表有效的HTML元素*/
- 示例效果:
<head>
<title>ID选择器</title>
<style type="text/css">
#one{font-weight:bold;} /*粗体*/
#two{font-size:30px;color:#009900;} /*颜色*/
div#three{border:2px dotted black /*边框 粗细2px 虚线 黑色*/
background color:#888}
</head>
<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<div>布局块1</div>
<p id="one two">ID选择器3</p>
<div id="three">布局块2</div>
</body>
- 选择器组合
Selector1, Selector2, Selector3, {······} /* 其中Selector1等都是有效选择器 */
<head>
<title>集体声明</title>
<style type="text/css">h1,h2,h3,h4,h5,p{
color:purple;
font-size:15px;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
- 选择器嵌套
Selector1 Selector2 {······} / * 其中Selector1等都是有效选择器 * /
- 示例效果:
<html>
<head>
<title>CSS选择器的嵌套声明</title>
<style type="text/css">
<!--
p b{
color:maroon;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
嵌套式之外的<b>标记</b>不生效
</body>
</html>
四 CSS常用样式属性设置
- CSS字体和文本相关属性
- CSS为控制文本的字体提供了大量的属性,这些属性主要用于设置的字体大小、样式、粗细、类型。常用属性如下:
字体属性标签 | 描述 |
---|---|
font-family | 规定文本的字体。比如:“serif”、“sans-serif”等 |
font-size | 规定文本的字体尺寸 |
font-style | 规定文本的字体样式。主要有normal、italic、oblique |
font-weight | 规定字体的粗细。主要有normal、bold、自定义粗细 |
<style>
h2{font-family:黑体,幼圆;}
p.article{
font-size:20px;
font-style:italic;
}
p.kaiti{
font-family:楷体_GB2312;
font-style:normal;
font-weight:bold;
}
</style>
<body>
<h2>风</h2>
<p class="article">解落三秋叶,能开二月花</p>
<p>过江千尺浪,入竹万竿斜</p>
<p class="kaiti">作者:陈豪</p>
</body>
- CSS为控制文本提供了大量的属性,这些属性主要用于控制文本颜色、修饰、字符间距等外观。常用属性如下:
文本属性标签 | 描述 |
---|---|
color | 设置文本颜色 |
letter-spacing | 设置字符间距 |
line-height | 设置文本行高 |
text-align | 设置文本的对齐方式,只要有left、right、center |
text-decoration | 设置文本的装饰效果,主要有overline、underline、linethrough |
text-indent | 设置文本块首行缩进 |
text-transform | 控制文本的大小写,主要有uppercase、lowercase、capitalize |
word-spacing | 设置单词间距 |
<html>
<head>
<title>文字下划线、顶划线、删除线</title>
<style>
p.one{color:red;text-decoration:underline;text-align:center}
p.two{text-decoration:overline;text-indent:20px;line-height:50px}
p.three{text-decoration:line-through;text-transfrom:uppercase}
p.four{word-spacing:20px;letter-spacing:5px}
</style>
</head>
<body>
<p class="one">我是段落1</p>
<p class="two">我是段落2</p>
<p class="three">my name is zhangsan</p>
<p class="four">my name is lisi</p>
<p>正常文字对比</p>
</body>
</html>
- CSS边框和背景相关属性
- 在HTML中有很多元素都有边框的属性,比如img元素、块级标签元素等。CSS常用边框属性如下:
边框属性标签 | 描述 |
---|---|
border | 在一个声明中设置所有边框属性 |
border-width | 设置四条边框的宽度 |
border-style | 设置四条边框的样式,主要有dotted、solid、double、dashed |
border-color | 设置四条边框的颜色 |
border-left | 在声明中设置所有左边 框属性,对应还有border-right等 |
border-left-color | 设置左边框颜色,对应还有border-right-color等三边的颜色 |
border-left-style | 设置左边框样式,对应还有border-right-style等三边的样式 |
border-left-width | 控制左边框宽度,对应还有border-right-width等三边的宽度 |
<style>
<!--
img{
border-left-style:dotted;
boder-left-color:#FF9900;
border-left-width:5px;
border-right-style:dashed;
boder-right-color:#FF00FF;
border-right-width:5px;
border-top-style:solid;
boder-top-color:#CC00FF;
border-top-width:10px;
border-bottom-style:groove;
boder-bottom-color:#666666;
border-bottom-width:15px;
}
-->
</style>
<body>
<img src="grape.jpg">
</body>
<html>
<head>
<title>合并各CSS值</title>
<style>
<!--
img.test1{border:5px double #FF00FF;}
img.test2{border-right:5px double #FF00FF;
border-left:8px solid #0033FF;}
-->
</style>
</head>
<body>
<img src="peach.jpg" class="test1">
<img src="peach.jpg" class="test2">
</body>
</html>
- 网页背景除了使用颜色同样可以使用图片,CSS提供了相关属性来对背景图片进行精确的控制,常用属性如下:
背景图片属性设置 | 描述 |
---|---|
background | 在一个声明中设置所有的背景属性 |
background-attachment | 设置背景图图像是否固定或者随着页面的其余部分滚动。主要有fixed和scroll两个值 |
background-color | 设置元素的背景颜色 |
background-imag | 设置元素的背景图像。主要有url和none两个属性。 |
background-position | 设置背景图像的开始位置。可以指定too left等,也可以指定具体的像素位置 |
background-repeat | 设置是否及如何重复背景图像。主要有repeat、repeat-x ,repeat-y,no-repeat |
<style>
body{
background-img:url (bg5.jpg);
background-repeat:no-repeat;
background-position:200px 25px;
}
</style>
<body>
<p>CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网
页内容分离的一种标记性语言。CSS是1996年由W3C审核通过,并且推荐使用的。简单的说CSS的引入就是
为了 使得HTML能够更好的适应页面的美工设计。它以HTML为基础,提供了丰富的格式化功能,如字
体、颜色、背景、整体排版等等,并且网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括
显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮,使用
CSS设计的优秀页面层出不穷。
</p>
</body>
提示:同样我们可以把这些背景样式属性组合起来写,更简洁。
background : url (bg5.jpg) no-repeat 200px 25px ;
- CSS列表和表格相关属性
- CSS为列表元素提供了相关的属性来进行操作,常用属性如下:
列表元素属性标签 | 描述 |
---|---|
list-style | 在一个声明中设置所有的列表属性。 |
list-style-image | 将图像设置为列表项标记。主要有URL值。 |
list-style-position | 设置列表项标记的放置位置,主要有outside和inside两个值 |
list-style-type | 设置列表项标记的类型。主要有disc、circle、square、decimal、 decimal-leading-zero、lower-roman、 upper-roman、lower-greek、lower-latin、 upper-latin、armenian、georgian、none |
<html>
<head>
<title>图片符号</title>
<style>
<!--
body{background-color:#c1daff;}
li{background-color:#aaa}
-->
</style>
</head>
<body>
<p>使用图标作为列表项标记</p>
<ul style="list-style-image:url(icon1.jpg)">
<li>Road cycling 公路自行车赛</li>
<li>Track cycling 场地自行车赛</li>
<li>sprint 追逐赛</li>
</ul>
<p>使用数字作为列表项标记,并将列表项标记放在列表元素内</p>
<ol style="list-style-type:decimal;list-style-position:inside">
<li>java技术</li>
<li>android技术</li>
<li>c技术</li>
</ol>
</body>
</html>
- CSS为表格元素提供了相关的属性来进行操作,常用属性如下
表格元素属性 | 描述 |
---|---|
border-collapse | 设置是否把表格边框合并为单一边框。 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
<style type="text/css">
#customers
{font-family:"Trebuchet MS";
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{font-size:13px;
border:1px solid #98bf21;
}
#customers th
{font-size:14px;
text-align:left;
background-color:#A7C942;
color:#FFFFFF
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
</table>
- CSS常用伪类别属性
- 对
<a>
标签提供了相关可制动态效果的CSS伪类别属性,常用属性如下:
<a> 伪类别属性 | 描述 |
---|---|
a:link | 超链接的普通样式 |
a:visited | 被点击过的超链接样式 |
a:hover | 鼠标指针经过超链接上时的样式 |
a:active | 在超链接上单击时,即 “当前激活” 时超链接的样式 |
<body>
<table class="charal">
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">心情日记</a></td>
<td><a href="#">Free</a></td>
<td><a href="#">一起走到</a></td>
<td><a href="#">从明天起</a></td>
<td><a href="#">纸飞机</a></td>
<td><a href="#">下一站</a></td>
</tr>
</table>
</body>
<style>
<!--
.charal{
font-size:15px;
background-color:#90bcff;
width:600px;
}
.charal td{
text-align:center;
}
a:link{
color:#005799;
text-decoration:none;
}
a:visited{
color:#000000;
text-decoration:none;
}
a:hover{
color:#FFFF00;
text-decoration:underline;
}
a:active{
color:#FF0000;
text-decoration:underline;
}
-->
</style>
五 CSS定位与DIV布局
盒子模型
- 我们可以把页面中的元素都看成一个盒子,占据着一定的页面空间,这些占据的空间往往比单纯的内容要大,换句话说,我们可以调整盒子的边框和距离的参数来调节盒子的位置。
注意:
从图中可以分析得出:一个盒子的宽度(或高度)是由content + padding + border + margin,并且对于任何一个盒子,都可以分别设定4条边各自的border、padding、margin。因此我们可以利用好盒子的这些属性,就能很好的实现各种各样的排版效果。
- border的属性主要有3个,分别为color、width、style。通常在设置border时常常将三个属性进行很好的配合,才能达到良好的效果。
<html>
<head>
<title>border-style</title>
<style type="text/css">
<!--
div{
border-color:#000000;
border-width:6px;
margin:20px;
padding:5px;
background-color:#FFFFCC;
}
-->
</head>
<body>
<div style="border-style=dashed">The border-style of dashed.</div>
<div style="border-style=dotted">The border-style of dotted.</div>
<div style="border-style=double">The border-style of double.</div>
<div style="border-style=solid">The border-style of solid.</div>
</body>
</html>
- padding用于控制content与border之间的距离。
<head>
<style type="text/css">
<!--
.outside{
padding:10px 30px 50px 100px;
border:1px solid #000000;
background-color:#fffcd3;
}
.inside{
background-color:#66b2ff;
border:1px solid #000000;
width:100%; line-height:40px;
text-align:center;
font-family:Arial;
}
-->
</style>
</head>
<body>
<div class="outside">
<div class="inside">padding</div>
</div>
</body>
总结:
padding的属性概念就这么简单,但在CSS中与margin配合使用,就能使页面千变万化。
- margin指的是元素与元素之间的距离。
<html>
<head>
<style type="text/css">
<!--
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
-->
</style>
</head>
<body>
<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>
<html>
<head>
<title>两个块级元素的margin</title>
<style type="text/css">
<!--
div{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
-->
</style>
</head>
<body>
<div style="margin-bottom:50px">块元素1</div>
<div style="margin-top:30px">块元素2</div>
</body>
</html>
注意:
两个块级标签之间的距离不再是margin-top与margin-bottom的和,而是两者之中的较大者。
- 其实margin除了设置正数以外,也可以设置为复数,当设置为负数时,会使得块向反方向移动,甚至覆盖在另外的块上。
<style type="text/css">
<!--
span{
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
padding:10px;
border:1px dashed #000000;
}
span.left{
margin-right:30px;
background-color:#eeb0b0;
}
span.right{
margin-right:-53px;
background-color:#eeb0b0;
}
-->
</style>
<body>
<span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
-
网页中各种元素都必须有自己的位置,从而搭建出整个页面的结构。在这里我们介绍使用CSS的float、position和z-index属性来进行块元素的定位。
-
float定位是CSS排版中重要的手段。属性float的值很简单,可以设置为left, right或者默认值none,当设置了元素向左或向右浮动时,元素会向其父元素的左侧或右侧靠紧。
强调:
float属性在文字排版和布局排版中经常使用到,要想学好页面的布局,float属性必须用的很熟练。
元素定位
- 查看示例:
<style type="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px;
}
.son1{
padding:10px;
margin:5px;
background-color:#70baff;
border:1px dashed #111111;
float:left;
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
-->
</style>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
当son1设置列float之后,son1的宽度仅仅是它的内容本身加上自己的padding,对于父容器而言它已经不属于父块了,所以在其下面的son2会上来,它内部的内容围绕在son1周围,并且保持着son1所设置的margin距离。
- 倘若将子块son1与子块son2都向左浮,并且给son2添加内容便会发现子块son2不再环绕son1,效果如下:
经验之谈:
如果son1作为菜单导航,son2作为正文内容,然后将父块的边框和背景都隐藏起来,这样就是一种很流行的排版方式。
- 在CSS中可以通过设置块元素的clear属性来清除对float的影响,主要可以设置一下三个值,left、right、both。
- position定位与float一样,也是CSS排版中非常重要的概念。position从字面意思上看就是制定块的位置。即块相对于其父块的位置和相对它自身应该在的位置。
总结:
当将子块的position设置为absolute时,子块已经不再从属于父块,其左边框设置的距离是相对页面body的距离,而不是父块的距离。
- 一个父块包含两个子块,其中一子块设置position属性值为absolute。
总结:
子块1一旦设置position为absolute时,它就已经不在隶属于父块了,因此子块2成了父块中的第一个子块,移到了父块的最上面。
- 当将块的position参数设置为relative时,与将其设置为absolute时完全不同,这时子块是相对于自身在父块的原先位置来进行定位的
总结:
将子块position属性设置为relative时,子块仍然属于父块,只是相对于自己在夫块中的原先位置有了移动改变。
- z-index属性用于调整定位时重叠块的上下位置,当块设置了position属性时,该值便可设置各块之间的重叠高低关系。默认值为0。
DIV+CSS布局实战
从页面的整体排版出发,介绍CSS排版观念和具体方法,包括CSS的排版的整体思路,最终通过实战案例,巩固所学知识。
-
CSS排版观念
(1)CSS的排版是一种流行的排版理念。它将页面首先在整体上进行标记分块,然后对各个块进行CSS定位,最后再在这个块中添加相应的内容。
(2)通过CSS排版的页面,更新十分容易,甚至是页面的拓扑结构,都可以通过修改CSS属性来重新定位。 -
制作一个旅游地介绍的页面实战
(1)对页面整体进行分析
(2)确定整个页面主要分几大块
(3)通过DIV标签进行结构化
(4)通过CSS来美化定位每个模块
- 将页面用DIV分块,将整个页面分为banner、globallink、left、middle、right、footer几个组成部分,各个部分用自己的id来进行标识。整体分块效果如下:
banner就是一张已经制作好的一张图片:
globallink就是一张无序列表,每一个列表是一个超链接实现:
<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>
<li><a href="#">游记精选</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">雁过留声</a></li>
</ul>
页面实战:
/*********************************** css_html.html ***********************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="yangyuan">
<meta name="Keywords" content="新疆,美丽的地方">
<meta name="Description" content="新疆是一个美丽的地方,让人神往的地方,每年都会有很多游人来此游玩">
<title>新疆旅游网</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--整体外层容器-->
<div id="container">
<!--banner条-->
<div id="banner">
<img src="bannerjpg.jpg" alt="新疆风光">
</div>
<!--全局导航条-->
<div id="globallink">
<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>
<li><a href="#">游记精选</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">雁过留声</a></li>
</ul>
</div>
<!--左侧栏-->
<div id="left">
<div id="weather">
<h3><span>天气查询</span></h3>
<ul>
<li>乌鲁木齐 雷阵雨 20℃~31℃</li>
<li>吐鲁番 多云转阴 20℃~28℃</li>
<li>喀什 阵雨转多云 25℃~32℃</li>
<li>库尔勒 阵雨转阴 21℃~28℃</li>
<li>克拉玛依 雷阵雨 26℃~30℃</li>
</ul>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="jiang1.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="jiang2.jpg"></a></li>
<li><a href="#">布尔津</a></li>
<li><a href="#"><img src="jiang3.jpg"></a></li>
<li><a href="#">天山之路</a></li>
</ul>
</div>
</div>
<!--中间内容栏-->
<div id="middle">
<div id="ghost"><a href="#" title="魔鬼城探秘"><img src="ghost.jpg" border="0"></a></div>
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<ul>
<li><a href="#"><img src="beauty1.jpg"></a></li>
<li><a href="#"><img src="beauty2.jpg"></a></li>
<li><a href="#"><img src="beauty3.jpg"></a></li>
<li><a href="#"><img src="beauty4.jpg"></a></li>
</ul>
</div>
<div id="route">
<h3><span>线路精选</span></h3>
<ul>
<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
<li><a href="#">乌鲁木齐——天池——克拉玛依——乌伦古湖——喀纳斯</a></li>
<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
</ul>
</div>
</div>
<!--右侧栏-->
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3>
<p><a href="#" title="点击看大图"><img src="image1.jpg"></p>
<p><a href="#" title="点击看大图"><img src="image2.jpg"></p>
</div>
<div id="food">
<h3><span>小吃推荐</span></h3>
<ul>
<li><a href="#">17号抓饭</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">五一夜市</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<div id="life">
<h3><span>宾馆酒店</span></h3>
<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>
</div>
<!--脚注-->
<div id="footer">
<p>艾萨克©版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>
</div>
</body>
</html>
/*********************************** css.css ***********************************/
body{
background:#2286c6;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial;
}
#container{
width:780px;
height:600px;
text-align:left;
background:#123456;
margin:0px auto;
}
#banner{
margin:0px;
padding:0px;
background:#789;
height:250px;
width:100%;
}
#globallink{
margin:0px;
padding:0px;
}
#globallink ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#globallink ul li{
float:left;
text-align:center;
width:78px;
}
#globallink ul li a{
display:block;
padding:9px 6px 11px 6px;
margin:0px;
background:url("button1.jpg") no-repeat;
}
#globallink a:link, #globallink a:visited{
color:#004a87;
text-decoration=underline;
}
#globallink a:hover, #globallink a:visited{
color:#111111;
text-decoration=none;
background:url(button1_bg.jpg) no-repeat;
}
#left{
margin:0px;
padding:0px 0px 5px 0px;
background:#ffffff;
height:590px;
width:200px;
color:#d8ecff;
float:left;
}
#weather{
background:url("weather.jpg") no-repeat -5px 0px;
margin:0px 5px;
background-color:#5ea6eb;
}
#weather h3{
font-size:12px;
padding:24px 0px 0px 74px;
color:#ffffff;
margin:0px;
}
#weather ul{
margin:8px 5px 0px 5px;
padding:10px 0px 8px 5px;
list-style-type:none;
}
#weather ul li{
background:url("icon1.jpg") no-repeat 0px 6px;
padding:1px 0px 0px 10px
}
#middle{
margin:0px 2px;
padding:5px 0px 5px 0px;
background:#ffffff;
width:400px;
float:left;
}
#middle div{
margin:0px 5px 0px 5px;s
}
#middle h3{
margin:0px;
padding:0px;
height:41px;
}
#middle h3 span{
display:none;/*去掉文字*/
}
#beauty{
margin:15px 0px 0px 0px;
padding:0px;
}
#beauty h3{
background:url("icon2.jpg") no-repeat;
margin:8px 0px 0px 0px;
}
#beauty ul, #route ul{
list-style-type:none;
margin:16 px 1px 0px 1px;
padding:0px;
}
#beauty ul li{
float:left;
width:97px;
text-align:center;
}
#beauty ul li img{
border:1px solid #4ab0ff;
}
#route h3{
background:url(icon3.jpg) no-repeat;
margin:6px 0px 0px 0px;
}
#route{
clear:both;
margin:0px;
padding:5px 0px 15px 0px;
}
#route ul li{
padding:3px 0px 0px 30px;
background:url("icon4.jpg") no-repeat 12px 6px;
}
#route ul li a:link, #route ul li a:visited{
text-decoration:none;
color:#004e8a;
}
#route ul li a:hover{
text-decoration:underline;
color:#000000;
}
#today h3{
color:#003973;
font-size:12px;
background:#bbbbff url("icon2.gif") no-repeat;
padding: 4px 0px 0px 15px;
margin:0px 0px 5px 0px;
}
#today{
background:#5ea6ef;
margin:0px 5px 0px 5px;
padding:0px 0px 10px 0px;
}
#today ul{
list-style-type:none;
padding:0px 0px 0px 0px;
margin:-1px 0px 0px 0px;
}
#today ul li{
text-align:center;
}
#today ul li img{
border:1px solid #ffffff;
margin:8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#today ul li a:hover{
color:#ffff00;
text-decoration:underline;
}
#right{
margin:0px;
padding:0px 0px 5px 0px;
background:#ffffff;
width:176px;
color:#d8ecff;
float:left;
}
#right div{
margin:0px 5px;
background:#5ea6eb;
}
#right h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#bbddff url("button1_bg.jpg") no-repeat 5px 7px;
}
#map p{
text-align:center;
margin:0px;
padding:2px 0px 5px 0px;
}
#map p img{
border:1px solid #ffffff;
text-align:center;
}
#food ul, #life ul{
list-style-type:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li,#life ul li{
background:url("icon4.jpg") no-repeat -3px 7px;
padding:3px 0px 3px 12px;
border-bottom:1px dashed #eeeeee;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
color:#000000;
text-decoration:underline;
}
#food, #life {
padding-top:11px;
}
#footer{
background:#ffffff;
margin:0px;
padding:1px 0px 5px 0px;
clear:both;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px 4px 5px;
background:#5ea6eb;
}
#footer p a{
color:#ffffff;
text-decoration:none;
}