Plusieurs techniques pouvant être utilisées lors de l'implémentation de la mise en page avec CSS (code)-tutoriel CSS-php.cn

Plusieurs techniques pouvant être utilisées lors de l'implémentation de la mise en page avec CSS (code)

不言

Libérer： 2018-08-09 17:38:10

original

1783 Les gens l'ont consulté

Le contenu de cet article concerne plusieurs techniques (code) qui peuvent être utilisées lors de l'implémentation de la mise en page avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Face à une disposition familière

Les côtés sont fixes et le milieu est adaptatif, la tête est fixe et le milieu est adaptatif, les composants du panneau et les composants du modèle sont presque de la même taille

Nous avons un framework front-end. Bootstrap et easyui fournissent ces plug-ins de composants. Pendant le processus d'utilisation, il y a toujours de légères différences avec la page dessinée par l'interface utilisateur, telles que : la police, la hauteur, la couleur d'arrière-plan <.>

Aujourd'hui, je vais résumer comment personnaliser rapidement la mise en page et améliorer l'efficacité du développement

Option 1 : utiliser le positionnement pour implémenter la mise en page adaptative intermédiaire fixe ci-dessus

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

Copier après la connexion

Principe : utiliser border-top pour occuper la hauteur supérieure et utiliser le paramètre supérieur de position-@header_height pour repousser la position

Option 2 : utiliser float, padding et margin pour obtenir une disposition adaptative centrale fixe sur le côté

<!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>

Copier après la connexion

Principe : utilisez le remplissage pour occuper la largeur du côté et utilisez les paramètres de marge latérale -@side_width revient à la position latérale

Disposition du panneau : le principe est similaire à l'option 1. De plus , modal peut également faire référence à cette méthode de mise en page

Structure HTML

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

Copier après la connexion

Paramètres CSS

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

Copier après la connexion

Recommandations associées :

Comment pour réaliser un centrage vertical et horizontal en css quand on ne connaît pas la taille de l'élément (code)

Comment réaliser un auto-centrage en css3 Définir le style de la barre de défilement ? (Code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!