Maison > Article > interface Web > Utilisez DIV et CSS pour créer une boîte rouge avec une bordure unie

Utilisez DIV et CSS pour créer une boîte rouge avec une bordure unie

php中世界最好的语言original: 2017-11-28 12:02:025593parcourir

Faisons un cas pour votre référence. Nous utilisons le logiciel DW pour créer une boîte avec une bordure solide rouge. Nous nommons cette boîte DIV. Voici l'exemple de code

Configurez la boîte afin d'observer. l'effet. Une hauteur CSS, un style de largeur CSS et un style de bordure CSS rouge. Dans le même temps, DIV utilise toujours le logiciel DW pour créer cette instance à des fins de compatibilité.

Nommez cette instance css ".div" et utilisez class pour référencer dans le html. La largeur CSS est de 380 px, la hauteur CSS est de 200 px et il y a une bordure solide avec une largeur de bordure de 2 px.

Syntaxe de base de la bordure :

Bordure : bordure Accédez au didacticiel de bordure CSS

L'exemple de code HTML complet est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>新建边框实例</title> 
<style> 
.div{ width:380px; height:200px; border:2px solid #F00} 
</style> 
</head> 
<body> 
<div class="div">我宽度为380px 高度200px 边框2px红色</div> 
</body> 
</html>

Je crois vous avez lu ces cas. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer une hauteur adaptative DIV

Comment utiliser CSS masque le contenu textuel de l'arrière-plan de l'image

La nécessité d'initialiser CSS avant de démarrer le projet front-end

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!

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 utiliser CSS pour superposer deux DIVArticle suivant：Comment utiliser CSS pour superposer deux DIV

Articles Liés

Voir plus