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

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

php中世界最好的语言
Libérer: 2017-11-28 12:02:02
original
5572 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
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
Tutoriels populaires
Plus>
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!