个人中心
gpt4 book ai didi

html - 如何针对 Snap(Windows 中的多窗口模式)优化网站？

转载 作者：行者123 更新时间：2023-11-28 08:29:39 26 4
gpt4 key购买 nike

我只是想知道如何针对 Windows 中的 Snap 模式更好地优化我的网站(它只是一个元素，不是真实的)。每当我进入该模式时，它都会搞砸整个网页(见附图)。

谢谢雅各布

http://i.stack.imgur.com/V4yF2.jpg 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
         <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
         <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
        <meta charset="UTF-8">
        <title> JP's Webservices</title>
    </head>
    <body>
      <div id ="body">  
        <div class = "nav">
            <ul> 
                <li> 
                  <a href = "#"> About Me </a> 
                </li> 
                <li> 
                  <a href = "#"> Contact Me </a> 
                </li>
                <li> 
                  <a href = "#"> Pricing </a> 
                </li> 
            </ul>


        </div>

        <div class ="jumbotron">

           <div class ='container'>
              <div id ='h1'>
                  <h1> Need a website? </h1>
                  <p> Look no further </p> 
              </div>


           </div>
        </div> 
          <div id ="white"> 
          <h1> Qualities </h1>
          <h3> What makes me unique? </h3> 
          </div> 
        <div id ="gray"> 

        </div> 
        <div  class ="des" >
          <div class ="row"> 
            <div class= "col-md-4">  
             <h2> Knowledge. </h2> 
                 <p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p> 
             <hr> 
            </div> 
            <div class="col-md-4"> 
             <h2> Commitment. </h2>
                 <p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>  
             <hr> 
            </div> 
            <div class="col-md-4"> 
             <h2> Perspective. </h2> 
                 <p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p> 
             <br> 
            </div> 
           </div> 
         </div>



    </body> 




    <footer>
        <div id ='footer'>

        </div>
        <div id ='footer1'>
           <p> Copyright @2014-2015  Jacob Platin </p> 
            <div id ='foot1'>
                <a href="https://twitter.com/TheJakeoShark"  target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png"  width="72" height="46" border="0" /></a>
            </div>
            <div id ='facebook'>
                <a href ='https://facebook.com/jacob.platin'  target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a> 
            </div>
        </div> 

    </footer>
</html>

CSS

.des {
    position: absolute; 

    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);

    text-align: center; 


}

.nav li {

    list-style-type: none; 
    text-align: center; 
    float: left; 
    width: 33.3%; 
    position: relative;
    z-index: 10;
    color: black; 
    padding-top: 17px;
    font-weight: 700; 
    font-size: 18px; 


}
.nav {

    background-color: #660000; 
    height: 85px;
    z-index: 1;
    box-shadow: 1px 1px 5px black; 
}
.nav a {

    text-decoration: none;
    color: black; 
    font-weight: 700; 
    color: white;
}




.jumbotron  {


   position:relative;
   background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
   width: 100%;
   height: 530px;



}

#h1 > h1 {
    color:#660000;
    text-align:left ;
    padding-top: 34px;
    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px black;
}
#h1 > p {
    color:white;
    text-align:left ;
    padding-left: 5px;
    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px black;
    font-weight: 300;
}


#master_wrapper{overflow:hidden!important;}
#footer {

    width: 1902px;
    height: 170px; 
    background-color: black; 
    box-shadow: 1px 1px 12px 4px black;
    position: absolute;
    top: 1300px;

}

#footer1 {

    height: 85px;
    width: 1902px;
    background-color: #660000; 
    position: absolute;
    margin-top: 0px;
    box-shadow: -4px -2px 9px black;
    top: 1300px;
}

#footer1 > p {
    text-align: center; 
    font-family: 'Georgia', sans-serif;
    color: white;
    font-size: 18px; 
    padding-top: 24px; 

}

#foot1 {

    padding-top: 42px; 
    text-align: center;
    padding-left: 205px;


}

#facebook {
    margin-left: 820px;
    position: absolute;
    bottom: 3px;
    top: 95px;

}

.des > h2 {

    padding-top: 80px;
    color: #660000
}

#photo1 {

    background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
    width: 240px;
    height: 200px;
    position:relative;

}
.des > img {

    margin-top: 40px;
    box-shadow: 01px 01px 01px 5px black;
}

#h1 {

    box-shadow: -1px -1px -32px black; 
}

#gray {
    width: 100%;
    height: 300px;
    background-color: #f7f7f7;
    position: absolute;
    z-index: -11;
    margin-top: 0px;

}

#white > h1 {
    z-index: 1;
    padding-bottom: 100px;
    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
    color:#660000;  
    text-align: center;

}

#white > h3 {
    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
    color:#660000;
    position: absolute;
    bottom: 230px;
    text-align:center;
    z-index: 0;
    margin-left: 43.3%; 

}

.row {
    padding-left: 56px;
    z-index:-1;

}

最佳答案

您是指通过捕捉(占用 50%)屏幕宽度来调整网站大小吗？如果您希望您的网站在任何屏幕宽度下都能正常工作，您需要使用流体容器和媒体查询，它们构成了响应式网页设计的概念。

从外观上看，您的网站使用固定宽度，这限制了内容在您捕捉时随浏览器流畅调整大小的能力。

响应式网页设计需要从一开始就集成，更新现有网站可能很烦人(但仍有可能)。我建议您查看本教程/概述:http://www.w3schools.com/html/html_responsive.asp

简而言之，要修复您的网站，您需要摆脱以像素为单位设置的固定宽度，并使用百分比，因为它们会根据可用宽度进行调整。

关于html - 如何针对 Snap(Windows 中的多窗口模式)优化网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28335157/

26 4 0
文章推荐： html - 在 block 内合并 Div
文章推荐： javascript - 使 滚动到 Div
文章推荐： php - Chrome 上奇怪的 DIV 重新定义
文章推荐： javascript - MoveTargetOutOfBoundsException Selenium IE9/FireFox
行者123
个人简介

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

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