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
随机推荐
- Android 多点触控错误处理（java.lang.IllegalArgumentException: pointerIndex out of range）
最近做View的多点触控时,每次第一次触控事件完美运行,第二次就直接崩了,错误信息如下: 01-03 00:05:44.220 4377-4410/system_process E/AndroidRu ...
- 用 JavaScript 修改样式元素
利用 <style> 元素,我们可以在网页中嵌入样式表.如果需要动态增加 <style> 元素,似乎可以用如下的 JavaScript 代码: var style = docu ...
- disque概要
做项目过程接触到disque,记录一下. disque是redis之父开源的基于内存的分布式作业队列,用c语言实现的非阻塞网络服务器. disque的设计目标:Its goal is to captu ...
- cocos2d-x CCTableView
转自:http://www.cnblogs.com/dcxing/archive/2013/01/16/2862068.html CCTableView在游戏中一般用在背包这样场景或层中,当然也不止这 ...
- Spring+Ibatis集成开发实例
首先简历数据库demo(本文选mysql) 数据库脚本: CREATE TABLE `ibatis` ( `id` varchar(20) NOT NULL, `name` varchar(20) ...
- VS2012开发ActiveX插件 尝试1
今天闲来无聊研究了下 ActiveX插件开发,以前一直以为很牛逼,然后发现还是比较简单的东西.. 首先: 在开始前 准备好 VS12开发工具,cabarc.exe 工具(注:这是 用来 将文件打包成c ...
- SAP BW顾问如何保持市场竞争力
跟大部分电工一样,SAP顾问也经常有迷茫的时候.因为,这个世界变化实在太快了.每一个电工,总是在担心自己会不会被飞速发展的技术所淘汰.那么,作为 一个BW顾问,应该如何保持市场竞争力呢?我觉得需要两个 ...
- URAL 2048 History 蔡勒公式
HistoryTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.acti ...
- c# 将PPT转换成HTML
这只是一个小程序,就是将ppt转换成html,方法很多,为了以后备用,在此记录一下,也和大家分享 源码如下: using System; using System.Collections.Generi ...
- -_-#【JS】defer / async
引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...