Question

我的网站出现问题。每当我尝试重新调整浏览器窗口大小时。我的所有文本，图像和导航栏都在屏幕上随处可见。

以下是一些截图：

普通网站

已变形的网站

这是代码。

    <html>
    <head>
    <title> Photoshop Uploader </title>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <style>
        body { background-color: #6F6F6F; margin: auto; }
        h1 { font-family: Verdana; }
        img.headerImg { position: relative; padding-top: 8px; padding-left: 8px; float: left; }
        #headerText { padding-top: 18px; padding-left: 15px; float: left; font-family: Verdana; color: #102261; font-weight: bold; }
        h2.socialText { font-style: italic; font-weight: bold; font-family: Verdana; float: left; padding-top: 25px; padding-left: 250px; }
        img.socialBar { position: fixed; }
        #social img { margin-top: 10px; margin-right: 40px; position: fixed; }
        #social img.facebook { float: right; padding-top: 23px; padding-right: 15px; position: relative; }
        #social img.instagram { float: right; padding-top: 23px; padding-right: 15px; position: relative; }
        #social img.youtube { float: right; padding-top: 20px; padding-right: 15px; position: relative; }
        #social img.twitter { float: right; padding-top: 25px; padding-right: 15px; position: relative; }
        #navBar ul { list-style-type: none; padding-top: 10px; padding-left: 10px; overflow: hidden; }
        #navBar a:link, a:visited { text-align: center; display: block; width: 120px; text-decoration: none; color: white; font-weight: bolder; background-color: #102261; padding: 4px; }
        #navBar a:hover, a:active { background-color: #0A153F; }
        #navBar li { float: left; border-right: 5px solid #6F6F6F; font-family: Arial; }
        h3.loginText { font-family: Verdana; font-weight: bold; float: right; padding-top: 35px; }
        p.login { padding-left: 100px; }
        p.usr_pass_text { color: #102261; font-weight: bold; font-family: Verdana; }
        #loginReg { padding-left: 900px; }
        a.clickReg { padding-left: 62px; color: #102261; text-decoration: none; }
    </style>
</head>
<body>
    <!-- Header image w/ text -->
    <img class="headerImg" src="images/photoshop_icon.jpg" width="100px" height="100px"/>
    <h1 id="headerText"> Photoshop Uploader </h1>
    <!-- Social Media -->
    <h2 class="socialText"> Follow Me On... </h2>
    <div id="social">
        <img src="images/social_bar.png" class="socialBar" width="400" height="100"/>
        <a href="https://www.facebook.com/hayes.derbyshire"><img class="facebook" src="images/facebook_logo.png" alt="Facebook" width="42" height="42"/></a>
        <a href="http://www.instagram.com/hayesderbs"><img class="instagram"  src="images/instagram_logo.png" alt="Instagram" width="42" height="42"/></a>
        <a href="http://www.youtube.com/user/hiii582"><img class="youtube" src="images/youtube_logo.png" alt="YouTube" width="48" height="48"/></a>
        <a href="https://twitter.com/Derby_Corn"><img class="twitter" src="images/twitter_logo.png" alt="Twitter" width="42" height="42"/></a>
    </div>
    <h3 class="loginText">Log In</h3>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- Navigation Bar -->
    <div id="navBar">
        <ul>
            <li><a href="index_photoshop.html">Home</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="registration.php">Registration</a></li>
        </ul>
    </div>
    <div id="loginReg">
    <form action="index_photoshop.html" method="post">
        <p class="usr_pass_text"> Username: <input type="username" name="user"/></p>
        <p class="usr_pass_text"> Password: <input type="password" name="pass"/></p>
        <a class="clickReg" href="registration.php"> Click Here to Register </a>
        <p class="login"><input type="submit" value="Login" name="login"/></p>
    </form>
    </div>
</body>
</html>

Answer 1

您尚未设置div#social的样式。给它一个足够大的固定宽度来包含社交媒体图像。

Answer 2

使用容器div包装您的所有内容：

<div class="container">the rest of your html</div>

然后给它一个宽度：

.container{
   width:1100px;
   margin: auto; // add this if you want to center your container
}

Answer 3

为什么不让您的网站响应？

这样做，将展示灵活的图像和良好的显示。

创建外部样式表
- 我告诉你，设计你的网站会容易得多。
使用responsive

media queries

调整窗口大小时，布局会变形

3 个答案: