La mise en page d'une page Web a un impact significatif sur l'expérience utilisateur et le classement Baidu. Quelle que soit la qualité du contenu de votre site Web, il est inutile tant que la mise en page est médiocre, donc lorsque nous l'obtenons à partir de la conception. Vous ne pouvez pas simplement ajouter des images à votre page Web avec désinvolture. Ce n'est qu'après avoir analysé les images que vous pourrez créer une bonne mise en page CSS.
La mise en page représente une grande partie de l'analyse. Lorsque nous analysons les images artistiques d'une page Web, nous n'analysons pas si les images sont belles, mais analysons les images artistiques de la page Web en fonction de la mise en page CSS. L'analyse de la mise en page CSS affecte directement la future reconstruction CSS du HTML. La facilité d'écriture de la page est une étape.
Connaissance de la mise en page :
Mise en page DIV+CSS, la mise en page CSS est le nom collectif des pages Web (html) développées et produites via des balises div + code de feuille de style CSS.
Avantages de la mise en page div+css : facile à maintenir, bénéfique pour le référencement (Google utilise la vitesse d'ouverture des pages Web comme facteur de classement et facteur de référencement), la vitesse d'ouverture des pages Web est plus rapide et elle est conforme aux normes du Web, etc.
Pensez à la mise en page avant de créer une page Web div+css :
Nous obtenons d'abord une image d'illustration de page Web et nous la présenterons de haut en bas, de haut en bas, de gauche à droite. , cadre de haut en bas (y compris gauche et droite) auquel réfléchir.
Ce qui suit est un exemple pour expliquer l'analyse de la mise en page CSS Nous utilisons la page de liste DIVCSS5 pour analyser la mise en page CSS :
Nous pouvons d'abord analyser notre mise en page CSS DIV et. reconstituer cette page Nous pouvons voir le cadre structurel comme des structures supérieures, moyennes et inférieures, y compris des structures gauche et droite.
Par conséquent, lorsque nous écrivons le CSS et le HTML de cette page, nous devons d'abord écrire le CSS et le HTML de haut en bas et de l'extérieur vers l'intérieur.
Nous créons d'abord un dossier Web et créons une nouvelle page html dans ce dossier nommé index.html et un fichier css nommé index.css. L'astuce ici consiste à importer le modèle pour créer la page initiale CSS et HTML, puis à référencer le fichier CSS au HTML, qui est le modèle CSS que j'ai introduit dans le modèle, puis à écrire et ajouter du CSS basé sur le modèle CSS.
Ce qui suit est le code html de index.html :
Ce qui suit est le contenu cité :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css布局案例实验页面-www.divcss5.com.cn</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">我是头部（上）</div> <div id="centers"> <div class="c_left">我是中的左</div> <div class="c_right">我是中的右</div> <div class="clear"> </div> </div> <div id="footer">我是底部（下）</div> </body> </html> index .css的CSS代码如下：
Ce qui suit est le contenu cité :
body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;}
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;}
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;}
.clear{clear:both;height:1px; margin-top:-1px; width:100%;}
.dis{display:block;}
.undis{display:none;}
/*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/
#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;}
#header{ height:68px; border:1px solid #CCCCCC; }
#centers{ padding:8px 0;}
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;}
#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; }
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}Vous pouvez essayer ces deux morceaux de code et en créer un nouveau. Nous présenterons le cadre CSS et HTML de la page d'art ci-dessus, puis continuerons à ajouter du code source CSS et HTML en fonction de chaque contenu.
À propos de css layout_div L'importance de la mise en page CSS est tellement importante que j'espère qu'elle vous sera utile. Les cas ci-dessus ne sont pas expliqués en détail. J'espère que vous pourrez pratiquer davantage en personne. Ce n'est qu'en pratiquant que vous pourrez améliorer vos compétences.
Lecture connexe :
Plug-in JS de mise en page de flux Web ultra-léger Macy.js
Explication détaillée de la mise en page Flex en CSS3
Explication graphique détaillée des balises de mise en page et des balises de liste en html
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
