对于我的生活,我无法弄清楚为什么我尝试应用的 CSS 不起作用,希望有人能帮助我。
索引主
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Index.master.cs" Inherits="IGS.Index" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta charset="utf-8" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="container">
<div class="header">
<asp:ContentPlaceHolder ID="HeaderContentBar" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="sidebar1">
<asp:ContentPlaceHolder ID="LeftNavBar" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content">
<asp:ContentPlaceHolder ID="MainContentBar" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<asp:ContentPlaceHolder ID="FooterContentBar" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
默认.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="IGS._default"
MasterPageFile="Index.Master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>Site Index</title>
</asp:Content>
<asp:Content ID="HeaderContentBar" runat="server" ContentPlaceHolderID="HeaderContentBar">
Header
</asp:Content>
<asp:Content ID="LeftNavBar" runat="server" ContentPlaceHolderID="LeftNavBar">
<ul class="nav">
<li><a href="news.aspx">News</a></li>
<li><a href="admin/default.aspx">Administration</a></li>
</ul>
</asp:Content>
<asp:Content ID="MainContentBar" runat="server" ContentPlaceHolderID="MainContentBar">
<h1>
Latest News</h1>
<asp:Repeater ID="newsRepeater" runat="server">
<ItemTemplate>
<div class="newsHeadline">
<b>
<%# Server.HtmlEncode(Eval("newsHeadline").ToString())%></b>
<div class="newsStory">
<%# Server.HtmlEncode(Eval("newsStory").ToString())%>
</div>
<div class="newsFooter">
Posted By:
<asp:HyperLink ID="newsSubmittedBy" runat="server" NavigateUrl='<%# string.Format("User.aspx?id={0}", Eval("id")) %>'
Text='<%# Server.HtmlEncode(Eval("newsSubmittedBy").ToString())%>' />
- Submitted By:
<%# Server.HtmlEncode(Eval("newsDate").ToString())%>
</div>
<div style="text-align: right;">
<asp:HyperLink ID="newsReadMore" runat="server" CssClass="newsReadMore" NavigateUrl='<%# string.Format("News.aspx?id={0}", Eval("id")) %>'
Text="Read More..." />
</div>
<hr />
</ItemTemplate>
</asp:Repeater>
<p class="newsDaySelector">
<asp:TextBox ID="TextBox1" runat="server" Width="30" Text="7"></asp:TextBox>
days</p>
</asp:Content>
<asp:Content ID="FooterContentBar" runat="server" ContentPlaceHolderID="FooterContentBar">
</asp:Content>
编辑:多么不幸。我做了下面推荐的一切,但仍然无法正常工作。这很奇怪。该页面之前进行了部分样式设置,因此它似乎至少正确地抓住了它。如果其他人有任何想法,我很想听听他们的意见。
这是我的 CSS。正如我所说,非常基本,它只工作了一半。主要问题是页脚不会沿着底部运行,而是与内容区域的左侧对齐。
body
{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container
{
width: 960px;
background-color: #FFF;
margin: 0 auto;
}
.header
{
background-color: #ADB96E;
}
.sidebar1
{
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content
{
padding: 10px 0;
width: 780px;
float: left;
}
.footer
{
padding: 10px 0;
background-color: #6F7D94;
position: relative;
clear: both;
}