Question

我有一个网页，我希望它具有固定含义，如果分辨率发生变化，对象仍然会对齐。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Tanauan LGU </title>
        <link href="pds_NewEmployee.css" rel="stylesheet" type="text/css" />
    </head>

    <header>
        <img src="workforceheader.jpg" width="100%" height="">
    </header>
    <nav>
        <div id="menu">
            <ul>
                <li class="right"><a href="#">HOME</a>
                    <ul>
                        <li><a href="#">Subitem One</a></li>
                        <li><a href="#">Subitem Two</a></li>
                        <li><a href="#">Subitem Three</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <body width="100%">
        <table align="center" bgcolor="#edf1f8" class="maintable" width="100%" >
            <tr>
                <td>
                    <div class="info">
                        <div class="Tpersonalinfo">
                            I.PERSONAL INFORMATION.
                        </div>
                        <div class="Tlastname">
                            LAST NAME:         <input type="text" id="lastname" size="22" maxlength="16" /></div>
                        <div class="Ttelephone">
                            TELEPHONE NO:      <input type="text" id="telephone" size="25" maxlength="16"/>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

CSS

body {
    width: 100%;
    margin: 0px 0px 0px 0px;
}

#menu {
    width: 100%;
    margin-top: 0px;
    height: 40px;
    border-radius: 3px;
    margin-top: -45px;
    font-style: normal;
}

#menu ul ul {
    display: none;
}

#menu ul li:hover > ul {
    display: block;
}

#menu ul
{
    padding: 0px;
    border-radius: 5px;
    list-style: none;
    margin: 0;
    position: relative;
    display: block;
    margin-left: 30px;
}

#menu ul:after {
    content: "";
    clear: both;
    display: block;
}

#menu ul li {
    float: left;
    margin-top: 20px;
}

#menu ul li:hover {
    background: #000;
    color: #FFF;
}

#menu ul li:hover a {
    background: #FFF;
    color: #000;
}

#menu ul li a {
    display: block;
    margin-top: -20px;
    padding: 10px 5px;
    color: #CCC;
    text-decoration: none;
}

#menu ul ul {
    right: 2px;
    background: #FFF;
    color: #000;
    padding: 0;
    position: absolute;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}

#menu ul ul li {
    float: none;
    position: relative;
}

#menu ul ul li a {
    width: 150px;
    heigh: 50px;
    padding: 10px;
    color: #FFF;
}

#menu ul ul li a:hover {
    background: #28183A;
    color: #FFF;
}

#menu ul li.right {
    float: right;
    margin-right: 10px;
    font-style: normal;
}

#menu ul li.home
{
    margin-top: 10px;
}

#menu ul li.home:hover
{
    background: #333;
}

#menu ul li.LGU:hover a
{
    background: #28183A;
    color: #FFF;
}

.info
{
    float: left;
}

#lastname
{
    margin-left: 22px;
}

#firstname
{
    margin-left: 19px;
}

.contact
{
    position:fixed;
}

.Ttelephone
{
    margin-top: -23px;
    margin-left: 550px;
}

.maintable
{
    margin-top: 50px;
    width: 1220px;
}

使用 Ctrl +向上滚动元素会将其对齐方式更改为姓氏。

Answer 1

这取决于需要什么。如果它不应缩放（即固定宽度，则使用固定宽度值而不是100%：

即。改变

body { width:100%; margin:0px 0px 0px 0px; }

到

body { width: 500px; margin:0px 0px 0px 0px; }

如果您需要更具响应性的内容，最好选择Bootstrap或Foundation，Susy。（具有内置网格支持的东西）。

屏幕尺寸更改时如何使网页不移动

HTML

CSS

1 个答案: