Добавление таблицы стилей в asp.net (с использованием Visual Studio 2010)

Question

Добавление таблицы стилей в asp.net (с использованием Visual Studio 2010)

Я пытаюсь добавить таблицу стилей на главную страницу в веб-форме asp.net. В основном пытаюсь создать встроенное навигационное меню для верхней части страницы. У меня проблемы с этим. Я создал таблицу стилей (так же, как если бы это был сайт html), и поместил ее в каталог, который вы видите ниже. Я не вижу, как код ниже показывает какое-либо отношение к таблице стилей, хотя.

Как и в HTML, я бы

Главная
Около
контакт

И тогда моя таблица стилей будет выглядеть так...

ul {
list-style-type:none;
margin:0;
padding:0;
}

li {
display:inline;
padding:20px;
}

И CSS позволит отображать его встроенным (через верх). Но я не уверен, куда идти.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>AR Toolbox</title>
<asp:ContentPlaceHolder id="Stylesheets" runat="server">
    <link rel="Stylesheet" href="/css/master.css" type="text/css" />
</asp:ContentPlaceHolder>
<style type="text/css">
    .style1
    {
        width: 100%;
    }
    .style2
    {
        height: 459px;
    }
    .style3
    {
        width: 100%;
        height: 100%;
    }
    .style6
    {
        height: 79px;
    }
    .style7
    {
        width: 345px;
        height: 73px;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
    <tr>
        <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
            class="style6">
            <asp:Menu ID="Menu1" runat="server">
                <Items>
                    <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                    <asp:MenuItem Text="About" Value="About"></asp:MenuItem>
                    <asp:MenuItem Text="Compliance" Value="Compliance">
                        <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem>
                        <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
                    <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </td>
    </tr>
    <tr>
        <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
            class="style6">
            <img alt="South University'" class="style7" 
                src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td>
    </tr>
    <tr>
        <td class="style2">
            <table class="style3">
                <tr>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="color: #FFFFFF; background-color: #A3A3A3">
            This is the footer.</td>
    </tr>
</table>
</form>
</body>
</html>

5

css asp.net inline navigationbar

Источник

user2311709 23 апр '13 в 14:34

3 ответа

Другие вопросы по тегам css asp.net inline navigationbar

user1221410 23 апр '13 в 14:38 2013-04-23 14:38 · Answer 1 · 2013-04-23 14:38

Несколько вещей здесь.

Во-первых, вы определяете свой CSS в 3 местах!

На очереди, в голове и внешне. Я предлагаю вам выбрать только один. Я собираюсь предложить внешне.

Я предлагаю вам обновить свой код в форме ASP с

<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
        class="style6">

к этому:

<td  class="style6">

А потом обновите свой CSS тоже

.style6
    {
        height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
    }

Это удаляет встроенный.

Теперь, чтобы переместить его из головы веб-формы.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>AR Toolbox</title>
    <link rel="Stylesheet" href="css/master.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
    <tr>
        <td class="style6">
            <asp:Menu ID="Menu1" runat="server">
                <Items>
                    <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                    <asp:MenuItem Text="About" Value="About"></asp:MenuItem>
                    <asp:MenuItem Text="Compliance" Value="Compliance">
                        <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem>
                        <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
                    <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </td>
    </tr>
    <tr>
        <td class="style6">
            <img alt="South University'" class="style7" 
                src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td>
    </tr>
    <tr>
        <td class="style2">
            <table class="style3">
                <tr>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="color: #FFFFFF; background-color: #A3A3A3">
            This is the footer.</td>
    </tr>
</table>
</form>
</body>
</html>

Теперь в новый файл с именем master.css (в папке css) добавьте

ul {
list-style-type:none;
margin:0;
padding:0;
}

li {
display:inline;
padding:20px;
}
.style1
{
    width: 100%;
}
.style2
{
    height: 459px;
}
.style3
{
    width: 100%;
    height: 100%;
}
.style6
{
    height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
}
.style7
{
    width: 345px;
    height: 73px;
}

user3221190 16 апр '15 в 14:48 2015-04-16 14:48 · Answer 2 · 2015-04-16 14:48

Добавьте свой стиль здесь:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BSC.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/NewStyle.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

Тогда на странице:

<asp:Table CssClass=NewStyleExampleClass runat="server" >

user4300137 23 май '16 в 14:20 2016-05-23 14:20 · Answer 3 · 2016-05-23 14:20

Единственное, что вам нужно сделать, это добавить в файл cshtml в заголовке следующую строку:

        @Styles.Render("~/Content/Main.css")

Вся голова будет выглядеть примерно так:

    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>HTML Page</title>
         @Styles.Render("~/Content/main.css")
    </head>

Надеюсь, поможет!!