设置网络表单的宽度

时间:2013-05-27 01:03:49

标签: html asp.net css master-pages webforms

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

几个小时后我发现了问题 - 我的笔记本电脑的屏幕分辨率是1366X768,而台式电脑的屏幕分辨率是1280X768(几小时才实现 - 我的朋友花了1.2秒谁更有经验)。 您可以看到下面的差异(只是母版页,主要内容中有一行): enter image description here

我计划得到的主页是这样的: enter image description here 但是在更改代码的两周内的某个时刻,我也改变了页面的宽度......

所以我有2个问题可以帮助我:

  1. 没有进入任何设计原则,开始规划网页的好方法是什么?首先想象一下我希望表单看起来如何?它是第一个建立一个非常浅的形式,它将完成我希望他做的所有事情,然后只关注设计?的既不吗

  2. 上面是我的母版页代码的一部分(正文部分,以及正文中包含的样式)。任何人都可以帮我处理宽度设置,所以它不依赖于屏幕分辨率吗?

  3. 谢谢!

    正文中包含的样式

    <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>
    

0 个答案:

没有答案