Как сделать чат html css
Перейти к содержимому

Как сделать чат html css

  • автор:

Помогите сверстать чат

Нужно расположить блоки в виде чата, как на картинке. Помогите, пожалуйста, что я делаю не так и как это сделать правильнее, чище?

.text-align-center < text-align: center; >.item:nth-child(even) < direction: rtl; >.item < position: relative; margin: auto; white-space: nowrap; >div < display: block; >.person < display: inline-block; overflow: hidden; position: relative; vertical-align: middle; >.text < display: inline-block; vertical-align: middle; font-size: 30px; direction: ltr; >.all-chat
   homework 5   
Chat
 
 
 
   
9:03
 
Hi
 
 
 
 
 
   
9:05
 
Hello!

введите сюда описание изображения

Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
задан 12 янв 2017 в 7:44
139 1 1 серебряный знак 12 12 бронзовых знаков

.item:nth-child(even) — а если у тебя будет несколько сообщений подряд от одного пользователя? Сделай просто отдельный классы для отправленного сообщения и для принятого сообщения. Может быть даже стоит в них разметку разную сделать

12 янв 2017 в 8:17

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Даю общие советы и перехожу к деталями вашего кода:

  1. При вёрстке интересуйтесь предназначением CSS-свойств. То есть довод использования — просто потому что «так работает» используйте в последнюю очередь (если всё остальное не работает). К примеру, вы используете свойство direction . Это свойство предназначено для указания направления текста. В большинстве языков текст пишется слева направо (значение ltr по умолчанию), но на арабском и иврите текст пишется справа налево и для этого текста указывается direction: rtl; . Получается, что вы используете это свойство не по назначению.
  2. Осмотрительней используйте абсолютное позиционирование. В идеале его использовать только когда нужно чтобы элементы перекрывали другие и элемент извлёкся из потока отображения. К примеру, модальные окна, выпадающие списки с более сложным отображением, чем стандартный select и т.д. Также используется для в некоторых рецептах вроде поместить иконку внутри текстового поля. Но в данном случае не вижу в потребности в абсолютном позиционировании.
  3. С большой осторожностью используйте псевдоселекторы (к примеру, first-child; , only-child , nth-child и т.д.). Потому что псевдоселекторы
  4. игнорируют видимый блок или нет. То есть если вы скроете один из блоков с помощью display: none , он всё равно будет учитываться при применении псевдоселектора.
  5. при применении учитывают лишь порядковый номер элемента относительно родителя. То есть псевдоселектор .item:nth-child(even) работает так «выбрать каждого чётного ребёнка, у которого есть класс item «, а не так «выбрать каждый чётный элемент с классом item «. Иллюстрирую примером:

.item:nth-child(even)
 
 
One (not item)
 
Two (item)
 
Three (item)
 
Four (not item)
 
Five (item)
 
Six (item)

Если вы добавите элементы рядом с .item , вёрстка может сломаться.

Поэтому рекомендую посмотреть, может стоит задавать отдельные классы для особых типов элементов.

В данном случае, я полагаю также, что чат означает, что может быть несколько сообщений подряд от одного пользователя. Поэтому применение стилей только к чётным элементам, кажется неверным.

  1. Изучите flexbox. Расположение элементов с помощью float , clear , vertical-align не обладает такой мощью и не такое гибкое и сопровождаемое.
  2. Изучите CSS-методологию. BEM или SMACSS. Для того, чтобы вы могли легко менять вёрстку, а также если такие же блоки или подобные нужны на других страницах вы бы их без проблем добавляли и меняли. В примере, я буду использовать BEM.
  3. Не используйте безликие или неоднозначные имена вроде .item . Это же может быть что угодно. Применение этого класса зависит от того, кто в нём родитель и что рядом находится. А это значит, что если где-то добавится блок .item , то те же стили для него и применятся, что, возможно, будет нежелательно. Относитесь к селекторам также как к переменным. У них должно быть строго определённое предназначение и имя должно чётко его отражать. Если вы назовёте, к примеру, chat-item , то уже более ясно значение этого блока.
  4. Относитесь к вёрстке как к программированию, для которого важна легкость восприятия, гибкость и сопровождаемость. Также не менее важно соответствие стандартов. Вёрстку портят дублирования кода, старайтесь их избегать. Использование современных препроцессоров с переменными, циклами, условиями делает вёрстку почти неотличимой от программирования.

Результаты

Для каждой серии сообщений создал блок .chat-item , где будет находиться аватар и одно или несколько сообщений от пользователя.

Для того, чтобы применять стили для инвертирования расположение (для отвечающего) колонки я задал flex-direction: row-reverse; , что инвертирует порядок расположения элементов.

Здесь использована методология BEM.
Для того, чтобы не создавать дополнительные классы для вложенных элементов при инвертировании я пожертвовал чистотой BEM и добавил селекторы с вложенностью ( .chat__item—responder .chat__message , .chat__item—responder .chat__message-content ). По самой методологии (в идеале) следует использовать только классы без вложенности.

В результате код может выглядеть так:

.chat__header < text-align: center; >.chat__item < display: flex; align-items: flex-start; >.chat__person-avatar < border-radius: 50%; >.chat__messages < margin-left: 10px; >.chat__message < display: flex; align-items: center; margin-right: 10px; >.chat__message-content < border-radius: 5px; padding: 7px; background-color: #ccc; display: inline-block; margin-left: 5px; >.chat__item--responder < flex-direction: row-reverse; >.chat__item--responder .chat__message < flex-direction: row-reverse; >.chat__item--responder .chat__message-content
 
Chat
 
 
   
 
9:03
 
Hi
 
 
9:03
 
How are you?
 
 
 
 
   
 
9:05
 
Hello
 
 
9:07
 
I'm fine. Let's have a dinner today.
 
 
9:07
 
What do you think about it?

12 CSS Chats

Collection of hand-picked free HTML and CSS chat code examples from Codepen and other resources.

Related Articles

Demo image: Facebook Messenger

  1. Bootstrap Chats
  2. jQuery Chats
  3. Tailwind Chats
Author
  • Ahmad Shadeed
  • November 3, 2021
Links
Made with
  • HTML / CSS

Простой чат для сайта на PHP, HTML и JavaScript в один файл

Чат без базы данных, без MySQL, без каких-либо jQuery и других фреймворков — только чистый JS.

Чат в двух форматах — windows-1251 и UTF-8

История чата хранится в HTML файле, куда записываются уже оформленные в HTML сообщения.

Чат без авторизации.

Чат без использования WebSockets и long polling.

Запоминание выбранного ника в куках.

Чат с возможностью вырезания всякого «ге» из текста и ника при постинге и ограничение их по длине.

Обрезка подгружаемого куска чата

Отправка данных только в случае, если они были изменены (но отправляется весь кусок)

Отключаемый звук отправки/получения сообщения

Возможность задать время опроса, путь до файла с чатом, длину пересылаемого куска, оформление сообщений

Блокирование диалогов при загрузке и постинге, если скорость низкая

Подсказки в случае всяких фейлов

Кросс-браузерная работа — традиционно WebKit-ы (Chrome, Safari и др.), Firefox.

Отлично смотрится на мобильных устройствах.

Огромное пространство для творчества и модификаций.

Все максимально просто, коротко, понятно и со вкусом

Скачать чат для сайта.

Вопросы и ответы про чат для сайта.

Как убрать вывод IP, чтобы сохранять конфиденциальность?

Есть возможность убрать вывод IP — найдите и удалите в файле такой текст: (‘ . $id . ‘) .

Как очистить чат от ненужных записей?

Возможность быстро очистить чат от ненужных записей — Чат пишется в файл chat.db — это по сути обычный html-файл и там можно подправить все, что надо, открыв его обычным текстовым редактором. Либо вообще удалить этот файл — тогда чат пересоздаст его и будет полностью чист.

Проблемы с отражением на windows-1251

На хостинге нужно правильно настроить кодировку и проверить наличие расширения mbstring у PHP — иначе будут проблемы с работой чата.

Либо используйте чат, написанный под UTF-8.

Как вставить чат на свой сайт?

Скопировать в любой каталог на сайте файл чата (можно даже в корень) и проверить его доступность.

Например, если положили в корень своего сайта, то попробовать открыть URL вида вашсайт/chat.php, или, если в папку — то вашсайт/папка/chat.php.

Если открываться не будет — значит либо надо доступ до него прописать, либо изменить rewrite-правила в зависимости от того, какой веб-сервер используется.

Вставить на все страницы сайта проще всего через iframe.

Как создать простое приложение веб-чата

В этом уроке мы будем создавать простое приложение веб-чата с помощью PHP и jQuery. Утилита такого типа прекрасно подойдет для системы онлайн-поддержки вашего сайта.

Введение

final productfinal product final product

Приложение чата, которое мы сегодня построим, будет довольно простым. Оно будет включать в себя систему входа и выхода, возможности в AJAX-стиле, а также предложит поддержку нескольких пользователей.

Шаг 1: HTML разметка

Мы начнем этот урок с создания нашего первого файла index.php.

 xmlns="http://www.w3.org/1999/xhtml"> 
 Chat - Customer Module 
 type="text/css" rel="stylesheet" href="style.css" /> 
 id="wrapper"> 
 id="menu"> 
 class="welcome">Welcome, 

 class="logout"> id="exit" href="#">Exit Chat






  
 style="clear:both">
 id="chatbox">
 name="message" action=""> 
 name="usermsg" type="text" id="usermsg" size="63" /> 
 name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
 type="text/javascript"> 
// jQuery Document 
$(document).ready(function()
  • Мы начнем наш html с обычных DOCTYPE, html, head, и body тагов. В таг head мы добавим наш заголовок и ссылку на нашу таблицу стилей css (style.css).
  • Внутри тага body, мы структурируем наш макет внутри блока — обертки #wrapper div. У нас будет три главных блока: простое меню, окно чата и поле ввода нашего сообщения; каждый со своим соответствующим div и id.
    • Блок меню #menu div будет состоять из двух абзацев. Первый будет приветствием пользователю и поплывет налево, а второй будет ссылкой на выход и поплывет направо. Мы также включим блок div для очистки элементов.
    • Блок чата #chatbox div будет содержать лог нашего чата. Мы будем загружать наш лог из внешнего файла с использованием ajax-запроса jQuery.
    • Последним пунктом в нашем блоке-обертке #wrapper div будет наша форма, которая будет включать в себя текстовое поле ввода для сообщения пользователя и кнопку отправки.

    Шаг 2: Создание стиля CSS

    Теперь мы добавим немного css, чтобы заставить наше приложение чата выглядеть лучше, чем стиль браузера по умолчанию. Код, указанный ниже будет добавлен в наш файл style.css.

    /* CSS Document */ 
    body  
    font:12px arial; 
    color: #222; 
    text-align:center; 
    padding:35px; > 
    form, p, span  
    margin:0; 
    padding:0; > 
    input  font:12px arial; > 
    color:#0000FF; 
    text-decoration:none; > 
    a:hover  text-decoration:underline; > 
    #wrapper, #loginform  
    margin:0 auto; 
    padding-bottom:25px; 
    background:#EBF4FB; 
    width:504px; 
    border:1px solid #ACD8F0; > 
    #loginform  padding-top:18px; > 
    #loginform p  margin: 5px; > 
    #chatbox  
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; > 
    #usermsg  
    width:395px; 
    border:1px solid #ACD8F0; > 
    #submit  width: 60px; > 
    .error  color: #ff0000; > 
    #menu  padding:12.5px 25px 12.5px 25px; > 
    .welcome  float:left; > 
    .logout  float:right; > 
    .msgln  margin:0 0 2px 0; >

    В вышеуказанном css нет ничего особенного, кроме того факта, что некоторые id или классы, для которых мы устанавливаем стиль, будут добавлены немного позже.

    Как вы можете видеть выше, мы закончили строить пользовательский интерфейс чата.

    Шаг 3: Используем PHP, чтобы создать форму входа.

    Теперь мы реализуем простую форму, которая будет спрашивать у пользователя его имя, перед тем, как пустить его дальше.

    session_start(); 
    function loginForm() 
    echo' 
     
    Please enter your name to continue:
          
       
    if(isset($_POST['enter'])) 
    if($_POST['name'] != "") 
    $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); 
    else 
    echo 'Please type in a name';

    Функция loginForm(), которую мы создали, состоит из простой формы входа, которая спрашивает у пользователя его/ее имя. Затем мы используем конструкцию if else, чтобы проверить, ввел ли пользователь имя. Если человек ввел имя, мы устанавливаем его, как $_SESSION[‘имя’]. Так как мы используем сессию, основанную на cookie, чтобы хранить имя, мы должны вызвать session_start() перед тем, как что-нибудь выводить в браузер.

    Есть одна вещь, на которую вы возможно захотите обратить особое внимание — то, что мы использовали функцию htmlspecialchars(), которая конвертирует специальные символы в HTML сущности, тем самым защищая имя переменной, чтобы оно не стало жертвой межсайтового скриптинга (XSS). Мы также добавим эту функцию позже к текстовой переменной, которая будет опубликована в логе чата.

    Отображение формы входа

    Для того, чтобы показать форму логина в случае, если пользователь не вошел в систему, и следовательно, не сессия не создалась, мы используем другую инструкцию if else вокруг блока-обертки #wrapper div и тагов скрипта в нашем исходном коде. В противоположном случае, если пользователь вошел в систему и создал сессию, этот код спрячет форму входа и покажет окно чата.

    if(!isset($_SESSION['name'])) 
    loginForm(); 
    else 
     id="wrapper"> 
     id="menu"> 

     class="welcome">Welcome,  echo $_SESSION['name']; ?> 
     

     class="logout"> id="exit" href="#">Exit Chat
    




    
      
     style="clear:both">
 id="chatbox">
 name="message" action=""> 
 name="usermsg" type="text" id="usermsg" size="63" /> 
 name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
 type="text/javascript"> 
// jQuery Document 
$(document).ready(function()

Приветствие и меню выхода из системы

Мы еще не закончили создавать систему входа для этого приложения чата. Нам еще нужно дать пользователю возможность выйти из системы и закончить сессию чата. Как вы помните, наша исходная HTML разметка включала в себя простое меню. Давайте вернемся назад и добавим некоторый PHP код, который придаст меню больше функциональности.

Прежде всего, давайте добавим имя пользователя в сообщение приветствия. Мы сделаем это, выводя сессию имени пользователя.

 class="welcome">Welcome,  echo $_SESSION['name']; ?>

Для того, чтобы позволить пользователю выйти из системы и завершить сессию, мы прыгнем выше головы и кратко используем jQuery.

// jQuery Document
$(document).ready(function()

//If user wants to end session


$("#exit").click(function()

var exit = confirm("Are you sure you want to end the session?");


if(exit==true)


Код jquery, приведенный выше просто показывает диалог подтверждения, если пользователь кликнет по ссылке выхода #exit. Если пользователь подтвердит выход, тем самым решив закончить сессию, мы отправим его в index.php?logout=true. Это просто создаст переменную с именем logout со значением true. Мы должны перехватить эту переменную с помощью PHP:


 


if(isset($_GET['logout'])) 


//Simple exit message 


$fp = fopen("log.html", 'a'); 


fwrite($fp, "User ". $_SESSION['name'] ." has left the chat session. "); 


fclose($fp); 


session_destroy(); 


header("Location: index.php"); //Redirect the user 


Теперь мы увидим, существует ли get переменная 'logout', используя функцию isset(). Если переменная была передана через url, такой, как ссылка, упомянутая выше, мы переходим к завершению сессии пользователя с текущим именем.


Перед уничтожением сессии пользователя с текущим именем с помощью функции session_destroy() мы хотим выводить простое сообщение о выходе в лог чата. В нем будет сказано, что пользователь покинул сессию чата. Мы сделаем это, используя функции fopen(), fwrite() и fclose(), чтобы манипулировать нашим файлом log.html, который, как мы увидим позднее, будет создан в качестве лога нашего чата. Пожалуйста, обратите внимание, что мы добавили класс 'msgln' в блок div. Мы уж определили стиль css для этого блока.


Проделав это, мы уничтожаем сессию и перенаправляем пользователя на ту же страницу, где появится форма входа в систему.


Шаг 4: Поддержка пользовательского ввода данных


После того, как пользователь подтвердил свои действия в нашей форме, нам нужно захватывать его ввод с клавиатуры и писать его в лог нашего чата. Для того, чтобы сделать это, мы должны использовать jQuery и PHP, чтобы работать синхронно на стороне сервера и на стороне клиента.


jQuery


Практически все, что мы собираемся делать с jQuery для обработки наших данных, будет вращаться вокруг запроса на jQuery post.


//If user submits the form


$("#submitmsg").click(function()





Похожие публикации:
    

  1. H1 как правильно заполнить
    2. 

  2. Request timeout for icmp seq что значит
    3. 

  3. Метод и функция в чем разница
    4. 

  4. Что такое mainloop в python
    5. 








		

		
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *