如何用CSS制作横向菜单 让ul li横向排列及圆点处理

CSS制作导航栏

实验六 CSS制作导航栏 1实验目的 1)掌握CSS的类选择器和派生选择器； 2)掌握导航栏的制作方法； 3)掌握CSS中伪类（Pseudo-Classes）的使用。 2实验内容 1)使用CSS制作导航菜单栏； 2)使用伪类的属性使菜单动起来； 3)丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善； 4)制作一个绚丽的导航栏，应用到实验三中网站上。 3实验仪器、设备 1)PC机最低配置：2G Hz以上CPU；1G以上内存；1G自由硬盘空间； 2)Internet Explorer、Firefox、Chrome、Opera、Safari任意浏览器； 3)Macromedia Dreamweaver 8或Macromedia Dreamweaver CS3。 4实验要求 1)掌握CSS的类选择器和派生选择器； 2)掌握导航栏的制作方法； 3)掌握CSS中伪类（Pseudo-Classes）的使用。

5实验步骤 5.1CSS导航入门 在前几次实验中，我们的网站已经已经越来越完善了，但我们的还没有一个漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的菜单栏。这里我们要使用到CCS中伪类的特性，简单来说就是根据鼠标的状态来改变相关样式。 我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来，其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！OK！我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且字体颜色变成白色 5.2制作导航菜单 新建一个html文档，我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；)，这个容器就是放我们的导航的，html代码如下：

实验八 制作网页导航条

实验八制作网页导航条 使用实验八给的实验素材建立站点文件夹，然后制作如下的导航条。 一、利用列表制作垂直方向的导航栏 步骤： 1.在站点中新建nav01.html，页面设置如下。 2.在“插入”菜单中选择“Div”命令，在弹出的对话框中设置如下： 3.在插入的Div标签中输入如下段落文字，给文字设置空链接并应用项目列表， 如下图所示效果： 4.打开【CSS样式】面板，新建以下CSS规则，保存在当前文档，具体设置如 下： 1)新建“ID”的样式#navigation，属性设置如下： 2)新建“复合内容“样式#navigationul，属性设置如下： 3)新建“复合内容”样式#navigation li ，属性设置如下

4)新建“复合内容”样式#navigation li a ，属性设置如下 5)新建“复合内容”样式#navigation li a：hover ，属性设置如下 6)保存并预览该页面，最终效果图如下： 7)可修改其中相应样式的属性，将导航菜单变为水平排列的菜单，操作参 考如下： 选择【CSS样式】面板中的#navigation样式，将【方框】分类中的“width”属性改为600px。

选择【CSS样式】面板中#navigationli样式，将【方框】分类中的“width”属性设置为100px。“float(浮动)”属性设为：left(左对齐)，单击【应用】按钮查看效果。继续将“margin”的右right、左left属性分别设为5px，单击【应用】按钮查看效果。最后单击【确定】按钮，则可看到垂直导航菜单变为水平导航菜单。 二、制作垂直方向的导航栏 在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件，将图1左侧竖排的导航栏制作成如2的效果： 图1 初始竖排导航栏图2 导航栏最终效果

二级导航菜单模板 代码与实例

二级导航菜单 https://www.wendangku.net/doc/6b17966527.html,网站建站 实现效果如下： 一、新建导航菜单 1、列表如下： 2、在https://www.wendangku.net/doc/6b17966527.html,环境下，代码如下：

<%@Page Language="C#"AutoEventWireup="true"CodeFile="二级菜单模板.aspx.cs"Inherits="二级菜单模板" %>