Vertical navigation bar
①.aspx file
<%@ 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>
② (style sheet). css file
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;
}
③The effect is shown in the figure:
Horizontal navigation bar
Just need to float the element .
①.aspx file
<%@ 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>
② (style sheet). css file
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;
}
③The effect is shown in the figure:
Mouse move & click to change color
Take clicking on Roronoa Sauron (yyds!!!) as an example:
①.aspx file
<%@ 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>
② The result:
the mouse movement . Rolls Noah Sauron to
mouse clicks Rolls Noah Sauron.
