interface Web
tutoriel HTML
Comment implémenter une mise en page de discussion simple en utilisant HTML et CSS
Comment implémenter une mise en page de discussion simple en utilisant HTML et CSS
Comment utiliser HTML et CSS pour mettre en œuvre une mise en page simple de page de discussion
Avec le développement de la technologie moderne, les gens comptent de plus en plus sur Internet pour communiquer et communiquer. Dans les pages Web, les pages de discussion constituent une exigence de mise en page très courante. Cet article vous expliquera comment utiliser HTML et CSS pour implémenter une mise en page de discussion simple et donnera des exemples de code spécifiques.
Tout d'abord, nous devons créer un fichier HTML, vous pouvez utiliser n'importe quel éditeur de texte. En prenant index.html comme exemple, créez d'abord une structure HTML de base : index.html为例，先创建一个基本的HTML结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-messages">
<!-- 这里是聊天消息的显示区域 -->
</div>
<div class="chat-input">
<!-- 这里是聊天输入框 -->
</div>
</div>
</body>
</html>在上述代码中，我们定义了一个chat-container的容器，其中包括两个部分：chat-messages和chat-input。前者用于展示聊天消息，后者用于用户输入。
接下来，我们需要添加CSS样式来美化这个聊天页面布局。在同一目录下创建一个名为style.css的CSS文件，然后添加以下样式代码：
/* Reset some default styles */
body, html {
margin: 0;
padding: 0;
}
/* Set container width, height and center it */
.chat-container {
width: 400px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
/* Message display area */
.chat-messages {
height: 400px;
overflow-y: scroll;
padding: 10px;
background-color: #f7f7f7;
}
/* Chat input area */
.chat-input {
height: 100px;
padding: 10px;
background-color: #fff;
border-top: 1px solid #ccc;
}
/* Style placeholder text in input area */
.chat-input input[type="text"]::placeholder {
color: #999;
}
/* Style the send button in input area */
.chat-input input[type="submit"] {
background-color: #3498db;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
/* Style the chat message bubble */
.chat-message {
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}上述CSS代码中，我们设置了几个基本样式。除了一些简单的边框和背景色，还设置了消息展示区域的滚动和聊天气泡的样式。
现在我们可以尝试预览一下效果了。将index.html和style.css文件保存在同一个目录下，然后在浏览器中打开index.html
// 获取聊天消息展示区域和聊天输入框
var messageContainer = document.querySelector(".chat-messages");
var chatInput = document.querySelector(".chat-input input[type='text']");
// 当用户在聊天输入框中按下回车键时，将消息添加到展示区域中
chatInput.addEventListener("keydown", function(event) {
if (event.keyCode === 13) { // 13代表回车键的键码值
event.preventDefault();
// 获取用户输入的消息内容
var messageText = chatInput.value;
// 创建聊天消息元素
var messageBubble = document.createElement("div");
messageBubble.classList.add("chat-message");
messageBubble.textContent = messageText;
// 将消息添加到展示区域中
messageContainer.appendChild(messageBubble);
// 清空聊天输入框
chatInput.value = "";
}
});chat-container, qui comprend deux Il y a deux parties : messages de chat et entrée de chat. Le premier est utilisé pour afficher les messages de discussion et le second est utilisé pour la saisie de l'utilisateur. Ensuite, nous devons ajouter des styles CSS pour embellir la mise en page de la page de discussion. Créez un fichier CSS nommé style.css dans le même répertoire, puis ajoutez le code de style suivant : rrreee
Dans le code CSS ci-dessus, nous avons défini plusieurs styles de base. En plus de quelques bordures simples et couleurs d'arrière-plan, les styles de défilement et de bulle de discussion de la zone d'affichage des messages sont également définis. Maintenant, nous pouvons essayer de prévisualiser l'effet. Enregistrez les fichiersindex.html et style.css dans le même répertoire, puis ouvrez le fichier index.html dans le navigateur, vous verrez une mise en page de discussion simple. Enfin, nous devons implémenter l'interaction des pages de chat via JavaScript. Ici, nous omettons le code spécifique et ne donnons qu'un exemple simple : 🎜rrreee🎜Grâce au code ci-dessus, nous nous rendons compte que lorsque l'utilisateur appuie sur la touche Entrée dans la zone de saisie du chat, le message saisi est ajouté à la zone d'affichage du message, et Effacer la zone de saisie du chat. 🎜🎜Avec les exemples de codes HTML, CSS et JavaScript ci-dessus, nous pouvons implémenter une mise en page de discussion simple et implémenter des fonctions d'affichage et de saisie de messages. Bien entendu, il ne s’agit que d’un exemple de base et vous pouvez l’étendre et l’optimiser en fonction de vos propres besoins et de votre créativité. 🎜🎜J'espère que cet article vous aidera à comprendre comment utiliser HTML et CSS pour implémenter une mise en page simple de page de discussion ! 🎜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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment implémenter une disposition de masque plein écran en utilisant HTML et CSS
Oct 20, 2023 pm 03:46 PM
La mise en œuvre d'une disposition de masque plein écran est l'une des exigences courantes en matière de conception Web, ce qui peut ajouter un fort sentiment de mystère et des effets uniques à la page Web. Dans cet article, HTML et CSS seront utilisés pour implémenter une disposition simple de masque plein écran, et des exemples de code spécifiques seront donnés. Commençons par créer la structure HTML. Dans le fichier HTML, nous utiliserons un élément div comme conteneur pour le masque et y ajouterons du contenu, comme indiqué ci-dessous : <!DOCTYPEhtml><html>
Comment créer une page de mise en page de diaporama en utilisant HTML et CSS
Oct 16, 2023 am 09:07 AM
Comment créer une page de mise en page de diapositives à l'aide de HTML et CSS Introduction : La mise en page de diapositives est largement utilisée dans la conception Web moderne et est très attrayante et interactive lors de l'affichage d'informations ou d'images. Cet article explique comment créer une page de mise en page de diapositives à l'aide de HTML et CSS, et fournit des exemples de code spécifiques. 1. Structure de mise en page HTML Tout d'abord, nous devons créer une structure de mise en page HTML, comprenant un conteneur de diapositives et plusieurs éléments de diapositive. Le code ressemble à ceci : <!DOCTYPEhtml&
Comment utiliser :nth-child(-n+5) sélecteur de pseudo-classe pour sélectionner le style CSS des éléments enfants dont la position est inférieure ou égale à 5
Nov 20, 2023 am 11:52 AM
Comment utiliser : le sélecteur de pseudo-classe nth-child(-n+5) pour sélectionner le style CSS des éléments enfants dont la position est inférieure ou égale à 5. En CSS, le sélecteur de pseudo-classe est un outil puissant qui peut être sélectionnés via une méthode de sélection spécifique. Certains éléments dans un document HTML. Parmi eux, :nth-child() est un sélecteur de pseudo-classe couramment utilisé qui peut sélectionner des éléments enfants à des positions spécifiques. :nth-child(n) peut correspondre au nième élément enfant en HTML, et :nth-child(-n) peut correspondre
Comment implémenter une mise en page de discussion simple en utilisant HTML et CSS
Oct 18, 2023 am 08:42 AM
Comment utiliser HTML et CSS pour mettre en œuvre une mise en page simple de page de discussion Avec le développement de la technologie moderne, les gens comptent de plus en plus sur Internet pour communiquer et communiquer. Dans les pages Web, les pages de discussion constituent une exigence de mise en page très courante. Cet article vous expliquera comment utiliser HTML et CSS pour implémenter une mise en page de discussion simple et donnera des exemples de code spécifiques. Tout d’abord, nous devons créer un fichier HTML, vous pouvez utiliser n’importe quel éditeur de texte. En prenant index.html comme exemple, créez d'abord un code HTML de base
Compétences en mise en page HTML : comment utiliser la mise en page de positionnement pour contrôler le positionnement absolu de la page
Oct 19, 2023 am 08:40 AM
Compétences en mise en page HTML : Comment utiliser la mise en page de positionnement pour contrôler le positionnement absolu de la page Dans le développement Web, la mise en page est un élément très critique. La mise en page de positionnement est une méthode de mise en page couramment utilisée qui permet aux développeurs de contrôler de manière plus flexible la position des éléments sur la page. Cet article explique comment utiliser la disposition de positionnement pour contrôler le positionnement absolu de la page et fournit des exemples de code spécifiques. 1. Présentation de la mise en page de positionnement La mise en page de positionnement fait référence à la détermination de la position des éléments sur la page en fonction de leurs attributs de position. En CSS, il existe trois méthodes principales de positionnement : le positionnement relatif,
Comment créer une mise en page de mur de cartes réactive en utilisant HTML et CSS
Oct 25, 2023 am 10:42 AM
Comment créer une mise en page de mur de cartes réactive à l'aide de HTML et CSS Dans la conception Web moderne, la mise en page réactive est une technologie très importante. En utilisant HTML et CSS, nous pouvons créer une disposition de mur de cartes réactive qui s'adapte aux appareils de différentes tailles d'écran. Voici un aperçu plus approfondi de la façon de créer une disposition simple de mur de cartes réactive à l’aide de HTML et CSS. Partie HTML : Tout d'abord, nous devons configurer la structure de base dans le fichier HTML. Nous pouvons utiliser une liste non ordonnée (<ul>) et
Comment implémenter une mise en page détaillée en utilisant HTML et CSS
Oct 20, 2023 am 09:54 AM
Comment utiliser HTML et CSS pour implémenter une mise en page détaillée HTML et CSS sont les technologies de base pour créer et concevoir des pages Web. En utilisant ces deux éléments de manière appropriée, nous pouvons réaliser diverses mises en page complexes. Cet article explique comment utiliser HTML et CSS pour implémenter une mise en page détaillée et fournit des exemples de code spécifiques. Créer une structure HTML Tout d'abord, nous devons créer une structure HTML pour placer le contenu de notre page. Ce qui suit est une structure HTML de base : <!DOCTYPEhtml&g
Guide de mise en page HTML : comment utiliser des éléments flottants pour implémenter une mise en page multicolonne
Oct 27, 2023 pm 03:24 PM
Guide de mise en page HTML : Comment utiliser des éléments flottants pour implémenter une mise en page multi-colonnes Lors de la navigation sur des pages Web, nous voyons souvent des mises en page composées de plusieurs colonnes, telles que la page d'accueil d'un site Web d'actualités, la page d'affichage d'un produit, etc. Cette disposition à plusieurs colonnes rend les pages Web plus organisées et plus belles en divisant le contenu en colonnes et en les affichant côte à côte. En HTML, nous pouvons utiliser des éléments flottants pour obtenir une telle mise en page multi-colonnes. Cet article vous montrera comment utiliser des éléments flottants pour implémenter une disposition multi-colonnes et fournira des exemples de code spécifiques. Concepts de base sur l'utilisation d'éléments flottants pour implémenter une disposition multi-colonnes
