电脑

当前位置 /首页/游戏数码/电脑/列表

制作简单网站导航步骤

使用Dreamweaver制作导航条会用到css样式,现在就给大家简单的制作一个导航条。

操作方法

(01)使用Dreamweaver新建一个html页,并在<title></title>间添加css样式。

(02)在<body></body>间添加一个div,class是预先写好的top

制作简单网站导航步骤

(03)在div中添加列表<ul><li></li></ul>,保存预览

制作简单网站导航步骤 第2张
制作简单网站导航步骤 第3张

(04)添加列表样式top ul li{ float:left;},预览一下。

制作简单网站导航步骤 第4张
制作简单网站导航步骤 第5张

(05)去掉列表前面的点,添加list-style:none;

制作简单网站导航步骤 第6张
制作简单网站导航步骤 第7张

(06)为导航列表添加宽度、高度、行间距、字号等。

制作简单网站导航步骤 第8张

(07)为导航列表添加背景色边框,并且居中显示。

制作简单网站导航步骤 第9张

(08)最终效果,如下图。很简单的制作,如果想要更精美就继续学习css吧。

制作简单网站导航步骤 第10张
TAG标签:导航 网站 #