asp.net_css应用_aspx 绝对路径引用css-CSDN博客

本文链接：https://blog.csdn.net/weixin_45905039/article/details/123730187

1.通过RadioButton改变css样式

2.BulletedList完善例子

先放出效果图

在这里插入图片描述

前端代码：

<%@ 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 runat="server">
    <title></title>
    <style type="text/css">
    .style1 li
    {
        display:inline-block;
        width:100px;
        
    }
     
     .style2 li
     {
         padding:15px;
         list-style-type:decimal-leading-zero;
      }
         
     .style3 li
     {
         padding:15px;
         color:Gray;
     }
         
     .style3 li:hover
     {
         color:Red;
         
      }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButton ID="RadioButton1" runat="server" Text="样式一:横向排列" 
            GroupName="style" AutoPostBack="true" 
            oncheckedchanged="RadioButton1_CheckedChanged"/>&nbsp;
        <asp:RadioButton ID="RadioButton2" runat="server" Text="样式二：纵向排列" 
            GroupName="style" AutoPostBack="true" 
            oncheckedchanged="RadioButton2_CheckedChanged"/>&nbsp;&nbsp;
        <asp:RadioButton ID="RadioButton3" runat="server" Text="样式三:超链接" GroupName="style" 
            AutoPostBack="true" oncheckedchanged="RadioButton3_CheckedChanged"/>
        <br />
        <br />
        <asp:BulletedList ID="BulletedList1" runat="server" CssClass="" 
            DataSourceID="AccessDataSource1" DataTextField="网站名称" DataValueField="网址">
        </asp:BulletedList>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/test.mdb" SelectCommand="SELECT [网站名称], [网址] FROM [TB_HLINKS]">
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>

①这里用到了RadioButton按钮控件，并且应用了GroupName让三个选项分为一组，以达到只能选择一个选项的效果

②AutoPostBack属性用来判断是否发送自动回传到服务器，具体的可以参考下文：
AutoPostBack属性

③这里还应用到了BulletedList添加数据源（数据库）的操作（手动添加选项也行）：
首先创建好一个数据库文件（Access，mysql等等都行），导入你的项目，然后在工具箱添加一个BulletedList，最右边的箭头标志点击，选择数据源，新建数据源，选中你项目中的数据库文件，选择好column，点击测试查询，最后要对应好各个字段，如下图
在这里插入图片描述
最后就完成了。

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
    {
        BulletedList1.CssClass = "style1";
        BulletedList1.DisplayMode = BulletedListDisplayMode.Text;
    }
    protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
    {
        BulletedList1.CssClass = "style2";
        BulletedList1.DisplayMode = BulletedListDisplayMode.Text;
    }
    protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
    {
        BulletedList1.CssClass = "style3";
        BulletedList1.DisplayMode = BulletedListDisplayMode.HyperLink;
    }
}

先上效果图

在这里插入图片描述

点击其中一个，就会跳转到对应的网站。

前端代码：

<%@ 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">
    
    .style1
    {
        
        border-bottom:1px solid Gray;
        border-top:1px solid Gray;
        background-image:url(imgs/back_navbar.png);
        
     }
     
     .style1 li
     {
         display:inline-block; 
         padding:15px 30px 15px 25px;
         border-right:1px solid Gray;
         }
         
     .style1 a
     {
         text-decoration:none;
         font-size:14px;
         color:Gray;
         margin-left:10px
         }
    .style1 a:hover
    {
        color:Red;
        
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:BulletedList ID="BulletedList1" runat="server" DisplayMode="HyperLink" CssClass="style1"
            DataSourceID="AccessDataSource1" DataTextField="网站名称" DataValueField="网址">
        </asp:BulletedList>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/test.mdb" SelectCommand="SELECT [网站名称], [网址] FROM [TB_HLINKS]">
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>