xhtml+css制作不规则导航

先看图（图片只是大致做了一下）


效果展示：

运行代码框

无标题文档

* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(/articleimg/2008/04/5627/03.gif) center center no-repeat;}
a:hover {color:#000;background:url(/articleimg/2008/04/5627/02.gif) 0 0 no-repeat;width:86px;position:relative;}

  • 菜单
  • 菜单
  • 菜单

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • xhtml+css制作不规则导航

    xhtml+css制作不规则导航

    先看图(图片只是大致做了一下) 效果展示: 运行代码框 无标题文档 * {margin:0;padding:0;font:normal 12px/25px "宋体";} body {background:#f8f8f8;} ul {list-style:none;width:300px;height:25px;margin:20px auto;} li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;

  • 用dom+xhtml+css制作的一个相册效果代码打包下载

    突然看到那个apple的底下的那个很漂亮,所以呢,我就改进了一下 做了一个图片版本的,好像很多人都做了个 http://home.goofar.com/bqqdqq/photo/a.html 上面这个是预览地址 如果浏览速度慢的话,下面是我做了一个包出来 兼容FF,IE 在线演示http://img.jb51.net/online/photo/a.html本地下载http://img.jb51.net/online/photo/photo.rar

  • 纯CSS实现标签导航制作

    在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明,大部分都是要涉及到JS的编写的.这对于很多CSS学习中的人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航.此文章适合初学者,高手可以路过,呵呵! nav02 *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ marg

  • jQuery结合CSS制作动态的下拉菜单

    jQuery结合CSS制作动态的下拉菜单

    当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men

  • 纯CSS制作的新闻网站中的文章列表

    应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项.如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容.CSS网页布局中,除了新闻列表.链接运行ul.li制作以外,我们通常将菜单也用ul.li来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • div+css与xhtml+css分别是什么意思?

    不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是合理使用xhtml的标签吗?可为什么还是有这么多div+css呢?既然可以div+css,那为什么不可以叫span+css ul+css li+css等等呢? 疑问,满脑子的疑问!为了这个疑问,我把自己脑子里的东西从最底层翻了一遍. 在几年前大家都是用table来布局,一层套一层,没发现什么不妥,一直用到<网站重构>这本书出来后的不久开始看到很多人讨论重构

  • JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    复制代码 代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp

  • CSS制作树状目录教程

    CSS制作树状目录教程

    本篇详细介绍如何利用CSS能方便地控制对象的"显示"和"隐藏"属性原理,制作一个树状目录,用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个. 索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录:当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华. 制作这种树状目录的方法较多,最近我先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与索易电子杂志上

  • Html5+jQuery+CSS制作相册小记录

    Html5+jQuery+CSS制作相册小记录

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离 话不多说,先上效果图: 代码如下: <!DOCTYPE html> <html> <head> <title>The second html page</title> <style ty

随机推荐