無需表格製作CSS選單

暖楓無敵發表於2011-07-18
CSS
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        #navigation
        {
            width: 200px;
            font-family: Arial;
        }
        #navigation ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        #navigation li
        {
            border-bottom: 1px solid #ED9F9F;
        }
        
        #navigation li a
        {
            display: block;
            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            border-left: 12px solid #711515;
            border-right: 1px solid #711515;
        }
        
        #navigation li a:visited, #navigation li a:link
        {
            background-color: #c11136;
            color: #FFFFFF;
        }
        
        #navigation li a:hover
        {
            background-color: #990020;
            color: #FFFF00;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="navigation">
        <ul>
            <li><a href="#">Asp.Net</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Cascading Style Sheet</a></li>
            <li><a href="#">Silverlight</a></li>
        </ul>
    </div>
    </form>
</body>
</html>


效果如下圖，最近不是很忙，研究下前端方面的知識，css首當其衝，解決掉它。




相關文章