无需表格制作CSS菜单

简介: #navigation { width: 200px; font-family: ...
<%@ 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首当其冲,解决掉它。




相关文章
|
6月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
71 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
3月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
16天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
4月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
177 0
|
3月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
5月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
5月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
52 1