Mehrere Techniken, die bei der Implementierung von Layout mit CSS (Code) verwendet werden können-CSS-Tutorial-php.cn

Mehrere Techniken, die bei der Implementierung von Layout mit CSS (Code) verwendet werden können

不言

Freigeben： 2018-08-09 17:38:10

Original

1776 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit verschiedenen Techniken (Code), die bei der Implementierung von Layouts mit CSS verwendet werden können. Ich hoffe, dass er für Freunde hilfreich ist.

Mit einem vertrauten Layout konfrontiert

Die Seiten sind fest und die Mitte ist adaptiv, der Kopf ist fixiert und die Mitte ist adaptiv, Panel-Komponenten und Modellkomponenten sind nahezu gleich groß

Wir haben ein Front-End-Framework. Sowohl Bootstrap als auch EasyUI stellen diese Komponenten-Plug-Ins bereit. Während des Nutzungsprozesses gibt es immer einige geringfügige Unterschiede bei der von der Benutzeroberfläche gezeichneten Seite, wie zum Beispiel: Schriftart, Höhe, Hintergrundfarbe

Heute fasse ich zusammen, wie Sie das Layout schnell anpassen und die Entwicklungseffizienz verbessern können

Option 1: Verwenden Sie die Positionierung, um das oben genannte feste mittlere adaptive Layout zu implementieren

#section{
 position: fixed;
 top:0;
 left: 0;
 bottom: 0;
 right: 0;
 .top{
   position: fixed;
   top:0;
   left: 0;
   height: @header_height;
   width: 100%;
 }
 .main{
    position:relative;
    top:-@header_height;
    left:0;
    height:100%;
    border-top:@header_height solid transparent;
 }
}

Nach dem Login kopieren

Prinzip: Verwenden Sie Rahmen- top, um die obere Höhe einzunehmen, und verwenden Sie die obere Einstellung von position-@header_height, um die Position zu übersteigen. Gehen Sie zurück

Option 2: Verwenden Sie Float, Padding und Margin, um ein seitenfixiertes mittleres adaptives Layout zu erreichen

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>padding layout demo</title>
    <style type="text/css">
      * html #container{
       height:1%; /* So IE plays nice */
      }
      html{
       height: 100%;
      }
      body{
       height: 100%;
       margin:0;
      }
      #container{
       background-color:#0ff;
       overflow:hidden;
       height: 100%;
       padding-right:220px; /* 宽度大小等与边栏宽度大小*/
      }
      #content{
       background-color:yellow;
       width:100%;
       float:left;
       height: 100%;
      }
      #sidebar{
       background-color:#f00;
       width:220px;
       float:left;
       height: 100%;
       margin-right:-220px;
      }
    </style>
</head>
<body>
    <p id="container">
        <p id="content">Main content section
        </p>
        <p id="sidebar">Right Sidebar </p>
    </p>
</body>
</html>

Nach dem Login kopieren

Prinzip: Verwenden Sie Polsterung, um die Seitenbreite zu belegen, und verwenden Sie die Einstellung für den Seitenrand-@side_width return. Gehen Sie zur Seitenposition

Panel-Layout: Das Prinzip ähnelt Option 1. Darüber hinaus ist es modal kann sich auch auf diese Layoutmethode beziehen

HTML-Struktur

<p class="panel">
    <p class="panel-header">
      <span class="panel-title-self">今日庭审</span>
    </p>
    <p class="panel-body">
      <p class="trial">
      </p>
    </p>
</p>

Nach dem Login kopieren

CSS-Einstellungen

@panel-title-font-size:1rem;
@panel-title-color:#fff;
@panel-title-bg:#30A7FF;
@panel-title-height:2.7rem;
.panel-title-self{
  color: @panel-title-color;
  font-size: @panel-title-font-size;
  background-color: @panel-title-bg;
  height: @panel-title-height;
}

.panel{
 height: 100%;
 border: 1px solid #ddd;
 margin: 0;
 position: relative;
 box-shadow: 3px 3px 3px 3px #ddd;
 .panel-header{
  background:@panel-title-bg;
  padding-left: 10px;
  height: @panel-title-height;
  line-height: @panel-title-height;
  display: flex;
  align-items: center;
  img{
   margin: 0 5px;
  }
 }
 .panel-body{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-top:@panel-title-height solid transparent;
  padding: 0;
  position: relative;
  top:-@panel-title-height;
 }
}

Nach dem Login kopieren

Verwandte Empfehlungen:

So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements unbekannt ist (Code)

Wie implementiert man einen benutzerdefinierten Bildlaufleistenstil in CSS3? (Code)

Das obige ist der detaillierte Inhalt vonMehrere Techniken, die bei der Implementierung von Layout mit CSS (Code) verwendet werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!