-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 年代には、この問題を克服する必要がありました。

ウェブページを表示するためのモバイルデバイスの開発と使用の増加に伴い、サイトのモバイルバージョンを作成することも、これが取るべき方法であることを心に留めておいてください.

これを行うことで、利用可能なスペースを最大限に活用するために、Web ページのまったく新しいレイアウトを適用することになります。また、ユーザーのブラウザーがこの宣言をサポートしていない場合でも、ユーザーはサイトを表示できます.... 誰もが勝者です。

于 2012-04-18T08:21:40.813 に答える