个人中心
gpt4 book ai didi

css - Safari 的屏幕尺寸优化

转载 作者：太空宇宙 更新时间：2023-11-03 18:43:44 25 4
gpt4 key购买 nike

我的网站优化有问题。在我的笔记本电脑上，所有东西似乎都可以很好地处理宽度、高度、边距等。但是当我使用 Imac 或另一台屏幕尺寸较大的计算机时，内容会偏移到笔记本电脑屏幕尺寸而不是全屏。

这是我的 CSS:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote 
{
    margin: 0; padding: 0; border: 0;
}

body
{
    width:960px;
    height:2587;
    padding-left:30px;
    background-color:white;
}

.headertwitter
{
    margin-left:40px;
    margin-top:-58px;
}

.headervimeo
{
    margin-left:80px;
    margin-top:-59px;
}

.headertypecontact
{
    margin-top:-16px;
    margin-left:290px;
}

#header
{
}

.headerwork
{
    margin-left:147px;
    margin-top:-51px;
}

.headercontact
{
    margin-left:302px;
    margin-top:-51px;
}

.logo
{
    position:fixed;
    z-index:20;
    margin-top:30px;
}

.floater
{
    position:fixed;
    z-index:10;
    color:#ffffff;
    background-color:;
    width:3000px;
    height:270px;
    margin-left:-100px;
}

#quote
{
    text-align:center;
    background-color:;
    margin-right:-5px;
    margin-top:-400px;
    color:#ffffff;
    font-family:Heiti TC;
    font-size:20px;
}

#banner
{
    position:fixed;
    background-color:white;
}

.companyimage
{
    margin-left:-80px;
}



#headericons
{
    background-color:;
    padding-left:430px;
    margin-top:80px;
    position:fixed;
    z-index:10;
    letter-spacing:100px;
}

#headertext
{
    background-color:;
    padding-left:430px;
    position:fixed;
    z-index:10;
    word-spacing:93px;
    margin-top:130px;
    font-family:Heiti TC;
}

#banners
{
    background-color:;
    padding-left:1000px;
    margin-top:161px;
    position:fixed;
    z-index:10;
}

#middleicons
{
    padding-left:450px;
    margin-right:-200px;
}

#portfolio
{
    padding-left:175px;
    margin-right:-200px;
}

ul
{
    list-style:none;
}

.center
{
    margin-right:-200px;
    font-family:Heiti TC;
    padding-right:210px;
    text-align:center;
    color:<--#ffffff-->;
    padding-top:20px;
}

.contacttext
{
    margin-right:-155px;
    font-family:Heiti TC;
    padding-right:210px;
    text-align:center;
    color:#ffffff;
    font-size:15px;
    line-height:22px;
}

h3.center
{
    font-size:20px;
    letter-spacing:1px;
    line-height:30px;
}

#middledown
{
    margin-top:550px;
    position:relative;
    background-color:white;
    width:1235px;
    margin-left:-80px;
    padding-left:80px;
    overflow:hidden;

}

#form
{
    background-color:;
    margin-right:185px;
    padding-left:210px;
    z-index:10;
}

#footericons
{
    background-color:;
    margin-right:-200px;
    padding-left:495px;
    letter-spacing:30px;
    z-index:10;
}

#contactinfo
{
    background-color:;
    margin-top:-450px;
    z-index:10;
}

#contactwhite
{
    background-color:white;
    padding-left:546px;
    z-index:10;
}


#footer
{
    margin-top:-40px;
    background-color:black;
    width:px;
    margin-left:-40px;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

a:link {color:#000000;}     
a:visited {color:#000000;} 
a:hover {color:#000000;}  
a:active {color:#000000;}  

label {
    font-color:white;
    color:white;
    font-family: Heiti TC;
}


input {
    width: 120px; height: 30px; padding: 3px 15px 0 10px;
    float:;
    background: #f9f9f9; border: 1px solid #dedede;
    box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    font: 20px Heiti TC; color: #7d7d7d;
    z-index:10;
}


input#submit:link {color:#ffffff;}     
input#submit:visited {color:#ffffff;} 
input#submit:hover {color:#ffffff;}  
input#submit:active {color:#ffffff;} 

input#submit {
    width: 150px; height: 35px; float:; clear:; cursor: pointer;
    background: #585858 url(images/btn-bg.png); border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    font-size: 20px; color: #f9f9f9; 
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    margin-top:-45px;
}

#entirefooter
{
    margin-top:50px;
}

    iframe
    {
        background-color:;
        padding-left:345px;
    }

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Phantom Productions</title>
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</script>
</head>
<body>

<div id="header">
    <img class="floater" src="header.png" alt="header"/>
</div>

<a href="#header" class="scroll"/>
        <img class="logo" src="logo.jpg" alt="logo"/>
</a>

<div id="headericons">
    <ul>
        <li>    
            <a href="#bug" class="scroll"/>
                <img src="about_header.jpg" alt="about"/>
            </a>
        </li>
        <li class="headerwork"> 
            <a href="#workstophere" class="scroll"/>    
                <img src="work_header.jpg" alt="work"/>
            </a>
        </li>
        <li class="headercontact">
            <a href="#footer" class="scroll"/>
                <img src="contact_header.jpg" alt="contact"/>
            </a>
        </li>
    </ul>
</div>

<div id="headertext">
    <ul>
        <li>
            <a href="#bug" class="scroll"/>
                ABOUT
            </a>
            <a href="#workstophere" class="scroll"/>
                WORK
            </a>
        </li>
        <li class="headertypecontact">  
            <a href="#footer" class="scroll"/>
                CONTACT
            </a>
        </li>
    </ul>
</div>

<div id="banners">
    <ul>
        <li>    
            <a href="http://facebook.com/"/>    
                <img src="headericons_03.png" alt="logo"/>
            </a>
        </li>
        <li class="headertwitter">  
            <a href="http://twitter.com/"/>
                <img src="headericons_05.png" alt="logo"/>
            </a>
        </li>
        <li class="headervimeo">
            <a href="http://vimeo.com/"/>
                <img src="headericons_07.png" alt="logo"/>
            </a>
        </li>
    </ul>
</div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>


<div id="banner">
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/>

    <div id="quote">
        <h1>
                PHANTOM PRODUCTIONS
        </h1>
<br></br>

        <p id="abouticon">
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,       
            sed do eiusmod tempor incididunt ut labore.
        </p>
    </div>
</div>

<br></br>
<br></br>
<br></br>
<div id="bug">
<br></br>
<br></br>



<div id="middledown">

    <h1 class="center">
        WITH OUR FILM MENTALITY, WE
    </h1>

<br></br>

    <p class="center">  
        EMBRACE THE IMPOSSIBLE
    </p>

<br></br>
<br></br>
<br></br>

    <ul id="middleicons">
        <li>
            <img src="about_middle.jpg" alt=""/>
        </li>
    </ul>


<br></br>


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe> 

<div id="workstophere">
    <h3 class="center">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse  <br></br> cillum dolore eu fugiat nulla   pariatur."
    </h3>
</div>

<br></br>
<br></br>
<br></br>
<br></br>


    <ul id="middleicons">
        <li>
            <img src="work_middle.jpg" alt=""/>
        </li>
    </ul>



    <div id="portfolio">

        <ul>
            <li>
                <a href="only.png"  rel="lightbox[movies]" title="Only God Forgives"/>
                    <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'">
                </a>

                <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/>
                    <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'">
                </a>
                <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/>
                    <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'">
                </a>
            </li>
            <li>
                <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/>
                    <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'">
                </a>
                <a href="2013-02-04 00.03.56.jpg"  rel="lightbox[movies]" title="Django Unchained"/>
                    <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'">
                </a>
                <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/>
                    <img class="view view-first"  img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'">
                </a>
            </li>
        </ul>
    </div>

<br></br>
<br></br>


    <div id="entirefooter">

        <div id="contactwhite">
            <img src="footercontactcut_03.png" alt="footercontact"/>
        </div>

        <div id="footer">   
            <img src="footerworks_02.png" alt="footer"/>
        </div>

        <div id="contactinfo">

            <p class="contacttext">
                Tel:2398 9850<br></br>
                Fax:1960 3410<br></br>
                e-mail: phantom@hotmail.com<br></br>
                135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
            </p>

<br></br>

            <p class="contacttext">
                SUBSCRIBE TO OUR NEWSLETTER!
            </p>
<br></br>
<br></br>
<br></br>
<br></br>

        <div id="form">
            <form action="#" method="post">
                <fieldset>
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" />

                    <label for="email">Last Name:</label>
                    <input type="text" name="name" id="lastname" />

                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" />

                    <input type="submit" value="Submit" id="submit" />
                    </fieldset>
            </form>
        </div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
        <div id="footericons">
            <ul>
                <li>
                    <a href="http://facebook.com/"/>
                        <img src="footerIconswshadow1.png" alt="facebook"/>
                    </a>
                    <a href="http://twitter.com/"/>
                        <img src="footerIconswshadow3.png" alt="twitter"/>
                    </a>
                    <a href="http://vimeo.com/"/>
                        <img src="footerIconswshadow2.png" alt="vimeo"/>
                    </a>
                </li>
            </ul>
        </div>
<br></br>

        <p class="contacttext"> 
            Copyright © PHANTOM PRODUCTIONS - 2013
        </p>
    </div>
    </div>


</div>
</div>

</body>
</html>

更新 HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Phantom Productions</title>
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</script>
</head>
<body>

<div id="connectedbody">

<div id="header">
    <img class="floater" src="header.png" alt="header"/>
</div>

<a href="#header" class="scroll"/>
        <img class="logo" src="logo.jpg" alt="logo"/>
</a>

<div id="headericons">
    <ul>
        <li>    
            <a href="#bug" class="scroll"/>
                <img src="about_header.jpg" alt="about"/>
            </a>
        </li>
        <li class="headerwork"> 
            <a href="#workstophere" class="scroll"/>    
                <img src="work_header.jpg" alt="work"/>
            </a>
        </li>
        <li class="headercontact">
            <a href="#footer" class="scroll"/>
                <img src="contact_header.jpg" alt="contact"/>
            </a>
        </li>
    </ul>
</div>

<div id="headertext">
    <ul>
        <li>
            <a href="#bug" class="scroll"/>
                ABOUT
            </a>
            <a href="#workstophere" class="scroll"/>
                WORK
            </a>
        </li>
        <li class="headertypecontact">  
            <a href="#footer" class="scroll"/>
                CONTACT
            </a>
        </li>
    </ul>
</div>

<div id="banners">
    <ul>
        <li>    
            <a href="http://facebook.com/"/>    
                <img src="headericons_03.png" alt="logo"/>
            </a>
        </li>
        <li class="headertwitter">  
            <a href="http://twitter.com/"/>
                <img src="headericons_05.png" alt="logo"/>
            </a>
        </li>
        <li class="headervimeo">
            <a href="http://vimeo.com/"/>
                <img src="headericons_07.png" alt="logo"/>
            </a>
        </li>
    </ul>
</div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>


<div id="banner">
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/>

    <div id="quote">
        <h1>
                PHANTOM PRODUCTIONS
        </h1>
<br></br>

        <p id="abouticon">
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,       
            sed do eiusmod tempor incididunt ut labore.
        </p>
    </div>
</div>

<br></br>
<br></br>
<br></br>
<div id="bug">
<br></br>
<br></br>



<div id="middledown">

    <h1 class="center">
        WITH OUR FILM MENTALITY, WE
    </h1>

<br></br>

    <p class="center">  
        EMBRACE THE IMPOSSIBLE
    </p>

<br></br>
<br></br>
<br></br>

    <ul id="middleicons">
        <li>
            <img src="about_middle.jpg" alt=""/>
        </li>
    </ul>


<br></br>


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe> 

<div id="workstophere">
    <h3 class="center">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse  <br></br> cillum dolore eu fugiat nulla   pariatur."
    </h3>
</div>

<br></br>
<br></br>
<br></br>
<br></br>


    <ul id="middleicons">
        <li>
            <img src="work_middle.jpg" alt=""/>
        </li>
    </ul>



    <div id="portfolio">

        <ul>
            <li>
                <a href="only.png"  rel="lightbox[movies]" title="Only God Forgives"/>
                    <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'">
                </a>

                <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/>
                    <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'">
                </a>
                <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/>
                    <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'">
                </a>
            </li>
            <li>
                <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/>
                    <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'">
                </a>
                <a href="2013-02-04 00.03.56.jpg"  rel="lightbox[movies]" title="Django Unchained"/>
                    <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'">
                </a>
                <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/>
                    <img class="view view-first"  img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'">
                </a>
            </li>
        </ul>
    </div>

<br></br>
<br></br>


    <div id="entirefooter">

        <div id="contactwhite">
            <img src="footercontactcut_03.png" alt="footercontact"/>
        </div>

        <div id="footer">   
            <img src="footerworks_02.png" alt="footer"/>
        </div>

        <div id="contactinfo">

            <p class="contacttext">
                Tel:2398 9850<br></br>
                Fax:1960 3410<br></br>
                e-mail: phantom@hotmail.com<br></br>
                135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
            </p>

<br></br>

            <p class="contacttext">
                SUBSCRIBE TO OUR NEWSLETTER!
            </p>
<br></br>
<br></br>
<br></br>
<br></br>

        <div id="form">
            <form action="#" method="post">
                <fieldset>
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" />

                    <label for="email">Last Name:</label>
                    <input type="text" name="name" id="lastname" />

                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" />

                    <input type="submit" value="Submit" id="submit" />
                    </fieldset>
            </form>
        </div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
        <div id="footericons">
            <ul>
                <li>
                    <a href="http://facebook.com/"/>
                        <img src="footerIconswshadow1.png" alt="facebook"/>
                    </a>
                    <a href="http://twitter.com/"/>
                        <img src="footerIconswshadow3.png" alt="twitter"/>
                    </a>
                    <a href="http://vimeo.com/"/>
                        <img src="footerIconswshadow2.png" alt="vimeo"/>
                    </a>
                </li>
            </ul>
        </div>
<br></br>

        <p class="contacttext"> 
            Copyright © PHANTOM PRODUCTIONS - 2013
        </p>
    </div>
    </div>


</div>
</div>


</div>

</body>
</html>

更新 CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote 
{
    margin: 0; padding: 0; border: 0;
}

body
{
    width:100%;
    height:100%;
    padding-left:30px;
    background-color:white;
}

#connectedbody
{
    width:900px;
}

.headertwitter
{
    margin-left:40px;
    margin-top:-58px;
}

.headervimeo
{
    margin-left:80px;
    margin-top:-59px;
}

.headertypecontact
{
    margin-top:-16px;
    margin-left:290px;
}

#header
{
}

.headerwork
{
    margin-left:147px;
    margin-top:-51px;
}

.headercontact
{
    margin-left:302px;
    margin-top:-51px;
}

.logo
{
    position:fixed;
    z-index:20;
    margin-top:30px;
}

.floater
{
    position:fixed;
    z-index:10;
    color:#ffffff;
    background-color:;
    width:3000px;
    height:270px;
    margin-left:-100px;
}

#quote
{
    text-align:center;
    background-color:;
    margin-right:-5px;
    margin-top:-400px;
    color:#ffffff;
    font-family:Heiti TC;
    font-size:20px;
}

#banner
{
    position:fixed;
    background-color:white;
}

.companyimage
{
    margin-left:-80px;
}



#headericons
{
    background-color:;
    padding-left:430px;
    margin-top:80px;
    position:fixed;
    z-index:10;
    letter-spacing:100px;
}

#headertext
{
    background-color:;
    padding-left:430px;
    position:fixed;
    z-index:10;
    word-spacing:93px;
    margin-top:130px;
    font-family:Heiti TC;
}

#banners
{
    background-color:;
    padding-left:1000px;
    margin-top:161px;
    position:fixed;
    z-index:10;
}

#middleicons
{
    padding-left:450px;
    margin-right:-200px;
}

#portfolio
{
    padding-left:175px;
    margin-right:-200px;
}

ul
{
    list-style:none;
}

.center
{
    margin-right:-200px;
    font-family:Heiti TC;
    padding-right:210px;
    text-align:center;
    color:<--#ffffff-->;
    padding-top:20px;
}

.contacttext
{
    margin-right:-155px;
    font-family:Heiti TC;
    padding-right:210px;
    text-align:center;
    color:#ffffff;
    font-size:15px;
    line-height:22px;
}

h3.center
{
    font-size:20px;
    letter-spacing:1px;
    line-height:30px;
}

#middledown
{
    margin-top:550px;
    position:relative;
    background-color:white;
    width:1235px;
    margin-left:-80px;
    padding-left:80px;
    overflow:hidden;

}

#form
{
    background-color:;
    margin-right:185px;
    padding-left:210px;
    z-index:10;
}

#footericons
{
    background-color:;
    margin-right:-200px;
    padding-left:495px;
    letter-spacing:30px;
    z-index:10;
}

#contactinfo
{
    background-color:;
    margin-top:-450px;
    z-index:10;
}

#contactwhite
{
    background-color:white;
    padding-left:546px;
    z-index:10;
}


#footer
{
    margin-top:-40px;
    background-color:black;
    width:px;
    margin-left:-40px;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

a:link {color:#000000;}     
a:visited {color:#000000;} 
a:hover {color:#000000;}  
a:active {color:#000000;}  

label {
    font-color:white;
    color:white;
    font-family: Heiti TC;
}


input {
    width: 120px; height: 30px; padding: 3px 15px 0 10px;
    float:;
    background: #f9f9f9; border: 1px solid #dedede;
    box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    font: 20px Heiti TC; color: #7d7d7d;
    z-index:10;
}


input#submit:link {color:#ffffff;}     
input#submit:visited {color:#ffffff;} 
input#submit:hover {color:#ffffff;}  
input#submit:active {color:#ffffff;} 

input#submit {
    width: 150px; height: 35px; float:; clear:; cursor: pointer;
    background: #585858 url(images/btn-bg.png); border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    font-size: 20px; color: #f9f9f9; 
    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
    margin-top:-45px;
}

#entirefooter
{
    margin-top:50px;
}

iframe
{
    background-color:;
    padding-left:345px;
}

下面是我在imac上打开出现的问题:

Imac

这是它在我的笔记本电脑上的样子: macbook

这个内容在一个 div 中，但是当我为 div 设置背景颜色并命令它覆盖屏幕时它没有，how to i make it fit the full screen?

最佳答案

像这样:

body
{
    width:100%;
    height:100%;
    padding-left:30px;
    background-color:white;
}

无论如何，这将始终使它成为 100%。

正如我所见，您体内的高度尺寸后没有“px”。永远不要忘记把它放在这之后。

更新

正如我所见，您已在此处更新了 HTML，并且我可以看到所有内容都彼此松散。在你的 <body> 下创建一个 div在你的 </body> 上加上标签标签。以 900px 之类的最大宽度居中。由于 body 宽度为 100%，所有内容都将进入 900px 范围内，并且始终位于屏幕中央。

希望这有用吗？

更新 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Phantom Productions</title>
<link rel="stylesheet" type="text/css" href="phantomproductions.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

</script>
</head>
<body>

**PUT BEGIN DIV HERE**

<div id="header">
    <img class="floater" src="header.png" alt="header"/>
</div>

<a href="#header" class="scroll"/>
        <img class="logo" src="logo.jpg" alt="logo"/>
</a>

<div id="headericons">
    <ul>
        <li>    
            <a href="#bug" class="scroll"/>
                <img src="about_header.jpg" alt="about"/>
            </a>
        </li>
        <li class="headerwork"> 
            <a href="#workstophere" class="scroll"/>    
                <img src="work_header.jpg" alt="work"/>
            </a>
        </li>
        <li class="headercontact">
            <a href="#footer" class="scroll"/>
                <img src="contact_header.jpg" alt="contact"/>
            </a>
        </li>
    </ul>
</div>

<div id="headertext">
    <ul>
        <li>
            <a href="#bug" class="scroll"/>
                ABOUT
            </a>
            <a href="#workstophere" class="scroll"/>
                WORK
            </a>
        </li>
        <li class="headertypecontact">  
            <a href="#footer" class="scroll"/>
                CONTACT
            </a>
        </li>
    </ul>
</div>

<div id="banners">
    <ul>
        <li>    
            <a href="http://facebook.com/"/>    
                <img src="headericons_03.png" alt="logo"/>
            </a>
        </li>
        <li class="headertwitter">  
            <a href="http://twitter.com/"/>
                <img src="headericons_05.png" alt="logo"/>
            </a>
        </li>
        <li class="headervimeo">
            <a href="http://vimeo.com/"/>
                <img src="headericons_07.png" alt="logo"/>
            </a>
        </li>
    </ul>
</div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>


<div id="banner">
<img class="companyimage" src="imagewshadow_06.png" alt="company_image"/>

    <div id="quote">
        <h1>
                PHANTOM PRODUCTIONS
        </h1>
<br></br>

        <p id="abouticon">
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,       
            sed do eiusmod tempor incididunt ut labore.
        </p>
    </div>
</div>

<br></br>
<br></br>
<br></br>
<div id="bug">
<br></br>
<br></br>



<div id="middledown">

    <h1 class="center">
        WITH OUR FILM MENTALITY, WE
    </h1>

<br></br>

    <p class="center">  
        EMBRACE THE IMPOSSIBLE
    </p>

<br></br>
<br></br>
<br></br>

    <ul id="middleicons">
        <li>
            <img src="about_middle.jpg" alt=""/>
        </li>
    </ul>


<br></br>


<iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe> 

<div id="workstophere">
    <h3 class="center">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt <br></br> ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  <br></br> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <br></br> irure dolor in reprehenderit in voluptate velit esse  <br></br> cillum dolore eu fugiat nulla   pariatur."
    </h3>
</div>

<br></br>
<br></br>
<br></br>
<br></br>


    <ul id="middleicons">
        <li>
            <img src="work_middle.jpg" alt=""/>
        </li>
    </ul>



    <div id="portfolio">

        <ul>
            <li>
                <a href="only.png"  rel="lightbox[movies]" title="Only God Forgives"/>
                    <img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'">
                </a>

                <a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/>
                    <img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'">
                </a>
                <a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/>
                    <img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'">
                </a>
            </li>
            <li>
                <a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/>
                    <img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'">
                </a>
                <a href="2013-02-04 00.03.56.jpg"  rel="lightbox[movies]" title="Django Unchained"/>
                    <img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'">
                </a>
                <a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/>
                    <img class="view view-first"  img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'">
                </a>
            </li>
        </ul>
    </div>

<br></br>
<br></br>


    <div id="entirefooter">

        <div id="contactwhite">
            <img src="footercontactcut_03.png" alt="footercontact"/>
        </div>

        <div id="footer">   
            <img src="footerworks_02.png" alt="footer"/>
        </div>

        <div id="contactinfo">

            <p class="contacttext">
                Tel:2398 9850<br></br>
                Fax:1960 3410<br></br>
                e-mail: phantom@hotmail.com<br></br>
                135-235 1/F, Gloucester Road Wan Chai, Hong Kong 
            </p>

<br></br>

            <p class="contacttext">
                SUBSCRIBE TO OUR NEWSLETTER!
            </p>
<br></br>
<br></br>
<br></br>
<br></br>

        <div id="form">
            <form action="#" method="post">
                <fieldset>
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" />

                    <label for="email">Last Name:</label>
                    <input type="text" name="name" id="lastname" />

                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" />

                    <input type="submit" value="Submit" id="submit" />
                    </fieldset>
            </form>
        </div>

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
        <div id="footericons">
            <ul>
                <li>
                    <a href="http://facebook.com/"/>
                        <img src="footerIconswshadow1.png" alt="facebook"/>
                    </a>
                    <a href="http://twitter.com/"/>
                        <img src="footerIconswshadow3.png" alt="twitter"/>
                    </a>
                    <a href="http://vimeo.com/"/>
                        <img src="footerIconswshadow2.png" alt="vimeo"/>
                    </a>
                </li>
            </ul>
        </div>
<br></br>

        <p class="contacttext"> 
            Copyright © PHANTOM PRODUCTIONS - 2013
        </p>
    </div>
    </div>


</div>
</div>

**END DIV HERE**

</body>
</html>

关于css - Safari 的屏幕尺寸优化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16933591/

25 4 0
文章推荐： lisp - Common Lisp - 打印在一行/返回/单行计数器/格式化
文章推荐： c# - 从列表框中删除所有项目
文章推荐： lisp - CLISP Lambda 微积分 Div 实现
文章推荐： c# - 业务类无法引用 HTTPContext
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com