<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之导航菜单</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/button.min.css" />
</head>
<body>
<div id="workarea">
<div class="position">

<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<a href="http://www.cnblogs.com/caidupingblogs/"><span class="spot"></span>我的博客园</a>
</div>
</svg>
</div>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<a href="https://www.baidu.com/"><span class="spot"></span>百度一下</a>
</div>
</svg>
</div>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<a href="http://blog.sina.com.cn/u/5729482504"><span class="spot"></span>我的新浪</a>
</div>
</svg>
</div>

</div>
</div>

</body>
</html>

//

CSS之导航菜单的更多相关文章

  1. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  3. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  4. 顶 企业站常用css横向导航菜单

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  5. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  6. css网站导航-菜单

    一个简单的网站导航效果: 效果案例:查看演示 css: ;;;} body{font-family: arial, 宋体, serif;font-size: 12px;} .menu{width:11 ...

  7. CSS自适应导航菜单

    以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...

  8. css之导航菜单的制作

    通过设置<a>的背景改变样式,通过a:hover改变交互效果,改变文字颜色color 纵向 <!DOCTYPE html> <html> <head lang ...

  9. h5+css 垂直导航菜单

    http://blog.csdn.net/baidu_32731497/article/details/51814427

随机推荐

  1. 线性判别分析（Linear Discriminant Analysis，LDA）

    一.LDA的基本思想 线性判别式分析(Linear Discriminant Analysis, LDA),也叫做Fisher线性判别(Fisher Linear Discriminant ,FLD) ...

  2. java获取照片相关属性

    package test; import java.io.File; import java.util.Iterator; import com.drew.imaging.jpeg.JpegMetad ...

  3. php redis安装

    一.redis安装 1 下载redis安装包 wget http://redis.googlecode.com/files/redis-2.4.17.tar.gz (若无法下载请手动下载) 2 编译安 ...

  4. iPhone Push消息全攻略.1

    要做一个iPhone Push消息的需求,从简单test的开始. 1.先添加一个app ID 2.点击Edit来配置push服务. 3.生成两个证书,一个用于开发,一个用于发布. 4.按下图操作创建一 ...

  5. 【不积跬步，无以致千里】linux下如何查看自己的外网IP

    局域网的服务器是通过ADSL路由器连接外网的,但ADSL是从ISP运营商那儿通过动态获得IP的,那么我怎么知道自己的外网地址是多少呢?今天得到几个办法:curl -s http://whatismyi ...

  6. 教你看懂邮件头信息<转载>

    MIME对于邮件系统的扩展是巨大的,因为在MIME出现以前,信件内容如果要包括声音和动画,就必须把它变为ASCII码或把二进制的信息变成可以传送的编码标准,而接收方必须经过解码才可以获得声音和图画信息 ...

  7. 【转】单例模式（python/c++)

    1. 什么是单例模式(Singleton pattern)? 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易 ...

  8. codeforces Gym 100500C D.Hall of Fame 排序

    Hall of Fame Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/attachmen ...

  9. 第29题：推断一个序列是否是还有一个push序列的pop序列

    github:https://github.com/frank-cq/MyTest 第29题:输入两个整数序列,当中一个序列表示栈的push顺序,推断还有一个序列有没有可能是相应的pop顺序.为了简单 ...

  10. 给出一个数组A，找出一对 (i, j)使得A[i] <= A[j] (i < j)并且j-i最大

    题目:给出一个数组A,找出一对 (i, j)使得A[i] <= A[j] (i <= j)并且j-i最大 ,若有多个这样的位置对,返回i最小的那一对. 最直接的想法就是对于每一个 i 从数 ...