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

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

不言original: 2018-08-09 17:38:101691parcourir

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

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>

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>

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

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!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment réaliser un centrage vertical et horizontal en CSS lorsque la taille de l'élément n'est pas connue (code)Article suivant：Comment réaliser un centrage vertical et horizontal en CSS lorsque la taille de l'élément n'est pas connue (code)

Articles Liés

Voir plus