水平的菜单按钮

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:1;
margin:1;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li><!--并没有设置链接-->
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>

其实个人感觉做导航也不错。

时间: 2024-10-19 08:47:36

水平的菜单按钮的相关文章

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件

jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法,这个组件依赖于 Menu(菜单)组件和 LinkButton(按钮)组件. 一.加载方式 class 加载方式 <a href="javascript:void(0)" id="edit" class="easyui-menubutton"

我的第一个开源组件:一个抹出来的快捷菜单按钮

最近看到一种快捷菜单按钮,是按一个钮,在其周围弹出若干个钮,并排在圆周上.再按圆心处按钮则收回弹出的按钮. 我认为这里值得改进的地方有: 1.最初得有一个按钮浮现,这个按钮有点占地方. 2.当用户放弃操作时,用户需要再按一下按钮来收回弹出的按钮.这个动作有点多余. 我认为精简一个动作和少占一个地方都有极大的价值,所以我设计的快捷按钮是: 1.平时不占任何空间,通过手势唤出. 2.放弃操作时不需要用户操作,这样用户动作最少. 操作时,用户手指一抹就带出一排菜单按钮,用户手指不离开屏幕则按钮一直保持

cocos2dx基础篇(7)——菜单按钮CCMenu、CCMenuItem

[本节内容] 菜单按钮在游戏中是经常被用到的,比如主菜单界面的菜单选项,暂停游戏时的菜单选项等等.cocos2dx引擎同样为我们提供了CCMenu菜单的功能,并包含了一些简单的菜单项CCMenuItem.且菜单项附带触碰按钮时,自动放大的效果. 温馨提示:本节内容比较多,需要大家慢慢分析,不要急于求成. 本节组织结构如下: 一.介绍CCMenu. 二.介绍CCMenuItem,及其具体的六个子类. 三.代码实战. [一.菜单CCMenu] 菜单CCMenu是专门用来承载菜单按钮的CCLayer图

BootStrap学习(2)_下拉菜单&amp;按钮组

一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

第二百三十七节,Bootstrap图标菜单按钮组件

Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组件和各 种按钮组件. 一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/components/#glyphicons.

cocos2dx 菜单按钮回调方法传参 tag传参

.h文件 void menuCallBack(CCObject* pSender); .cpp CCMenuItemSprite* item = CCMenuItemSprite::create( menuCB1, menuCB2, this, menu_selector(helloworld::menuCallBack)); item->setTag(m); 回调方法 void helloworld::menuCallBack(CCObject* pSender) { CCNode* node

仿path菜单按钮的实现

path刚出来时,其菜单按钮也算是让大多数人感到了惊艳,现在看来其实是很简单的就是动画的结合. 主要的代码类 package cn.com.karl.anim; import com.zdp.aseo.content.AseoZdpAseo; import android.R.anim; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.util

HTML5 SVG和CSS3炫酷液态菜单按钮特效

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效.该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样. 效果演示:http://www.htmleaf.com/Demo/201504081648.html 下载地址:http://www.htmleaf.com/html5/SVG/201504081647.html