2-3-2 课件：“英博特智能科技”企业网站首页页面制作-页头制作

来自：籽油荃面 > 馆藏分类

配色：

字号：大中小

2022-12-11 | 阅：转： | 分享

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

（2）什么情况下要清除浮动？
（3）列表
可以应用在哪些地方？
列表在网站设计中占有比较大的比重，用列表显示信息非常整齐直观，便于用户理解。列表与
后面的CSS样式结合还能实现很多高级应用。HTML 支持有序、无序和自定义列表。

完成练习2-3-1.html、 2-3-2.html

完成练习2-3-3.html

dt>
: <
/dd>

完成练习2-3-4.html （1）列表标志要修改用于列表项的标志类
型，可以使用属性list-style-type，（2）列表项图像如果想对各标志使用一个图像，可以利用 list-style-ima
ge 属性做到。（3）列表标志位置CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-po
sition 完成的。（4）简写列表样式为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。li
{list-style : url(example.gif) square inside}在练习2-3-1.html
2-3-2.html 2-3-3.html 2-3-4.html基础上，添加列表
样式的设置网页的最大优点及特征就是可以在多个网页文档中自由移动的“超链接”功能。完成完整的网页需要构成该网页的多个网页文档，并且需
要连接这些网页文档，使得它们之间能够互相跳转。这种连接就叫“超链接”。简单来说，超链接就是用来有机地连接各个网页文档的不可见的绳索
。 ipt type="text/javascript" src="js/slider.js">

文本 >绝对路径相对路径绝对路径由完整的协议名称、主机名称、路径及文档全程组成。例如：http://www.baidu.comftp:/
/172.16.153.8/download/img1.jpgC:/web/img/pic.jpg教室A教室B教室C教室D教室E教
室F学校张三李四小红李四找张三：教室B/张三张三找李四：../李四张三找小红：../教室D/小红李四找张三：教室B/张三class
B/zhangsan张三找李四：../李四../lisi张三找小红：../教室D/小红../classD/xiaohong1. i
ndex.html访问图片logo

2. index.html链接样式style.css ink rel="stylesheet" type="text/css" href=“ ">3. index.html访问list
.html 4. style.css访问图片banner.jpgurl(“ ”)超链接可以是文本，也
可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一
只小手。在标签中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝
色字体并带有下划线访问过的链接显示为紫色并带上下划线点击链接时，链接显示为红色并带上下划线文本是
一个空链接。文本是一个指向本网站中的一个页面的链接。 ://www.microsoft.com/”>文本是一个指向万维网上的链接我们最常用的是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基础上，添加超链接标签，并设置超链接样式。具体要求见任务书运用所学知识，完成英博特网站首页的页头制作，截图上传讨论区。运用本课学习的技术，模仿完成“华为”网站页头制作（详见能力拓展）。知之者不如好之者，好之者不如乐之者。Web前端技术基础春秋·孔子《雍也》

献花(0)

(本文系籽油荃面原创)

类似文章 更多

发表评论：