Heim > Artikel > Web-Frontend > Mehrere Techniken, die bei der Implementierung von Layout mit CSS (Code) verwendet werden können

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

不言Original: 2018-08-09 17:38:101739Durchsuche

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;
 }
}

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>

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>

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;
 }
}

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!

css easyui bootstrap css3 html 前端框架 Float position margin padding border ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code)Nächster Artikel：So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code)

In Verbindung stehende Artikel

Mehr sehen