前端入门教程网页导航栏制作教程技术HT

北京看手足癣的医院 http://pf.39.net/bdfyy/bdfyw/210509/8930322.html
导航条效果图:我们先来看一下,首先这个整体我们可以看成一个大盒子,盒子的背景颜色为白色。然后看一下整体的话是占到整个导航条的80%左右,上图红色框圈出的范围。这个盒子又分为两个部分,左侧的logo部分,右侧的导航部分。整个布局用到的是flex布局:大家可以去看一下阮一峰老师的教程:阮一峰flex布局左侧logo部分我们用到的标签有:1、h3标签:h3ahref=index.html多多鱼网页/a/h3h3是一对有开始有闭合的标签组合。以h3开始,以/h3结束。htmlh3标签主要用于布局标题、栏目类内容,h3与h1最大标题标签相比,h1标签一般一个网页中使用一次,而h3标签可以在一个网页中多次使用。默认CSSh3又比h2文字大小小一点。htmlh3标签常见应用地方:栏目标题可以使用h3标签文章标题可以使用h3标签文章标题列表可以使用h3标签(一般图文列表中,图片使用img引入,文章标题文字使用h3标签)2、a标签:ahref=index.html多多鱼网页/aa标签定义超链接,用于从一张页面链接到另一张页面。a元素最重要的属性是href属性,它指示链接的目标。在所有浏览器中,链接的默认外观是:未被访问的链接带有下划线而且是蓝色的已被访问的链接带有下划线而且是紫色的活动链接带有下划线而且是红色的右侧的导航部分我们用到的标签有:一、无序列表简介无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的项目符号是●,不过可以通过无序列表type属性来改变无序列表的列表项符号。语法:ulli无序列表项/lili无序列表项/lili无序列表项/li/ul说明:ul,即“unorderedlist(无序列表)”。li,即“list(列表项)”。理解标签语义更有利于你记忆,而记忆HTML标签的语义是HTML的基础。在该语法中,使用ul/ul标签表示一个无序列表的开始和结束,li表示这是一个列表项。在一个无序列表中可以包含多个列表项。注意,ul标签和li标签也是配合使用,没有单独使用,而且ul标签内部不能存在任何其他标签,一般情况下只能存在li标签(对于初学者,我们忽略嵌套列表)。这个概念要非常清楚,在网站开发后期很容易犯错。(这个情况跟有序列表一样)。右侧导航代码:ulliclass=active  ahref=index.html首页/a/lili  ahref=网页模板/a/lili  ahref=学习资料/a/lili  ahref=常见问题/a/lili  ahref=网页作业/a/lili  ahref=联系我们/a/li/ul视屏教程:15:01


转载请注明:http://www.aierlanlan.com/tzrz/6142.html