ASP.NET 设计导航栏（横向竖向）

竖向导航栏

①.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"><title></title><link rel="stylesheet" type="text/css" href="StyleSheet.css" />  <%-- 样式表 --%>
</head>
<body><form id="form1" runat="server"><div><ul><li><a href=" ">草帽海贼团</a></li><li><a href=" ">蒙奇.D.路飞</a></li><li><a href=" ">罗罗诺亚.索隆</a></li><li><a href=" ">文斯莫克.山治</a></li>  </ul>    </div></form>
</body>
</html>

②（样式表）.css文件

ul
{list-style-type:none;
}
a
{display:block;  /*块元素*/width:150px;height:50px;background-color:Green;text-decoration:none;  /*去掉下划线*/text-align:center;  /*居中*/line-height:50px;  /*设置字体与上下边的距离*/
}
a:hover  /*设置伪类*/
{background-color:Lime;
}

③效果如图：

横向导航栏

只需要使元素浮动即可。
①.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"><title></title><link rel="stylesheet" type="text/css" href="StyleSheet.css" />  <%-- 样式表 --%>
</head>
<body><form id="form1" runat="server"><div><ul><li><a href=" ">草帽海贼团</a></li><li><a href=" ">蒙奇.D.路飞</a></li><li><a href=" ">罗罗诺亚.索隆</a></li><li><a href=" ">文斯莫克.山治</a></li>  </ul>    </div></form>
</body>
</html>

②（样式表）.css文件

ul
{list-style-type:none;
}
li
{float:left; /*浮动*/
}
a
{display:block;  /*块元素*/width:150px;height:50px;background-color:Green;text-decoration:none;  /*去掉下划线*/text-align:center;  /*居中*/line-height:50px;  /*设置字体与上下边的距离*/
}
a:hover  /*设置伪类*/
{background-color:Lime;
}

③效果如图：

鼠标移动&点击变色

以点击罗罗诺亚.索隆（yyds！！！）为例：
①.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server"><title></title><style type="text/css">#zoro{background-color:Green;  /*索隆背景色*/}.shanzhi{background-color:Yellow;  /*山治背景色*/}div a{text-decoration:none;}a:link{color:Purple;   /*字体色*/}a:hover{color:Lime;   /*设置伪类（鼠标移动过去的颜色）*/}a:visited{color:Orange;  /*鼠标点击之后的颜色*/  }   </style>
</head>
<body><form id="form1" runat="server">    <a href="#" id="zoro">罗罗诺亚.索隆</a><div><a href=" " class="shanzhi">文思莫克.山治</a>   </div></form>
</body>
</html>

②运行结果：

鼠标移动到罗罗诺亚.索隆

鼠标点击罗罗诺亚.索隆

ASP.NET 设计导航栏（横向竖向）相关推荐

HTML5+CSS设计导航栏及其子菜单
HTML界面设计新建一个web项目,在<body></body>标签中创建一个<div></div>,指定class属性="header&q ...
php网页设计导航栏代码,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
html导航栏横向展开,横向三级展开的CSS菜单
横向三级展开的CSS菜单 #nav, #nav ul {float:left; padding:0 0 5px 0; margin:0; list-style:none; font: 10px ver ...
ul 无序列表设计导航栏 + 去掉黑点 + a标签去掉下划线
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
html横向导航栏滑动效果,用css3如何实现导航栏横向拖曳滚动
写了个简单的,就是兼容性不太好(可能是安卓4.4以上吧,没测过) test .tab-head{list-style-type: none;display:-webkit-box;display:-w ...
（翻译）导航栏按钮的5类常见设计错误
用户依靠导航栏来查找所需的信息,如果导航栏按钮的标签和状态不明确,他们用着就很不方便. 以下列出设计人员设计导航栏按钮时的5类常见错误,如果你也存在这些问题,现在是时候让导航栏变得更明确了. ...
小程序横向滚动导航栏
先上案例最终效果: 案例实现功能: 1.导航栏横向滚动效果 2.当前元素有下划线标识 3.点击元素,导航栏滚动到相应位置以下将分步骤逐步完善陈述这些功能,最终会呈现所有代码 1.引用组件scroll ...
网页导航栏的设计原则和注意事项
在网页制作中,导航栏是一个非常重要的部分,它们通常位于网站的顶部或底部,用于引导用户到达不同的页面或功能.导航栏通常包括一个标题.一些链接和一些图标,用于帮助用户快速找到他们需要的内容.对于一个网站来 ...
导航栏，标签栏，工具栏和状态栏
本文摘自iPhone人机界面指南导航栏,标签栏,工具栏和状态栏状态栏,导航栏,标签栏和工具栏在iPhone应用程序中具有特别定义的外观和行为的视图.它们不需要在每个应用程序中都出现(在那些令人惊叹 ...

ASP.NET 设计导航栏（横向竖向）

竖向导航栏

横向导航栏

鼠标移动&点击变色

ASP.NET 设计导航栏（横向竖向）相关推荐

最新文章

热门文章