当前位置：文档之家› 竖向的二级导航菜单代码特效,纯DIV+CSS制作

竖向的二级导航菜单代码特效,纯DIV+CSS制作

竖向的二级导航菜单代码特效,纯DIV+CSS制作
竖向的二级导航菜单代码特效,纯DIV+CSS制作

竖向的二级导航菜单代码特效,纯DIV+CSS制作

dropdown?--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU

.menu ul li a:hover {

color:#fff;

background:#b3ab79;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:32px;

left:0;

width:105px;

}

.menu ul li a:hover ul li a {

background:#faeec7;

color:#000;

}

.menu ul li a:hover ul li a:hover {

background:#dfc184;

color:#000;

}

实验DivCSS网页布局

实验九 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/

├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

DIV+CSS：网站首页布局实例教程

DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/

├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

竖型导航栏的制作

竖型导航栏的制作 1、新建html文件index.html，使用文本编辑器进行编辑。如下图： 2、在内开始编写导航栏的html代码。使用ul标签建立一个无序列表

效果如下图： 此时的列表还不能点击进行导航，我们使用标签进行超链接:

效果如下图： 3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在标签里进 行引用。 4、新建CSS文件使用文本编辑器进行编辑 A.应为html页面默认有内、外边距。为方便我们进行样式设计，把所有标 签默认的内、外边距设为0px。 *{ margin:0px; padding:0px; } B.为了使导航栏在页面中间我们通过设置列表所在的

标签的属性实现 #main { width:900px; margin:50px auto; position:relative } C．为了导航栏突出于页面我们对列表标签整体进行设计 .nav { height:320px; width:150px; background:#90BADE; border-right:1px solid #333; margin:0 auto; } 效果如下图：

纵向导航菜单

今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单，包含以下内容和知识点： ■纵向列表 ■标签的默认样式 ■css派生选择器 ■css选择器的分组 ■纵向二级列表 ■相对定位和绝对定位 一、纵向列表 纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作 先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。

从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉

生成的css代码如下： 下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性 body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等 接下来定义li的背景色为浅灰色及下边框和内边距 这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。 要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面。

跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单

目录 1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 (2) 1.1.1Spry菜单栏 (2) 1.1.2自定义菜单栏组件的显示风格（修改CSS文件） (9) 1.1.3更改菜单栏组件的方向 (15)

1.1Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 1.1.1Spry菜单栏 Spry 框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry，就可以使用HTML、CSS 和极少量的JavaScript 将XML 数据合并到HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。 在设计上，Spry 框架的标记非常简单且便于那些具有HTML、CSS 和JavaScript 基础知识的用户使用。 1、菜单栏组件是一组可导航的菜单按钮 当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。 Dreamweaver 允许Web开发人员插入两种菜单栏组件：垂直组件和水平组件。并且所生成的菜单栏组件由标准的HTML标签（由