网页设计制作第七章

来源：网络收集时间：2026-09-07

导读：网页设计制作课件第七章 CSS样式表(三) 网页设计制作课件本章任务制作贵美横向主导航条制作贵美顶部菜单制作贵美新品上架板块网页设计制作课件本章目标使用div-ul-li实现局部布局使用div-dl-dt-dd实现图文混编使用伪类样式控制超链接样式网页设计

网页设计制作课件

第七章 CSS样式表(三)

网页设计制作课件

本章任务制作贵美横向主导航条制作贵美顶部菜单制作贵美新品上架板块

网页设计制作课件

本章目标

使用div-ul-li实现局部布局使用div-dl-dt-dd实现图文混编使用伪类样式控制超链接样式

网页设计制作课件

超链接样式的特点超链接样式的特殊性文本或图像加上链接，将失去原样式而继承链接的样式可以分别设置链接的四种状态的样式

超链接样式的四种状态未访问状态(a:link )

已访问状态(a:visited )鼠标移上状态(a:hover ) 激活选定状态(a:active )

加链接后，图片/文本样式的变化

网页设计制作课件

超链接伪类样式超链接伪类样式伪类采用选择器：状态的方式分别定义样式，一般称为伪类

示

例

说

明

a:link

a:link{color:#999;}

未访问状态

a:visiteda:hover a:active

a:link{color:#333;}a:link{color:#ff7300;} a:link{color:#999;}

已访问状态鼠标移上状态

激活选定状态(鼠标点击未释放时)

网页设计制作课件

如何设置超链接的样式设置超链接样式的步骤：1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态<style type="text/css"> .nav li a { padding:8px 15px;} 2、再单独定义某个状 .nav li a:hover { color:#ff7300;font-size:20px; } 态特有的样式 </style <body> <div class="nav"> <ul> <li><a href="#">家用电器</a></li> 导航版块的链接样式 <li><a href=“#”>手机数码</a></li> 一般和页面样式不同，需单独定义 ……演示示例1:伪类 1、先定义共有样式：表示.nai类下<li>标签中的链接样式

网页设计制作课件

如何应用样式3-1 三类应用样式的方式内部样式表外部样式表行内样式

<head> <style type="text/css"> ….. //样式定义 </style > </head> <body> ……//HTML内容 </body>

HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用

网页设计制作课件

如何应用样式3-2 三类应用样式的方式内部样式表外部样式表行内样式<link rel="stylesheet" href=CSS外部文件名 type="text/css" />.nav li a{padding:8px 10px;} ….. //CSS样式定义 <head>…… <body> ……//HTML内容 </body>

分别定义*.css和*.html 文件，样式和内容彻底分离，多个网页可共享同一CSS

演示示例2:外部样式表

网页设计制作课件

如何应用样式3-3 三类应用样式的方式内部样式表外部样式表行内样式表

单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用

演示示例3:行内样式表

网页设计制作课件

样式的优先级3-1 各类样式有继承各类样式的优先级浏览器默认设置外部样式表文件内部样式表行内样式表由低到高，“近者

优先”原则

ID选择器类选择器标签选择器

网页设计制作课件

样式的优先级3-2 “日用百货”链接蓝色

红色

<head> …… 内部样式表 <style type="text/css"> .nav ul li a:link{color:blue;} </style> <link rel="stylesheet" href="css/layout.css" type="text/css" /> </head> <body> 外部样式表 <div class="nav"> <ul> <li><a href=""#">家用电器</a></li> <li><a href=""#">手机数码</a></li> <!—下面为行内样式--> <li><a href=""#" style="color:red;font-size:10px;">日用百货</a></li> </ul> 行内样式表 </div> </body> 演示示例4:样式优先级

网页设计制作课件

样式的优先级3-3 购物车的样式<head> ID选择器 <style> #nav_id { width:300px; background: #ccc; } 类选择器 .nav { height:100px; background: red; } div { border:5px solid green; background: blue; } </style> 同时应用ID、 </head> 标签选择器 class、标签 <body> 三类选择器 <div class="nav" id="nav_id"> <ul> <li><a href="#">购物车</a></li> </ul> </div> </body> 不冲突的样式，边

灰色背景

框5px、绿色演示示例5:CSS优先级

网页设计制作课件

练习——使用超链接伪类实现导需求说明：航条用提供的背景图素材，实现如下导航菜单效果要求使用外部样式表 div-ul-li结构行高：24px 字体大小：10px 链接无下划线(text-decoration), 鼠标悬停，显示菜单的投影背景 (background) 、字体变大

完成时间：25分钟

网页设计制作课件

典型的局部布局结构HTML标签中，学过哪些典型的块状布局结构？ div-ul(ol)-li:常用于分类导航或菜单等场合； div-dl-dt-dd:常用于图文混编场合； table-tr-td:常用于图文布局或显示数据的场合； form-table-tr-td:常用于布局表单的场合；

网页设计制作课件

div-ul-li局部布局的样式修饰2-1实现思路布局结构分析 CSS样式分析布局结构： 1、图文参差并列结构，宜采用div-ul-li实现 2、图标和文字各占一个<li> 各类样式： 1、小图标：采用背景图偏移 2、右对齐：float浮动 3、超链接：无下划线样式 4、调整文本对齐和间距

网页设计制作课件

div-ul-li局部布局的样式修饰2-2实现步骤先建立HTML标签组织结构建立CSS样式表，逐一添加各类样式测试样式细节

演示示例6:制作贵美顶部菜单

网页设计制作课件

如何复用CSS代码大量重复的CSS代码，如何精简？.pic1{width:28px;height:26px;background:url(../images/icon.gif) no-repeat;} .pic2{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -28px 0px;} .pic3{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -84px 0px;} .pic4{width:28px;height:26px;background:url(../images/icon.gif) }

.抽取重复代码建立类 .pic {//共有的CSS代码;}

应用样式：多个类样式 <li class="pic pic1"></li>

演示示例7:精简CSS代码

网页设计制作课件

练习——修饰div-ul-li局部布局需求说明：重新实现贵美网站的导航菜单行高：26px 图标宽度：28px 图标宽度： 38px< …… 此处隐藏：1729字，全部文档内容请下载后查看。喜欢就下载吧 ……

网页设计制作第七章.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/43380.html（转载请注明文章来源）

上一篇：可编程控制器程序设计师20110820复习题
下一篇：山东大学数据库实验四复制表