C# 如何调整/设置ASP.Net母版页的布局
需要一些关于如何像通常网站那样设置布局的帮助 例如： 这个网站的内容似乎就在这个白色大盒子的中央，背景是浅蓝色 我的网站会简单得多 我真的不知道如何在我的主页上有这样的（上面的网站）布局 以下是我迄今为止所做的工作：C# 如何调整/设置ASP.Net母版页的布局,c#,asp.net,layout,master-pages,C#,Asp.net,Layout,Master Pages,需要一些关于如何像通常网站那样设置布局的帮助 例如： 这个网站的内容似乎就在这个白色大盒子的中央，背景是浅蓝色 我的网站会简单得多 我真的不知道如何在我的主页上有这样的（上面的网站）布局 以下是我迄今为止所做的工作： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <asp:ContentPlaceHolder
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
<style type="text/css">
#main
{
}
.left
{
margin:0 auto;
float:left;
width:20%;
}
.right
{
margin:0 auto;
float:right;
width:20%;
}
.content
{
width:100%;
}
.footer
{
padding:5px;
background:black;
color:white;
}
.wrapper
{
margin: 0 auto;
width: 700px;
}
.auto-style1 {
width: 466px;
image-orientation:auto;
}
.auto-style2 {
width: 466px;
height: 23px;
}
.auto-style3 {
width: 100%;
border: 1px solid #000000;
}
</style>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="left" class="left" > </div>
<div id="cont" class="wrapper">
<table class="content">
<tr>
<td class="auto-style1">
<asp:Image ID="Logo_MaduDTrading" runat="server" ImageUrl="~/Images/BeforeLogin/Logo_MaduDTrading.jpg" />
</td>
</tr>
<tr>
<td class="auto-style2">
</td>
</tr>
<tr>
<td class="auto-style1">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td class="auto-style1">
</td>
</tr>
<tr>
<td class="auto-style1">
</td>
</tr>
</table>
</div>
<div id="right" class="right"></div>
</form>
</body>
</html>
#主要
{
}
左边
{
保证金：0自动；
浮动：左；
宽度：20%；
}
.对
{
保证金：0自动；
浮动：对；
宽度：20%；
}
.内容
{
宽度：100%；
}
.页脚
{
填充物：5px；
背景：黑色；
颜色：白色；
}
.包装纸
{
保证金：0自动；
宽度：700px；
}
.auto-style1{
宽度：466px；
图像定位：自动；
}
.auto-style2{
宽度：466px；
高度：23px；
}
.自动样式3{
宽度：100%；
边框：1px实心#000000；
}
高级版谢谢。当我想将网站居中对齐时，我对主页内容使用了div标记，并设置了宽度、自动左边距和右边距。您还可以将主体背景颜色设置为与div标记不同，以在您提供的示例站点中创建效果。比如说 母版页中的Html：
<div class="page">
Page content here
</div>
您可以在顶部和底部添加边距，以在屏幕中央添加框。请随意提问。在母版页中创建母版页和/或内容占位符控件时，您应该使用响应性web设计技术。这将解决页面居中问题和对象的宽度。这也是示例站点创建布局的方式 如何集中你的内容 正如Jonathan Bick所提到的，最常用的内容居中方法是将任意给定div的左右边距设置为自动。这可以通过以下方法完成：
.someClass{margin:0 auto;}
内容居中时的常见错误 以下任何一种情况都可能导致内容无法正确居中：
- 忘记设置宽度。
- 必须明确设置任何居中元素的宽度。这可以通过窗口的百分比、像素或任何其他方式完成
- 将div放置在设置为向左或向右浮动的容器中。
- 这样做将导致包含的div忽略其width属性。测试一下
响应式网页设计须知 响应式web设计用于创建一个网站，该网站可以根据当前屏幕大小自动调整其元素，以获得最佳布局。最棒的是，这完全可以通过CSS和HTML实现。你可以在下面的链接中找到所有你需要开始的东西
使用谷歌浏览器的“检查元素” Google Chrome（以及大多数其他浏览器）有一个名为Inspect element的工具。右键单击网站中的某个元素时，在关联菜单的底部将看到“检查元素”选项。单击此按钮将弹出一个工具，用于分析任何渲染元素的属性，并使用颜色编码、图像、标签等显示这些属性。该工具非常优秀，可以帮助您确定图像不居中的原因 在这里，您可以看到当我检查堆栈溢出的徽标时发生了什么 此外… 可以使用“样式”窗口（位于“图元”面板的右下角）快速测试新样式
请注意，我将样式部分中徽标的边框更改为
solid 20px red.someClass{margin:0 auto;}