网站设计与网页制作立体化项目教程（第4版） 课件 2-3-2 课件：“英博特智能科技”企业网站首页页面制作-页头制作

任务3：“英博特智能科技”企业网站首页页面制作第二篇：项目实战篇3.2页头制作3.2页头制作（1）熟练使用浮动布局。（2）学会清除浮动的方法。（3）掌握HTML列表及样式。（4）掌握HTML超链接及样式。（5）掌握CSS常用伪类。能力要求学习导览任务概述完成首页页面中页头部分的制作。该模块采用二列布局，左列是logo模块、右列包括横向导航菜单模块，以及下拉菜单模块。任务思考（1）实现两列布局的方法有哪些？

（2）什么情况下要清除浮动？

（3）列表可以应用在哪些地方？

列表列表在网站设计中占有比较大的比重，用列表显示信息非常整齐直观，便于用户理解。列表与后面的CSS样式结合还能实现很多高级应用。HTML支持有序、无序和自定义列表。无序列表<ul><li></li><li></li><li></li></ul>完成练习2-3-1.html、2-3-2.html有序列表<ol><li></li><li></li><li></li></ol>完成练习2-3-3.html自定义列表<dl><dt></dt><dd></dd><dd></dd><dt></dt><dd></dd><dd></dd></dl>完成练习2-3-4.html列表样式

（1）列表标志要修改用于列表项的标志类型，可以使用属性list-style-type，（2）列表项图像如果想对各标志使用一个图像，可以利用list-style-image属性做到。（3）列表标志位置CSS2.1可以确定标志出现在列表项内容之外还是内容内部。这是利用list-style-position完成的。（4）简写列表样式为简单起见，可以将以上3个列表样式属性合并为一个方便的属性：list-style。li{list-style:url(example.gif)squareinside}列表样式在练习2-3-1.html2-3-2.html2-3-3.html2-3-4.html基础上，添加列表样式的设置超链接网页的最大优点及特征就是可以在多个网页文档中自由移动的“超链接”功能。完成完整的网页需要构成该网页的多个网页文档，并且需要连接这些网页文档，使得它们之间能够互相跳转。这种连接就叫“超链接”。简单来说，超链接就是用来有机地连接各个网页文档的不可见的绳索。链接路径<linkrel="stylesheet"type="text/css"href="listStyle.css"><scripttype="text/javascript"src="js/slider.js"></script><imgsrc="images/logo.png"alt=""><ahref=“/”>文本</a>链接路径绝对路径相对路径绝对路径绝对路径由完整的协议名称、主机名称、路径及文档全程组成。例如：/download/img1.jpgC:/web/img/pic.jpg相对路径教室A教室B教室C教室D教室E教室F学校张三李四小红李四找张三：教室B/张三张三找李四：../李四张三找小红：../教室D/小红相对路径李四找张三：教室B/张三classB/zhangsan张三找李四：../李四../lisi张三找小红：../教室D/小红../classD/xiaohongschoolclassAclassBzhangsanclassCclassDxiaohongclassEclassFlisi相对路径1.

index.html访问图片logo<imgsrc=“"alt="">2.

index.html链接样式style.css<linkrel="stylesheet"type="text/css"href=“">3.index.html访问list.html<ahref=“”></a>4.style.css访问图片banner.jpgurl(“”)Webimglogo.gifbanner.jpgcssstyle.cssjsindex.htmllist.html超链接超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签<a>中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线访问过的链接显示为紫色并带上下划线点击链接时，链接显示为红色并带上下划线<ahref=“#”>文本</a>是一个空链接。<ahref=“index.html”>文本</a>是一个指向本网站中的一个页面的链接。<ahref=“/”>文本</a>是一个指向万维网上的链接超链接样式我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们可以把它们分别定义不同的效果：a:link{color:#ff0000;text-decoration:none}/*未访问的链接*/a:visited{color:#00ff00;text-decoration:none}/*已访问的链接*/a:hover{color:#ff00ff;text-decoration:underline}/*鼠标在链接上*/a:active{color:#0000ff;text-decoration:underline}/*激活链接*/a:{color:#ff0000;}a:hover{color:#ff00ff;}超链接样式在练习2-3-3.html基础上，添加超链接标签，并设置超链接样式。任务实施“logo”部分制作02.“横