<!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. typdef struct 语法

    1:结构体 C语言中定义一个结构体的语法如下: struct tagMyStruct { int age; int sex; }; 其中,tagMyStruct是结构体名,在使用时,需要和struct ...

  2. Java中的递归原理分析

    解释:程序调用自身的编程技巧叫做递归.        程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用 ...

  3. 80端口被NT kernel & System 占用pid 4

    前段时间停止了Apache,结果在打开的时候发现无法打开,80端口被占用,于是win+r 运行cmd 输入netstat -ano 可以看到80端口被PID4占用,于是打开任务管理器-进程-查看,选择 ...

  4. python的一些总结4

    这篇继续水 但是在水的的基础上 让搭建能正常使用flask 搭建一个站 上篇讲到在 模板view中 输入{{xx }} 可以打印 后台传的值. 这篇讲一下 循环控制 条件控制等 修改后台代码: @ap ...

  5. hihocoder #1224 : 赛车 dfs

    #1224 : 赛车 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/problemset/problem/1224 ...

  6. seajs 2.3.0 加入jquery

    [前言] 上篇文章简单的介绍了seajs的使用,下午使用seajs整合jquery就碰到问题了. 下载seajs上的examples,里面直接require('jquery')没有不论什么问题, 我照 ...

  7. Fedora 下 安装 chrome

    一.下载安装包,安装 1.去google 下载安装包 2.终端下    运行命令:    rpm -ivh google-chrome-stable_current_i386.rpm 3.  出现如下 ...

  8. 类的this指针 总结

    类的this指针有以下特点: (1)this只能在成员函数中使用 全局函数,静态函数都不能使用this. 实际上,成员函数默认第一个参数为T* const this. 如: class A { pub ...

  9. PAT 1019

    1019. General Palindromic Number (20) A number that will be the same when it is written forwards or ...

  10. php上传常见文件类型对应的$_FILES["file"]["type"]（转）

    php上传常见文件类型对应的$_FILES["file"]["type"] from:http://hi.baidu.com/7book/item/374971 ...