几周前,我为webForms应用程序(asp.net)创建了一个非常简单的母版页(主要基于创建新的Web表单应用程序时自动创建的默认vs2010母版页)。 我对HTML和CSS 非常不好,但幸运的是,我的大多数应用程序都不需要很多样式,所以到目前为止我并没有遇到很多关于CSS的困难。 在这个项目的这一点上,经过2周的密集工作,我希望在浏览器中查看我的结果(并向我的女朋友们展示我真棒的网站时,向我的自我添加20分......)。 当我在笔记本电脑中运行代码时,运行得很好。但是当我在台式电脑上运行它时(显然我的女朋友正在观看) - 它出错了......
几个小时后我发现了问题 - 我的笔记本电脑的屏幕分辨率是1366X768,而台式电脑的屏幕分辨率是1280X768(我几小时才实现 - 我的朋友花了1.2秒谁更有经验)。 您可以看到下面的差异(只是母版页,主要内容中有一行):
我计划得到的主页是这样的: 但是在更改代码的两周内的某个时刻,我也改变了页面的宽度......
所以我有2个问题可以帮助我:
没有进入任何设计原则,开始规划网页的好方法是什么?首先想象一下我希望表单看起来如何?它是第一个建立一个非常浅的形式,它将完成我希望他做的所有事情,然后只关注设计?的既不吗
上面是我的母版页代码的一部分(正文部分,以及正文中包含的样式)。任何人都可以帮我处理宽度设置,所以它不依赖于屏幕分辨率吗?
谢谢!
正文中包含的样式
<style type="text/css">
.style1
{
display: block;
float: left;
text-align: left;
width: 254px;
height: 50px;
}
.style2
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
vertical-align: middle;
}
.style3
{
text-align: right;
width: auto;
direction: ltr;
}
.style4
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.style5
{
height: 69px;
}
.style6
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
width: auto;
}
</style>
母版页的正文部分:
<body>
<form id="Form2" runat="server"
style="border-style: none; border-color: #BEDDFE; width: 90%;">
<div class="page" style="width: 90%">
<div class="style4"
style="border-left: thick none #5481AD; border-right: thick none #5481AD; border-top: thick none #5481AD; border-bottom: thick solid #5481AD; padding: inherit; margin: auto; background-color: #FFFFFF; ">
<div class="style1">
<h1 style="background-image: url('/Images/yodalogo.png'); background-repeat: no-repeat"
class="style5">
</h1>
</div>
<div class="style2" style="background-color: #FFFFFF">
<p class="style3">
<asp:LinkButton ID="logoutBtn" runat="server" BackColor="#465C71"
BorderColor="#B6B7BC" BorderStyle="Solid" BorderWidth="2px"
Font-Overline="False" ForeColor="#E4E4E4" Height="24px"
PostBackUrl="~/Login.aspx"
style="font-family: 'Segoe UI'; text-decoration: none; margin-left: 0px"
Width="45px" onclick="logoutBtn_Click" CausesValidation="False">Logout</asp:LinkButton>
</p>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"
onmenuitemclick="NavigationMenu_MenuItemClick">
<Items>
...items
</Items>
</asp:Menu>
</div>
</div>
</div>
<div class="style6">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<%-- </div>--%>
</form>
</body>