Maison> interface Web> tutoriel CSS> le corps du texte

CSS中3种常见页面布局:双飞翼布局、粘连布局、左右两列布局

青灯夜游
Libérer: 2020-12-14 18:06:38
avant
2970 Les gens l'ont consulté

本文就来为大家介绍3种常见的CSS页面布局:双飞翼布局、粘连布局、左右两列布局,希望对大家有一定的帮助。

CSS中3种常见页面布局:双飞翼布局、粘连布局、左右两列布局

(推荐教程:CSS视频教程

一、左右两列布局

1、代码如下

    两列布局   
  
left
lzprightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
Copier après la connexion

效果如下:

1.png

2、必要说明

外层容器con如果为固定宽度,right元素的overflow: hidden;是必须的,否则会出现rig中的字体不在rig里面。

外层容器con宽度如果是100%,或者默认,此时right元素的overflow: hidden;可有可无,页面不会因此受到影响。

二、粘连布局

1、代码如下:

     粘连布局   
  
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
mlzpain
Copier après la connexion

2.png

三、双飞翼布局

    双飞翼三列布局  
  

middle

middle

middle

left
right
Copier après la connexion

效果如下:

3.png

更多编程相关知识,请访问:编程教学!!

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!