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
随机推荐
- 在 CentOS 上安装和配置 OpenNebula
转自:http://www.aikaiyuan.com/4889.html 我们提到的云计算一般有三种类型:软件即服务(Software as a Service, SaaS),平台即服务(Platf ...
- iOS 推送证书
push 服务器证书 钥匙串:登入-->证书,选项里面导出证书命名为cert.p12,跟密钥命名为key.p12 需要将上面的2个.p12文件转成.pem格式: openssl pkcs12 - ...
- Oracle数据库文件恢复与备份思路
怎样才能对Oracle数据库进行备份?如何才能对删除的数据再进行恢复?这是困扰着很多人的问题.大家都知道,任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操 ...
- MFC视图切换大全总结
单纯视图之间的切换 单文档多视图切换是我在学习MFC中遇到的一个老大难问题,在今天总算是一一破解了.我觉得视图切换分为三个等级,第一是在未切分窗格的情况下切换视图类:第二是在分割窗格的一个窗格内实行视 ...
- Codeforces Gym 100338C C - Important Roads tarjan
C - Important RoadsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contes ...
- 一个Windows Service项目的完整开发过程
(一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目 -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...
- MySQL server version for the right syntax to use near ‘USING BTREE
转自:http://www.douban.com/note/157818842/ 有时导入mysql会提示如下错误: C:\Users\liqiang>mysql -uroot -paaaaaa ...
- Android之使用AchartEngineActivity引擎绘制柱状图、曲线图
1.简介 AChartEngine(简称ACE)是Google的一个开源图表库(for Android).它功能强大,支持散点图.折线 .关于里面类的具体使用,请下载响应的文档说明(主页上有). 2. ...
- android147 360 程序锁
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- True Zero Downtime HAProxy Reloads--转载
原文地址:http://engineeringblog.yelp.com/2015/04/true-zero-downtime-haproxy-reloads.html HAProxy: Corner ...