前端设计-布局-导航栏-div居中

一、一个导航栏:

<header style="font-family: 宋体, Arial, Helvetica, sans-serif; font-size: xx-large; line-height: 50px; text-align: center; padding-left: 30px">
        <nav>
            <a href="https://blog.csdn.net/weixin_43917370">学习网站</a> |
            <a href="http://acm.heyuantao.cn/faqs.php">常见问答</a> |
            <a href="/js/">问题</a> |
            <a href="/jquery/">状态</a> |
            <a href="/js/">排名</a> 
        </nav>
    </header>

效果如下:

二、div布局

<div style="border-style: ridge;  padding-top:20px;padding-left: 200px; margin: auto; width: 50%;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="auto-style2">&nbsp;&nbsp; 登录界面</span><br class="auto-style2" />
        <br class="auto-style2" />
        <span class="auto-style2">学号:</span><asp:TextBox ID="TextBox1" runat="server" CssClass="auto-style2"></asp:TextBox>
        <br class="auto-style2" />
        <br class="auto-style2" />
        <span class="auto-style2">姓名:</span><asp:TextBox ID="TextBox2" runat="server" CssClass="auto-style2"></asp:TextBox>
        <br class="auto-style2" />
        <br class="auto-style2" />
        <asp:Button ID="Button1" runat="server" Height="45px" OnClick="Button1_Click" Text="登录" Width="79px" CssClass="auto-style2" />
    
        <span class="auto-style2">&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button2" runat="server" Height="41px" OnClick="Button2_Click" Text="注册" Width="86px" CssClass="auto-style2" />
        &nbsp;<asp:Label ID="Label1" runat="server" Text="Label" CssClass="auto-style2"></asp:Label>
    
        &nbsp;</span><br />
    
    </div>

1、设置div的style的width为百分数,比如50% ,是占其父窗口的50%。这样就可以随着屏幕大小而改变;

2、设置div的style的margin:auto, 可以让div居中。

猜你喜欢

转载自blog.csdn.net/weixin_43917370/article/details/108108817