-1

我必须使用灵活或居中的页面设计，即使用户屏幕分辨率为 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 }
4

1 回答 1

0

当试图限制大小限制时，控制页面发生的最佳方法是分配不同的样式表来更改站点以进行解析。这些将适用于使用不同分辨率访问您的站点的用户。

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

这个问题长期以来一直困扰着许多设计师，早在 90 年代流体布局风靡一时，这个问题就必须解决。

请记住，随着移动设备查看网页的发展和日益增长的使用，制作您网站的移动版本，那么这也是采用的方法。

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

于 2012-04-18T08:21:40.813 回答