0

几周前，我为 webForms 应用程序 (asp.net) 创建了一个非常简单的母版页（主要基于在创建新的 Web 表单应用程序时自动创建的默认 vs2010 母版页）。我非常不擅长 HTML 和 CSS，但幸运的是，我的大多数应用程序都不需要太多的样式，所以到目前为止，我在 CSS 方面并没有遇到很多困难。在这个项目的这一点上，经过 2 周的密集工作，我希望在浏览器中查看我的结果（当然，当我向我的女朋友展示我的很棒的网站时，我的自尊心会增加 20 分......）。当我在笔记本电脑上运行代码时，运行良好。但是当我在我的台式电脑上运行它时（很明显，我的女朋友在看） - 它出错了......

几个小时后，我发现了问题——我的笔记本电脑的屏幕分辨率为 1366X768，而台式电脑的屏幕分辨率为 1280X768（我花了几个小时才意识到——我的一个更有经验的朋友花了 1.2 秒）。您可以在下面看到不同之处（仅母版页，主要内容中只有一行）： 在此处输入图像描述

我计划获得的母版页是这样的： 在此处输入图像描述 但是在更改代码的 2 周内的某个时间点，我还更改了页面的宽度......

所以我有两个问题可以帮助我：

  1. 在不涉及任何设计原则的情况下，开始规划网页的好方法是什么？是否首先可视化我希望表单的外观？是不是先建立一个很浅的形式，它会做我想让他做的所有事情，然后才负责设计？两者都不？

  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">
                &nbsp;</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>
4

0 回答 0