Quelles sont les techniques de mise en page CSS ?-tutoriel CSS-php.cn

Quelles sont les techniques de mise en page CSS ?

php中世界最好的语言

Libérer： 2017-11-23 14:07:17

original

2004 Les gens l'ont consulté

Comment CSS doit-il être présenté ? À quels aspects faut-il prêter attention lors de la conception de la mise en page CSS ? Quelles sont les techniques de mise en page CSS ? Aujourd’hui, nous allons les résumer un par un pour vous. Comment avoir une bonne mise en page CSS.

Tout le monde sait que lorsque les PS (images) prises par des graphistes sont reconstruites par des reconstructeurs CSS, les images d'art de la page Web doivent être analysées. Ce n'est que grâce à une bonne analyse que la mise en page CSS peut être obtenue.

Par conséquent, la mise en page CSS DIV joue un rôle important dans 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. sur la mise en page CSS, et l'analyse de la mise en page CSS affecte directement les futurs CSS. Une étape pour reconstruire si la page HTML est facile à écrire.

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 par 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 analysons la mise en page CSS avec une page de liste :

Nous pouvons d'abord analyser notre mise en page CSS DIV et reconstruire la page. structure de la page Nous pouvons voir que le cadre a des structures supérieure, moyenne et inférieure, 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 "> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面</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>

Copier après la connexion

Le code CSS de index.css est le suivant :

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

Copier après la connexion

Vous pouvez essayer ces deux morceaux de code et en créer un nouveau. Nous présenterons le framework CSS et html de l'art ci-dessus. page, puis continuez à ajouter des sources CSS et html en fonction de chaque contenu.

Je crois que tout le monde comprend déjà l'importance et l'explication de la mise en page CSS. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Style de tableau HTML

Comment utiliser min-height et max-height en CSS

Comment afficher des images circulaires en CSS3

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!