项目三 使用CSS设置链接、列表与菜单_第1页
项目三 使用CSS设置链接、列表与菜单_第2页
项目三 使用CSS设置链接、列表与菜单_第3页
项目三 使用CSS设置链接、列表与菜单_第4页
项目三 使用CSS设置链接、列表与菜单_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目三任课老师：XXX使用CSS设置链接、列表与菜单8用CSS美化下单菜单美化“网上书店”页面的导航条9制作八大行星科普网页美化“网上书店”页面中的超链接为“网上书店”页面添加超链接101112一、任务引入小H总是被网站中某个特定的模块吸引，如导航栏。导航栏也称为菜单，它在网页中占有很重要的地位，利用它可以打开网站的各个功能模块。如果没有导航栏，我们无法将网站的功能完整地体现在页面上。好的导航栏可以让网站的易用性得到更好的体现。这里学习如何制作及使用CSS美化导航栏，从而使网页页面更加个性化。导航栏的主要功能是通过超链接实现从本页面跳转到用户想要查看的其他页面，其中鼠标在导航栏上的某个菜单项移动时一般会有变色的效果。一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容，同时导航栏的风格也要与网站本身的风格相匹配。导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中，一般会使用CSS样式表对导航栏进行设置和美化。二、相关知识我的首页心情日记学习心得生活琐碎工作笔记1.制作简单的纵向导航栏二、相关知识1)效果图展示该纵向导航栏可看成由一个大盒子和内嵌的6个小盒子构成。大盒子可看成是整个导航栏整体(菜单)，6个小盒子可看成是6个独立的导航条目(即菜单项)，所以整个结构可由无序列表构成。联系我们2)搭建页面结构页面结构的搭建主要通过无序列表嵌套超链接来实现3)设置CSS样式利用内嵌样式美化纵向导航栏二、相关知识使用CSS的小技巧123合理利用display:block属性利用border设置特殊边框利用margin-bottom设置间隔效果二、相关知识4)使用CSS的小技巧70%效果图展示40%搭建页面结构70%设置样式二、相关知识1)效果图展示2.制作简单的横向导航栏2)搭建页面结构主要通过div、无序列表和超链接来搭建页面结构。整个横向导航栏用一个名为“topmenu”的盒子来实现，内部嵌套无序列表，列表项中再嵌套超链接3)设置CSS样式使用内嵌样式使用浮动属性使用display属性500W500W通过foat属性定义浮动。所谓元素的浮动，是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。这样可以更改元素默认从上到不一一罗列的形式。二、相关知识4)使用CSS的小技巧由多个块元素和行内元素构成的盒子排列而成。如希望行内元素具有块元素的某些特性，或需要块元素具有行内元素的某些特性，则可以使用display属性对元素的类型进行转换。70%效果图展示40%搭建页面结构70%设置样式二、相关知识1)效果图展示2.制作带图片效果的横向导航栏2)搭建页面结构通过div和超链接搭建页面结构3)设置CSS样式利用内嵌样式美化导航栏01.设置块元素02.隐藏元素03.溢出不显示04.背景图设置1要将行内元素设置为块元素，除了使用display:block，还可以使用浮动方式4背景图像通过background:url(路径)no-repeat来设置3当元素溢出时，将溢出部分不显示，通过overdoww:hidden来设置2将元素隐藏，对该元素用display:hidden;若要隐藏的元素再显示，则用display:block二、相关知识4)使用CSS的小技巧8用CSS美化下单菜单美化“网上书店”页面的导航条9制作八大行星科普网页美化“网上书店”页面中的超链接为“网上书店”页面添加超链接101112一、任务引入图像(图片)是网页中不可缺少的内容，它能使页面更加丰富多彩，也能让用户更直观地感受网页传达的信息。图像的很多属性可以直接在HTML中进行调整，并通过CSS统一管理。这样，不但可以更加精确地调整图像的各种属性，还可以实现很多特殊的效果。本任务将详细介绍用CSS设置图像基本属性、风格样式的方法,包括设置图像的边框对齐方式和图文混排等，并通过实例介绍文字和图像的各种运用，为进一步深入探讨相关知识打下基础。border-width(粗细)border-color(颜色)border-style(线型)可用CSS中的各种长度单位，最常用的是px可以使用各种合法的颜色可以在一些预先定义好的线型中选择二、相关知识1.设置图像边框1）基本属性二、相关知识border-bottomborder-top上下border-rightborder-left左右2)为不同的边框分别设置样式上面设置方法会对一个图像的4条边框同时产生作用。如果分别为4条边框设置不同的样式，在CSS中也是可以实现的。只需要分别设置border-left、border-right、border-top、border-bottom属性即可，它们依次对应左、右、上、下4条边框。2.图像缩放使用CSS控制图像大小的方法与使用HTML一样，也是通过width和height两个属性来实现的。不同的是，CSS中可以使用更多的属性值，如相对值和绝对值等。二、相关知识文字环绕设置图像与文字的间距500W500W二、相关知识3.图文混排在CSS中，主要是通过给图像设置oat属性来实现文字环绕的margin和padding是CSS网页布局的核心属性4.设置图像与文字的对齐方式1)横向对齐图像横向对齐的方法与文字水平对齐的方法基本相同,分为左、中、右3种。2)纵向对齐在CSS中，同样是通过vertical-align属性(一个比较复杂的属性)来实现搭配的。横向对齐纵向对齐二、相关知识8用CSS美化下单菜单美化“网上书店”页面的导航条9制作八大行星科普网页美化“网上书店”页面中的超链接为“网上书店”页面添加超链接101112一、任务引入列表在网页中应用广泛，除文字列表、图文列表以外，导航条、菜单栏等常见模块一般也是用列表实现的。传统的HTML语言提供了项目列表的基本功能，所制作的列表比较简单，要制作水平导航条、排行榜等比较美观、实用的效果就要用到CSS。在引入CSS后，项目列表被赋予许多新的属性，甚至超越了它最初设计时的功能。本任务首先介绍使用CSS设置列表样式的方法，然后通过美化“网上书店”页面中的导航条(导航菜单)，学习使用CSS美化列表的方法。设置图文信息列表设置列表类型设置列表项位置设置列表图像列表布局表格布局二、相关知识2314561.设置列表1)表格布局2)列表布局500W500W在表格布局时代，类似新闻列表这样的效果一般采用表格来实现，即采用多行多列的表格进行布局二、相关知识使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少3)设置列表类型4)设置列表项图像500W500W在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是<u>标记还是<ol>标记，都可以使用相同的属性值，而且效果是完全相同的。二、相关知识当list-stylc-imagc属性的属性值为none或者设置的图像路径出错时，list-style-type属性会替代list-style-image属性对列表产生作用。5)设置列表项位置6)设置图文信息列表500W500Wlist-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词:outside(外部)和inside(内部)。二、相关知识网页中经常可以看到图文信息列表，之所以称为图文信息列表，是因为列表的内容以图像和简短语言的形式呈现在页面中。制作普通的超链接导航菜单123建立网页结构文件设置菜单项的内部样式设置容器的内部样式二、相关知识2.设置导航菜单1)制作普通的超链接导航菜单制作普通的超链接导航菜单123建立网页结构文件设置菜单项的内部样式设置容器的内部样式二、相关知识2.设置导航菜单2)使用列表制作垂直导航菜单3)使用列表制作水平导航条使用display属性可以改变元素的显示方式,具体语法格式如下:display:nonelinlinelblock|inline-block|list-item;其中，none表示不显示该元素:inline是默认值，表示将该元素转换为行内元素;block表示将该元素转换为块元素;inline-block表示将该元素转换为行内块元素:1ist-item表示将该元素转换为列表块元素。二、相关知识第一步第二步创建“music.html”文档,在<body>标签中输入代码,在页面中添加一个无序列表。在头部标签中添加<style>标签，并输入代码，设置列表样式。二、相关知识3.使用列表制作“经典老歌”排行榜8用CSS美化下单菜单美化“网上书店”页面的导航条9制作八大行星科普网页美化“网上书店”页面中的超链接为“网上书店”页面添加超链接101112一、任务引入用户能够使用电脑或手机穿梭在各个网页之间，都是通过超链接来实现的。超链接相当于各个网页之间的桥梁，使用它可以从一个网页跳转到另一个网页。本任务将介绍在HTML中应用超链接，然后为“网上书店”页面添加超链接。URL的格式123http:/，用于从服务器传输超文本到本地浏览器的超文本传输通信协议mailo:，表示目标资源是电子邮件fp:4，用于从服务器复制文件或从本地计算机上传文件的文件传输通信协议二、相关知识1.URL1)URL的格式相对于文件的URL。这种URL以链接的原文件为起点相对于网站根目录的URL。这种URL以网站的根目录为起点二、相关知识2)URL的类型超链接的URL可以分为两种类型:外部URL和内部URL。内部URL指向相对于原文件的同一网站或者同一文件夹中的文件。内部URL通常仅包含文件夹名和文件名，有时甚至仅有文件名。内部URL又可以分为以下两种:普通链接内容链接在HTML中，使用<a>标签添加超链接，<ahref-"目标地址">载体</a>。<a>标签中的载体可以是文本、图像或内容块等，但不能是其他链接、音频、视频等交互式内容。二、相关知识2.普通链接与内容块链接图像链接下载链接除了链接到网页，<a>标签还可以链接到图像，这种链接称为图像链接。除了链接到网页和图像，超链接还可以链接到文档、邮件地址、应用程序等。二、相关知识3.图像链接与下载链接创建锚点(书签)添加链接锚点就是锚点链接所指向的元素位置。为元素设置了id属性后，其属性值即可作为该元素的锚点。(1)指向页面内书签的链接。(2)指向其他页面书签的链接。二、相关知识4.锚点链接5.电子邮件链接使用电子邮件链接可以打开客户端浏览器默认的电子邮件应用程序，收件人的邮件地址由电子邮件链接指定，无须手动输入。电子邮件链接的href属性值为“mailto:电子邮件地址?subject=邮件主题”，如mailto:test@163.com?subject=suggest。其中，subject表示邮件主题，可以省略。二、相关知识8用CSS美化下单菜单美化“网上书店”页面的导航条9制作八大行星科普网页美化“网上书店”页面中的超链接为“网上书店”页面添加超链接101112一、任务引入前面介绍了在HTML中应用超链接，以及为“网上书店”页面添加超链接。本任务通过美化“网上书店”页面的导航条和“重磅推荐”区域，练习设置超链接基本样式的方法。01.小标题02.小标题03.小标题04.小标题(1)除上面代码中涉及的与文字相关的CSS样式以外，其他各种背景、边框和排版的CSS样式都可以随意加入超链接的几个伪类的样式规则中，从而得到各式各样的超链接效果。二、相关知识1.设置链接各种背景、边框和排版的CSS样式都可以随意加入超链接的几个伪类的样式规则中，从而得到各式各样的超链接效果a元素的4种伪类按照a:li

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论