CSS之导航菜单
<!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之导航菜单的更多相关文章
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- 顶 企业站常用css横向导航菜单
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- css网站导航-菜单
一个简单的网站导航效果: 效果案例:查看演示 css: ;;;} body{font-family: arial, 宋体, serif;font-size: 12px;} .menu{width:11 ...
- CSS自适应导航菜单
以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...
- css之导航菜单的制作
通过设置<a>的背景改变样式,通过a:hover改变交互效果,改变文字颜色color 纵向 <!DOCTYPE html> <html> <head lang ...
- h5+css 垂直导航菜单
http://blog.csdn.net/baidu_32731497/article/details/51814427
随机推荐
- List、ArrayList、Vector及map、HashTable、HashMap分别的区别
一.List与ArrayList的区别 List->AbstractList->ArrayList (1) List是一个接口,ArrayList是一个实现了List接口 ...
- Template模式
在开发时,有时会遇到对于一个算法的实现,在不同的对象中有不同的实现,可是这个算法的框架是同样的.这时能够使用Template模式或Strategy模式. Template是採用继承的方式来实现这一点, ...
- Android Studio安装及主题字体配置
在2013 Google I/O 大会上,谷歌推出了自家全新的安卓软件集成开发工具 Android Studio,这是 Google 基于 IntelliJ IDEA 改动而来. 谷歌称 Androi ...
- iOS开发笔记系列-基础7(C语言特性)
Objective-C是C语言的扩展,因此,也具备很多C语言的基本特性,这里只罗列部分. 块(Blocks) 块是对C语言的一种扩展,它并未作为标准ANSI C所定义的部分,而是Apple添加到语言中 ...
- mysql的top n查询
我们知道,在ms sql server中或access中,若要查询前10条记录,使用top 10即可,但在mysql中不支持这个写法,它用limit 10. 我们可以利用MySQL中SELECT支持 ...
- 偶然发现关于网页JavaScript脚本无法正常运行的原因
客户常常打电话投诉公司的销售系统有问题, 后来发现有的客户直接把网址设为受限网站,才导致系统无法正常执行.改动后正常.
- 一入python深似海--dict(字典)的一种实现
以下是python中字典的一种实现.用list数据结构实现字典.详细是这种:[[(key1,value1),(key2,value2),...],[],[],...] 内部每个hash地址是一个lis ...
- ios开发——实战Swift篇&简单项目的实现
学了这么久的swift语法和相关技术,今天忍不住手痒痒就写了一个swift的小项目,这个项目非常简单(只是使用一个UITableView),但是里面的功能却非常有用. 我们要实现的功能是这样的: 程序 ...
- i = i++;
在这里jvm里面有两个存储区,一个是暂存区(是一个堆栈,以下称为堆栈),另一个是变量区.语句istore_1是将堆栈中的值弹出存入相应的变量区(赋值):语句iload_1是将变量区中的值暂存如堆栈中. ...
- python分页和session和计算时间差
分页 #!/usr/bin/env python # -*- coding:utf-8 -*- class Pagenation: def __init__(self,current_page,all ...