第6讲网页制作(三).

发布于:2021-07-20 18:54:19

.NET程序设计
主讲教师: 李璟 e-mail: lijing@sdjzu.edu.cn 手机:13806419626

第6讲 网页制作(三) ? 6.1使用CSS制作背景 ? 6.2使用CSS布局页面顶部内容 ? 6.3使用CSS制作网站导航 ? 6.4使用CSS制作列表 ? 6.5使用CSS制作内容的版式

6.1使用CSS制作背景
? 6.1.1制作颜色背景 ? 6.1.2给元素添加背景图片 ? 6.1.3制作定位的背景 ? 6.1.4制作不动的背景 ? 6.1.5综合使用背景

6.1.1制作颜色背景
? 在CSS中,用来定义背景颜色的属性是 background-color。 ? 背景色属性background-color的语法结构 如下: ? background-color:transparent|color; ? 其中各个属性值的含义如下:
– transparent:定义背景颜色为透明(默认值)。 – color:使用各种颜色值定义背景颜色。

6.1.2给元素添加背景图片(1)
? 指定背景图片,是指定义元素中的是背景图片的 属性是background-image。 ? 由于背景图片只有在一定的区域范围内才能能够 显示,所以在指定背景图片的时候,通常要定义 元素的宽度和高度等属性。 ? 背景图片background-image属性用来定义图片背 景路径,其语法结构如下: ? background-image:url(图片地址|none); ? 如: ? background-image:url(images/picture.jpg); ? 示例:css_backgroundimage.html

css_backgroundimage.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head> ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ? <title>css_backgroundimage</title> ? <style type="text/css"> ? #content{ border: 1px solid #FF0000; ? height: 400px; background-image: url(images/5_2_01.jpg); } ? </style> ? </head> ? <body> ? <div id="content"></div> ? </body> ? </html>

背景图片页面效果

6.1.2给元素添加背景图片(2)
? 在CSS中,背景重复属性background-repeat, 与backgound-image一起使用,决定图片是否 重复,其语法结构如下: ? background-repeat:repeat|no-repeat|repeatx|repeat-y;
– repeat:即默认方式,完全*铺(重复)背景。 – no-repeat:在X及Y轴方向均不*铺(重复) 。 – repeat-x:横向*铺(重复)背景。 – repeat-y:纵向*铺(重复)背景。

? 示例:css_backgroundrepeat1.html、

css_backgroundrepeat1.html
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css_backgroundrepeat1</title> <style type="text/css"> #content{ border: 1px solid #FF0000; height: 400px; background-image: url(images/5_2_01.jpg); background-repeat: repeat-y; } </style> </head> <body> <div id="content"></div> </body> </html>

纵向重复背景图片页面效果

6.1.3制作定位的背景
? 在CSS中,背景定位属性backgound-position用来 设置背景的起始位置,语法结构如下: ? background-position:position|x%y%|xpos ypos; ? 其中各个属性值的含义如下:
– position:定义背景图象的位置。可用值有top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right。 – x%y%:以百分比形式定位背景图象位置,第一个是水 *位置,第二个是垂直位置。 – xpos ypos:以坐标形式定位背景图像位置,第一个是水 *位置,第二个是垂直位置。

? 示例:background_4_1.html、 background_4_2.html

background_4_1.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head> ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ? <title>background_4_1</title> ? <style type="text/css"> ? #content{ ? border: 1px solid #FF0000; height: 400px; ? background-image: url(images/5_2_01.jpg); ? background-repeat: no-repeat; background-position: left bottom; ? } ? </style> ? </head> ? <body> ? <div id="content"></div> ? </body> ? </html>

相对定位页面效果

background_4_2.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head> ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ? <title>background_4_2</title> ? <style type="text/css"> ? #content{ ? border: 1px solid #FF0000; height: 400px; ? background-image: url(images/5_2_01.jpg); ? background-repeat: no-repeat; background-position:30% 20%; ? } ? </style> ? </head> ? <body> ? <div id="content"></div> ? </body> ? </html>

百分比定位页面效果

6.1.4制作不动的背景
? CSS背景附加属性background-attachment用 来控制背景的滚动与定位。 ? 背景附加属性语法结构如下: ? background-attachment:scroll|fixed
– scroll:默认值,随着页面的滚动,背景图片会 移动。 – fixed:随着页面的滚动,背景图片不会移动。这 个属性值在IE6中只有body支持此属性。

6.1.5综合使用背景
? CSS提供了背景属性缩写的方法,即使用background属性, 其值由多个背景控制的属性值组合而成。 ? 背景复合属性background语法结构代码如下: ? background:background-color|background-image |background-repeat|background-position |background-attachment – background-color:使用背景颜色属性的颜色值。 – background-image:使用背景图片属性的url值。 – background-repeat:使用背景重复属性的repeat、 repeat-x、repeat-y、no-repeat。 – background-position:使用背景定位属性的位置属性值。 – background-attachment:使用背景附加属性的scroll或 fixed属性值。 ? 示例:css_background.html

css_background.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head> ? <title>css_background</title> ? <style> ? body{ ? background: #000000 url(images/8_02.jpg) repeat 0px 0px ; ? } ? </style> ? </head> ? <body> ? </body> ? </html>

css_background.html页面效果

6.2使用CSS布局页面顶部内容
? 6.2.1制作包含文本logo的页面顶部 ? 6.2.2制作包含图像logo的页面顶部 ? 6.2.3制作包含文本banner的页面顶部

6.2.1制作包含文本logo的页面顶 部
? logo是标志的意思,就一个网站来说, logo即是网站的名片。 ? 制作包含文本logo的页面顶部,关键方法 就是文本定位。 ? 下面制作一个包含文字logo和背景图的页 面顶部的实例。 ? 该例中,通过外边距属性,定义logo的位 置。 ? 示例:logo_1.html

logo_1.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head> ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

? ? ? ? ? ? ? ? ? ? ? ? ?

<title>logo_1</title> <style type="text/css"> #top{ background-image: url(images/8_1.jpg); width: 926px; height: 124px; margin: 0 auto; } #top h1{ color: #9999CC; margin-left: 57px; margin-top: 47px; } </style> </head> <body> <div id="top"> <h1>ENJOY CSS</h1> </div> </body> </html>

包含文本logo页面顶部的页面效果

6.2.2制作包含图像logo的页面顶部
? 图像logo比文本logo在视觉上更富有 美感。 ? 下面将使用img标签,通过CSS对img标 签样式的控制,达到图像logo的定位。 ? 示例:logo_2.html

logo_2.html
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head>
? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

? ? ? ? ? ? ? ? ? ? ? ? ?

<title>logo_2</title> <style type="text/css"> #top{ background-image: url(images/shadow.png); width: 926px; height: 200px; background-color: #242424; } #top img{ margin-left: 25px; margin-top: 20px; } </style> </head> <body> <div id="top"> <img src="images/8_2_logo.png" /> </div> </body> </html>

包含文本logo页面顶部的页面效果

6.2.3制作包含文本banner的页面顶部
? Banner意为“网幅图像广告”,通常形式是 图片或者段落文本。 ? 下面介绍如何使用CSS样式实现包含段落文 本banner的页面顶部效果。 ? 大致思路是:
– #Banner元素包含#base元素和info元素。 – 设置#Banner元素的背景图片为广告图片。 – 利用margin属性实现快捷方式条(#base元素)和 段落文本(#info)在#Banner元素中的定位。

? 代码见logo_4.html

包含文本banner的页面顶部

#banner

快捷方式条(#base)

段落文本块(#info)

制作包含文本banner的页面顶部
? 1)定义#banner元素 ? 2)定义#base元素 ? 3)定义#info元素

1)定义#banner元素
? banner元素的XHTML结构代码如下: ? <div id="banner"> ? <div class="base">…… </div> ? <div class="info">…… </div> ? </div>

1)定义#banner元素
? 根据图片的尺寸设置宽度和高度,并将 #banner设置为水*居中。 ? #banner元素的CSS代码如下: ? #banner{ ? background-image:url(images/8_3.jpg); ? height: 186px; ? width: 956px; ? margin:0px auto; } ? 注:8_3.jpg的尺寸为956px×186px。

2)定义#base元素
? #base的XHTML结构代码: ? <div class="base"> ? <a href="#">web site</a>&nbsp;&nbsp;| ? <a href="#">contact us</a>&nbsp;&nbsp;| ? <a href="#">homepage</a> ? </div>

2)定义#base元素
? ? ? ? ? #base的CSS代码如下: .base{ margin-top: 10px; margin-left:400px; } .base a{ color: #62360F; text-decoration: none; } .base a:hover{ text-decoration: underline; } 注:
– 为了和画面搭调,base中超链接的颜色是在图片 8_3.jpg中用吸管工具抓取的颜色。 – base元素根据设计利用margin-top和margin-left属性定 位在相对于#banner元素的某个位置上。

3)定义#info元素
? XHTML代码如下: ? <div class="info">
? By Binyamin Appelbaum and David Cho The specter of bank nationalization is driving a historic fire sale of stocks including Citigroup and Bank of America, making it harder for those firms to survive and imperiling the efforts of the Obama ...

? </div>

3)定义#info元素
? 对文本进行排版,主要使用行高属性定义字体的 行高, ? Info元素的CSS代码如下: ? .info{ ? color: #FFFFFF; font-size: 12px; ? margin-top: 40px; margin-left:400px; ? width: 400px; ? line-height: 18px; ? }

logo_4.html(1)
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head><title>logo_4</title> ? <style> ? #banner{ background-image:url(images/8_3.jpg); ? height: 186px; width: 956px; margin:0px auto; } ? .base{ margin-top: 10px; margin-left:400px; } ? .base a{ color: #62360F; text-decoration: none; } ? .base a:hover{ text-decoration: underline; } ? .info{ color: #FFFFFF; font-size: 12px; line-height: 18px; ? margin-top: 40px;margin-left:400px; width: 400px;} ? </style> ? </head>

logo_4.html(2)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <body> <div id="banner"> <div class="base"> <a href="#">web site</a>&nbsp;&nbsp;| <a href="#">contact us</a>&nbsp;&nbsp;| <a href="#">homepage</a> </div> <div class="info"> By Binyamin Appelbaum and David Cho The specter of bank nationalization is driving a historic fire sale of stocks including Citigroup and Bank of America, making it harder for those firms to survive and imperiling the efforts of the Obama ... </div> </div> </body> </html>

包含文本banner的页面顶部页面效果

6.3使用CSS制作列表
? 6.3.1制作新闻列表 ? 6.3.2制作自定义图片项目符号的列表

6.3.1制作新闻列表
? 新闻列表是一个网站的重要组成元素。 ? 下面制作一个新闻列表页面。 ? 在这个实例中,制作一个基本的新闻 列表,将标题与日期分开控制CSS样式。 ? 示例:list_1_1.html

新闻列表页面

1)制作新闻列表页面的HTML代码
? <div id="news"> ? <h3>新闻列表</h3> ? <ul id="pagelist"> ? <li> ? <a href="#"> ? <span class=“ibt">奥运圣火瑞金传递结束</span> ? <span class="ldt">2008-05-12</span> ? </a> ? </li> ? <li> ? <a href="#"> ? <span class=“ibt">汤姆斯杯中国男羽杀进四强</span> ? <span class="ldt">2008-05-09 </span> ? </a> ? </li> ? …… ? </ul> ? </div>

2)制作#news元素的CSS样式
? #news{ ? background-image: url(images/8_01_01.jpg); ? background-repeat: no-repeat; ? }

3)制作#new3 h3元素的CSS样式
? #news h3{ ? color: #C63d00; ? font-size: 14px; ? line-height: 30px; ? margin: 0px; ? padding-left: 15px; ? padding-top: 5px; ?}

4)制作新闻列表项的CSS样式
? ? ? ? ? ? ? ? ? ? #pagelist{ list-style-type:disc; margin: 0px; padding: 0px; margin-left: 20px; } #pagelist li{ font-size: 14px; color: #C63D00; line-height: 24px } #pagelist li a{ color: #C63D00; text-decoration: none; }

5)制作新闻标题.lbt元素的CSS样式

? ? ? ? ? ? ?

#pagelist li a .lbt{ text-decoration: none; } #pagelist li a:hover .lbt{ color:#000066; text-decoration: underline; }

6)制作时间.idt元素的CSS样式
? #pagelist li a .idt{ ? color: #666; ? font-size: 12px; ? text-decoration: none; ?}

list_1_1.html(1)
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ? <html xmlns="http://www.w3.org/1999/xhtml"> ? <head><title>list_1_1</title> ? <style type="text/css"> ? #news{ background-image: url(images/8_01_01.jpg); ? background-repeat: no-repeat; } ? #news h3{ color: #C63d00; font-size: 14px; line-height: 30px; ? margin: 0px; padding-left: 15px; padding-top: 5px; } ? #pagelist{ list-style-type:disc; margin: 0px; padding: 0px; ? margin-left: 20px; } ? #pagelist li{ font-size: 14px; color: #C63D00; line-height: 24px } ? #pagelist li a{ color: #C63D00; text-decoration: none; } ? #pagelist li a .lbt{ text-decoration: none;} ? #pagelist li a:hover .lbt{ ? color:#000066; text-decoration: underline; } ? #pagelist li a .idt{ ? color: #666; font-size: 12px; text-decoration: none; ? }</style> ? </head>

list_1_1.html(2)
? <body> ? <div id="news"> ? <h3>新闻列表</h3> ? <ul id="pagelist"> ? <li><a href="#"> ? <span class="lbt">奥运圣火瑞金传递结束</span> ? <span class="idt">2008-05-12</span></a></li> ? <li><a href="#"><span class="lbt">汤姆斯杯中国男羽杀进四强 </span><span class="idt">2008-05-09 </span></a></li> ? <li><a href="#"><span class="lbt">中石油与委内瑞拉合建2000万 吨炼厂</span><span class="idt">2008-05-06 </span></a></li> ? <li><a href="#"><span class="lbt">山东中华文化城引发争议 </span><span class="idt"> 2008-05-06 </span></a></li> ? <li><a href="#"><span class="lbt">王某农村豪宅遭曝光 </span><span class="idt">2008-05-05</span></a></li> ? <li><a href="#"><span class="lbt">反扒者被咬还遭旁观者指责 </span><span class="idt">2008-05-05</span></a></li> ? </ul> ? </div> ? </body> ? </html>

新闻列表页面效果

6.3.2制作自定义图片项目符号的列表 ? CSS默认的列表效果并不能够满足设计 师对于列表中项目符号的要求。 ? 对此CSS在这方面提供了图片替换技术, 可以选用符合页面风格的图片符号来 替代默认效果。 ? CSS提供的list-style-image属性完成图 片替代项目符号。

使用列表符号样式属性制作列表
? 列表图片属性list-style-image是使用一 幅图像来替换列表项的标记,语法结 构如下: ? list-style-image:url(图片地址)|none; ? 示例:list_1_2.html

list_1_2.html
? …… ? <style type="text/css"> ? #news h3{ color: #C63d00; font-size: 14px; line-height: 30px; ? margin: 0px; padding-left: 15px; padding-top: 5px; } ? #pagelist{ margin: 0px; padding: 0px; margin-left: 20px; ? list-style-image:url(images/folder.jpg); } ? #pagelist li{ width: 330px; font-size: 14px; ? color: #C63D00; line-height: 24px } ? #pagelist li a{ color: #C63D00; text-decoration: none; } ? #pagelist li a .lbt{ text-decoration: none; } ? #pagelist li a:hover .lbt{ text-decoration: underline; } ? #pagelist li a .idt{ color: #666; font-size: 12px; ? text-decoration: none; } ? </style> ? ……

自定义图片项目符号新闻列表页面效果

6.4使用CSS制作内容的版式
? 6.4.1制作分栏的文字排版 ? 6.4.2制作图文混和排版

6.4.1制作分栏的文字排版
? 文字排版一般有两种形式,通栏排版 和分栏排版。
– 通栏排版只有一栏。 – 分栏排版有多栏。

? 分栏排版示例:content_1.html

1)制作分栏排版页面 的XHTML代码
? ? ? ? ? ? ? ? ? ? ? <div id="layout"> <div class="col"> <p>WEB标准不是某一个标准,……</p> </div> <div class="col"> <p>1.结构标准语言<br />和……</p> <p>2. 表现标准语言<br />CSS是……</p> </div> </div> 在以上代码中,使用了两个class为col的div对象。 现在需要为它们指定宽度,然后让两个div在水*方向并 排显示,从而形成二列式布局,达到分栏排版的效果。

2)制作排版的CSS样 式
? ? ? ? ? ? ? ? ? ? ? ? #layout { width: 500px; height: 300px; margin: 0px auto; background: url(images/10_1.jpg) no-repeat; } .col { width: 200px; padding: 8px 25px; float: left; } p{ line-height: 180%; font-size: 12px; color: #FFFFFF; }

6.4.2制作图文混合排版
? 段落元素p是块状元素,可以通过指定段落 的宽度和浮动属性,以及设定img元素的浮 动属性,来实现图片和段落的混排。 ? 示例:img2.htm

img2.htm
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>图文混和排版</title> <style type="text/css"> *{ margin:0px; padding:0px; } #all{ width:600px; height:600px; margin:0px auto; padding:10px; background:#eee; } h2{ text-align:center; } #author{ text-align:right; } p{ font-size:12px; text-indent:2em; } #a{ width:150px; float:left; } #img1{ float:left; margin:12px; } </style> <body> <div id="all"> <h2>白杨礼赞</h2> <p id="author">作者:茅盾</p> <p>白杨树实……<br />当汽车……</p> <p id="a">几百万年前……</p> <img src="images/img.jpg" id="img1" /> <p>黄与绿……</p> <p>然而刹那间……<br />……*凡的一种树! </p> </div> </body> </html>


相关推荐

最新更新

猜你喜欢