Maison > Article > interface Web > Un nouveau départ pour la conception de mises en page de pages Web div CSS (1)
Un nouveau départ pour la conception de mises en page de pages Web div CSS (1)
- 黄舟original
- 2016-12-29 14:11:021235parcourir
DIV CSS est l'un des termes couramment utilisés dans les normes de sites Web (ou « normes WEB »). Div CSS est une méthode de mise en page de page Web. Cette méthode de mise en page de page Web est différente des tableaux du langage de conception de page Web HTML traditionnel. La méthode de positionnement (tableau) peut réaliser la séparation du contenu et des performances de la page Web. XHTML est l'abréviation de The Extensible HyperText Markup Language. XHTML est basé sur Extensible Markup Language (XML), qui est un nouveau langage optimisé et amélioré sur la base du HTML. Le but est de s'adapter à davantage de besoins des futures applications réseau basées sur des applications XML et de puissantes capacités de conversion de données. Dans les normes de conception de sites Web XHTML, la technologie de positionnement des tableaux n'est plus utilisée, mais le CSS DIV est utilisé pour réaliser divers positionnements.
Avant, c'était une disposition de table. . Il n'est fondamentalement plus utilisé (le tableau n'est utilisé que pour afficher des données)
div signifie zone en chinois, et css signifie feuille de style en cascade. On peut voir que le noyau est la mise en page, pas le style
I. j'apprends DIV Avant CSS, vous devez être familier avec HTML. DIV CSS doit être appris sur la base de HTML
D'accord, quel outil utilisez-vous maintenant En général, le Bloc-notes suffit, c'est-à-dire que le navigateur Notepad l'est ? OK, et le serveur est OK. Non, vous pouvez également utiliser Dreamweaver CS5. Il existe des astuces pour cela. Il est préférable de télécharger la version chinoise du manuel de la feuille de style CSS pour le document d'aide, afin que vous puissiez tout faire. 🎜>
Les éléments ci-dessus sont faciles à trouver en ligne et peuvent également être trouvés sur le groupe Développement de programmation Web : 197132320 Téléchargez, bien sûr, les amis qui aiment la programmation Web sont également invités à nous rejoindre
Commençons apprentissage. Tout d'abord, familiarisez-vous avec la structure de base du HTML et créez un fichier html test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>Bien sûr, vous pouvez également l'afficher normalement si vous saisissez directement bonjour dans le fichier html. , mais cela ne répond pas aux normes
Faisons maintenant connaissance avec div. En fait, il peut être considéré comme un conteneur ou une boîte, spécialement utilisée pour contenir du contenu
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>Nous devons lui donner un style à afficher, laissez d'abord sa bordure s'afficher, largeur Hauteur 100px, la couleur d'arrière-plan est rouge
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>border: solid 1px border représente l'attribut css border solid 1px Veuillez noter qu'il doit y avoir des espaces entre les deux. valeurs
solide signifie que la bordure est affichée 1px signifie que la largeur de la bordure est de 1 pixel
Qu'est-ce qu'un pixel Voir ici http://baike.baidu.com/view/575.htm
width:100px;height:100px; consiste à définir la largeur et la hauteur du div. Faites attention à la valeur de chaque attribut : séparez les attributs par ;
background:red
Le code ci-dessus est affiché dans le navigateur comme suit
Fermez la barre latérale
div signifie zone en chinois, et css signifie feuille de style en cascade. On peut voir que le noyau est la mise en page, pas le style
I. J'apprends DIV Avant CSS, vous devez être familier avec HTML. DIV CSS doit être appris sur la base de HTML
D'accord, quel outil utilisez-vous maintenant ? En général, le Bloc-notes suffit. OK, et le serveur est OK. Non, vous pouvez également utiliser Dreamweaver CS5. Il existe des astuces pour cela. Il est préférable de télécharger la version chinoise du manuel de la feuille de style CSS pour le document d'aide, afin que vous puissiez tout faire. 🎜>
Les éléments ci-dessus sont faciles à trouver en ligne et peuvent également être trouvés sur le groupe Développement de programmation Web : 197132320 Téléchargez, bien sûr, les amis qui aiment la programmation Web sont également invités à nous rejoindre
Commençons apprentissage. Tout d'abord, familiarisez-vous avec la structure de base du HTML et créez un fichier html test.html
Bien sûr, vous pouvez également l'afficher normalement si vous saisissez directement bonjour dans le fichier html. , mais cela ne répond pas aux normes
Faisons maintenant connaissance avec div. En fait, il peut être considéré comme un conteneur ou une boîte, spécialement utilisée pour contenir du contenu
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
<.>Mais vous ne pouvez pas voir ce div sur la page web, car il est toujours transparent
Nous devons lui donner un style à afficher, laissez d'abord sa bordure s'afficher, largeur Hauteur 100px, couleur de fond rouge
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说
引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式
外部样式引入需要在head标签里加
另外还的在html文件相同目录下创建mystyle.css文件
内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入
这是内部样式
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式
如果是这种
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部
以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！