CSS第8章レイアウトに精通

3109 ワード

すべてのcssレイアウト技術の根本は3つの基本概念である:位置決め、フローティング、および外距離操作.

8.1計画レイアウト
伸縮性があり、メンテナンスが容易なcssシステムを作成するには、まず設計を確認し、ページ構造のモードやサイト内の要素が繰り返される方法を含む繰り返しのモードを探す必要があります.

8.2基本構造の設定
margin:autoを使用してデザインを中央に配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
body {
            text-align: center;
}

        .wrapper {
            width: 920px;
margin: 0 auto;
text-align: left;
}

        .header {
            height: 300px;
background-color: green;
}

        .content {
            height: 800px;
background-color: gray;
}

        .footer {
            height: 300px;
background-color: #ff6600;
}

    </style>

</head>

<body>

<div class="wrapper">
    <div class="header">
<!--   -->
</div>

    <div class="content">

    </div>

    <div class="footer">
<!--   -->
</div>

</div>
</body>
</html>

 
    
   8.3        
          ，               ,            。
   
                    ，                   。
          ，                   。                   ，          ，            （    ）          。
   
   8.3.1       
   
   8.4     、       
  8.4.1     
  Liquid Fold http://liquidfold.net
   
    
                ：    、  、

ASP.Net Core

CSSでは画像の幅寸法を変更することもできます