Question

我必须使用灵活或居中的页面设计，即使用户的屏幕分辨率为800 * 600也能正常工作。当我将页面缩小时，元素会移动并改变它们的位置。柔性或居中页面是否正常？如果不是应该如何？

页面的CSS代码;

body {
             margin-left: auto;
             margin-right: auto;
             text-align:center;}

 div.header {
     padding-top: 1pc;
     text-align:center;
     width:100%;
     color: #000000;}

 div.header h1 {
color: #493831;
padding-bottom: 30px;
margin: 0;}

 div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;
    background:#FBB117;} 
 div.menu ul{ 
    font-size:14px;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100px 
    padding:0;
    display:inline-block;} 
 div.menu li{ 
    display:inline; } 
 div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;}  
 div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


 div.sidebar {
     padding-top: 2pc;
     margin-right: 15%;
     margin-left: 15px;
     text-align:center;
     float: right;
     width: 200px;
     color: #000000;
     list-style:none; }
 div.sidebar ul{
     font-size:14px;
     margin-left: auto;
     margin-right: auto; 
     margin-top: 3px;
     margin-bottom: 3px;
     padding:0;
     list-style: none;
     display:inline-block;  }
 div.sidebar li{
     display:inline; }
 div.sidebar li a{ 
    text-decoration:none; 
    padding:10px 0; 
    width:100%; 
    background:#FBB117; 
    color:#4C4646; 
    float:right; 
    text-align:center; 
    border-bottom:1px solid #fff;}  
 div.sidebar li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

 div.content {
     width:80%;
     padding-top: 2pc;
     text-align:left;
     margin-left: 15%;
     margin-right: 300px;
     color: #000000 }
 div.content p {
font-weight: lighter;
color: #493831;
padding-bottom: 30px;
margin: 0;}


 div img.bw {
     float:left;
     margin-right:15px;
     width:200px;
     height:200px; }

 div img.map {
     float:right;
     margin-right:15px;
     width:300px;
     height:100px; }

 div.footer {
     padding: 100px;
     text-align:center;
     height: 100px;
     color: #000000 }

Answer 1

在尝试限制大小限制时控制页面正在发生的事情的最佳方法是分配不同的样式表以更改站点的分辨率。这些将适用于使用不同分辨率访问您网站的用户。

http://css-tricks.com/resolution-specific-stylesheets/：提供的链接

这个问题很长一段时间困扰了许多设计师，早在90年代流体布局风靡一时，这个问题必须克服。

请注意，随着移动设备的开发和不断增长的使用，以查看网页，制作您网站的移动版本，这也是一种方法。

在执行此操作时，您将应用全新的网页布局，以充分利用可用空间。此外，如果用户浏览器不支持此声明，那么他们仍然可以查看您的网站....每个人都是赢家。

灵活或集中的页面HTML CSS

1 个答案: