Создайте веб-страницу для онлайн-системы доставки еды с использованием HTML и CSS

Опубликовано: 30 Ноября, 2021

В этой статье мы узнаем, как создать полностью адаптивную веб-страницу для онлайн-системы доставки еды с использованием HTML и CSS.

Используемые файлы:

  • index.html
  • contact.html
  • style.css

index.html: следующий HTML-код описывает структуру веб-страницы. Прежде всего, у него есть тег заголовка для отображения названия компании - «Online FoodShop». Панель навигации содержит вкладки «Главная», «О нас», «Меню» и «Контакты». Панель навигации также состоит из логотипа компании, за которым следует фоновое изображение с некоторыми дополнительными сведениями о «Интернет-магазине FoodShop» и представленными продуктами.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "style.css" >
< link
href=" https://fonts.googleapis.com/css2?
family = Ubuntu +Mono& display = swap "
rel = "stylesheet" >
</ head >
< body >
< header >
< h1 id = "top" >Online</ h1 >
< h1 id = "top1" >FoodShop</ h1 >
</ header >
< hr >
< nav id = "navbar" >
< img src = "5.jpeg" >
< ul id = "navcontent" >
< li >< a href = "#" >Home</ a ></ li >
< li >< a href = "#" >About</ a ></ li >
< li >< a href = "#" >Menu</ a ></ li >
< li >< a href = "contact.html" >ContactUs</ a ></ li >
</ ul >
</ nav >
< div id = "container1" >
< div id = "row1" >
Welcome to Online FoodShop
</ div >
< button class = "btn" >ORDER NOW</ button >
< div id = "container3" >
< div id = "row2" >
< button class = "btn" >Prices</ button >
</ div >
< div id = "row3" >
< button class = "btn" >Specials</ button >
</ div >
</ div >
</ div >
< hr >
< h1 id = "top3" >Featured Products</ h1 >
< div id = "container4" >
< div id = "row4" >
< button class = "btn" >ORDER NOW</ button >
</ div >
< div id = "row5" >
< button class = "btn" >ORDER NOW</ button >
</ div >
< div id = "row6" >
< button class = "btn" >ORDER NOW</ button >
</ div >
</ div >
< footer >Copyright © 2020-2021 OnlineFoodShop.
All Rights are reserved</ footer >
</ body >
</ html >

contact.html: Следующий HTML-код описывает нам, какое содержимое присутствует на вкладке «ContactUs» на панели навигации. Мы использовали теги ввода для ввода типа «запроса», «имени», «идентификатора электронной почты», «номера телефона» и «объяснения» запроса. Мы также использовали переключатели, чтобы узнать о членстве клиента в «Online FoodShop». На форме также есть кнопки «Отправить» и «Сбросить».

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "style.css" >
< title >ContactUs</ title >
</ head >
< body >
< div id = "ContactUs" >
< h1 >Contact Us</ h1 >
< form action = "#" >
< div class = "form-shape" >
< label for = "query" >
Type of Query
</ label >
< select name = "myQuery" id = "query" >
< option value = "sel" selected>
Select
</ option >
< option value = "ord" >
Order related Issues
</ option >
< option value = "Site" >
Site related Issues
</ option >
< option value = "fed" >
Complaint related Issues
</ option >
< option value = "others" >
Others
</ option >
</ select >
</ div >
< div class = "form-shape" >
< label for = "name" >Name</ label >
< input type = "text" name = "myName"
id = "name"
placeholder = "Enter your Name" >
</ div >
< div class = "form-shape" >
< label for = "email" >Email-Id</ label >
< input type = "email" name = "myEmail"
id = "email"
placeholder = "Enter your email" >
</ div >
< div class = "form-shape" >
< label for = "pho" >Phone Number</ label >
< input type = "phone" name = "myPhone"
id = "pho"
placeholder = "Enter your Phone no" >
</ div >
< div id = "radio" >
Are you a member of OnlneFoodShop:
Yes < input type = "radio" name = "eligible" >
No < input type = "radio" name = "eligible" >
</ div >
< div class = "form-shape" >
< label for = "message" >
Ellaborate your query
</ label >
< textarea name = "mesg" id = "message"
cols = "30" rows = "10" >
</ textarea >
</ div >
< input type = "submit" value = "Submit" >
< input type = "reset" value = "Reset" >
</ form >
</ div >
</ body >
</ html >

style.css: это блок таблицы стилей, который дает нам правильный вид веб-страницы.

  • Стиль заголовка: он состоит из двух тегов «заголовок». Мы использовали стиль шрифта «Ubuntu» для стилизации заголовка, а также использовали правильные цвета, чтобы текст выглядел привлекательно.
  • Стиль панели навигации: он в основном состоит из стиля логотипа и стиля контента. Прежде всего, мы рассмотрели панель навигации как гибкий блок и назначили гибкое направление «столбцу». Мы выровняли изображение логотипа по центру display: block . Мы использовали свойство margin: auto для центрирования изображения. Затем мы рассмотрели содержимое панели навигации как гибкий блок и правильно расположили его.
  • Стиль фонового изображения: мы использовали ранее псевдоселекторы для установки соответствующих фоновых изображений.
     / * Сброс CSS * /
* {
    маржа: 0px;
    отступ: 0 пикселей;
}
/ * Стиль заголовка * /

#вершина{
    цвет: rgb (245, 10, 10);
    выравнивание текста: центр;
    размер шрифта: 46 пикселей;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
}
# top1 {
    выравнивание текста: центр;
    черный цвет;
    размер шрифта: 21px;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
}
/ * Стиль панели навигации * /

/ * Стиль изображения навигационной панели * /
#navbar img {
    дисплей: блок;
    ширина: 50 пикселей;
    высота: 50 пикселей;
    маржа: авто;
    нижнее поле: 3 пикселя;
}

/ * Функциональность Navbar * /
#navbar {
    дисплей: гибкий;
    flex-direction: столбец;
    цвет фона: серый;
    высота: 14vh;
    ширина: 100ввт;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
    маржа сверху: 10 пикселей;
   граница: сплошной черный цвет 2px;
   радиус границы: 15 пикселей;
}


/ * Функциональность содержимого панели навигации * /
#navcontent {
    дисплей: гибкий;
    justify-content: center;
}


/ * Стиль содержимого панели навигации * /
ul li {
    стиль списка: нет;
    маржа: 15 пикселей;
    радиус границы: 20 пикселей;
}
ul li a {
    отступ: 1 пиксель;
    цвет белый;
    текстовое оформление: нет;
    радиус границы: 10 пикселей;
}
ul li a: hover {
    цвет фона: красный;
    радиус границы: 10 пикселей;
}

/ * разработка фонового изображения веб-сайта * /
# container1 {
    положение: относительное;
    дисплей: гибкий;
    flex-direction: столбец;
    align-items: center;
    ширина: 100ввт;
    высота: 63vh;
}

/ * Установка фонового изображения с использованием псевдоселектора до * / 
# container1 :: before {
    содержание:'';
    фон: url ("./ 1.jpg") центральная часть / обложка без повторов;
    ширина: 100ввт;
    высота: 59vh;
    позиция: абсолютная;
    верх: 0px;
    слева: 0px;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
    поле справа: 45 пикселей;
    font-weight: жирный;
    z-индекс: -1;
    непрозрачность: 0,89;
    граница: сплошной черный цвет 2px;
    граница-нижний-левый-радиус: 100 пикселей;
}

# row1 {
   черный цвет;
    font-weight: жирный;
    размер шрифта: 2rem;
    выравнивание текста: центр;
    маржа сверху: 35 пикселей;
}
/ * Стиль кнопок * /
.btn {
    маржа сверху: 15 пикселей;
    граница: сплошной белый цвет 3px;
    радиус границы: 15 пикселей;
    цвет фона: желтый;
    размер шрифта: 20 пикселей;
    font-weight: жирный;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
}
.btn: hover {
    курсор: указатель;
    цвет фона: красный;
}


# container3 {
    дисплей: гибкий;
    justify-content: равномерно по пространству;
}
# row2 {
    ширина: 24vw;
    высота: 21vh;
    box-shadow: 2px 7px 16px 19px;
     маржа сверху: 51px;
     нижнее поле: 51px;
     дисплей: гибкий;
    justify-content: center;
     выровнять элементы: гибкий конец;
     положение: относительное;
     поле справа: 38 пикселей;
     радиус границы: 40 пикселей;
}
# row2 :: before {
    содержание: '';
    фон: url ('2.jpeg') центральная часть / обложка без повторов;
    позиция: абсолютная;
    верх: 0px;
    слева: 0px;
    ширина: 24vw;
    высота: 21vh;
    z-индекс: -1;
    радиус границы: 40 пикселей;
}
# row3 {
    положение: относительное;
    ширина: 24vw;
    высота: 21vh;
    дисплей: гибкий;
    justify-content: center;
     выровнять элементы: гибкий конец;
     box-shadow: 2px 7px 16px 19px;
     маржа сверху: 51px;
     нижнее поле: 51px;
     
     маржа слева: 38 пикселей;
     радиус границы: 40 пикселей;
}
# row3 :: before {
    содержание: '';
    фон: url ('3.jpeg') центральная часть / обложка без повторов;
    позиция: абсолютная;
    верх: 0px;
    слева: 0px;
    ширина: 24vw;
    высота: 21vh;
    z-индекс: -1;
    радиус границы: 40 пикселей;
}

# top3 {
    выравнивание текста: центр;
    красный цвет;
    семейство шрифтов: «Ubuntu Mono», моноширинный;
}
# container4 {
    дисплей: сетка;
    столбцы-шаблон-сетки: повтор (автоподгонка, минмакс (350 пикселей, 1 пф));
    маржа: 41px;
}  
# row4 {
    ширина: 29vw;
    высота: 360 пикселей;
    граница: сплошной черный 2px;
    фон: url ('a1.jpeg') центральная часть / обложка без повторов; 
    дисплей: гибкий;
    justify-content: center;
    выровнять элементы: гибкий конец;
    радиус границы: 15 пикселей;
}
# row5 {
    ширина: 29vw;
    высота: 360 пикселей;
    граница: сплошной черный цвет 2px;
    фон: url ('a2.jpeg') центральная часть / обложка без повторов;
    дисплей: гибкий;
    justify-content: center;
    выровнять элементы: гибкий конец;
    радиус границы: 15 пикселей;
}
# row6 {
    ширина: 30vw;
    высота: 360 пикселей;
    граница: сплошной черный цвет 2px;
    фон: url ('a3.jpeg') центральная часть / обложка без повторов;
    дисплей: гибкий;
    justify-content: center;
    выровнять элементы: гибкий конец;
    радиус границы: 15 пикселей;
}
/ * Разработка нижнего колонтитула * /
нижний колонтитул {
    выравнивание текста: центр;
}
/ * Разработка контактов * /
#Свяжитесь с нами{
    ширина: 100ввт;
    высота: 100вх;
    дисплей: гибкий;
    flex-direction: столбец;
    align-items: center;
    цвет фона: серый;
}
.form-shape input, .form-shape select, .form-shape textarea {
   ширина: 92%;
   набивка: 0,5 бэр;
}
/ * Изменение цвета заполнителя * /
:: placeholder {                  
    цвет: серый;
}
/ * Делаем веб-страницу адаптивной с помощью медиа-вопросов * /
@media only screen и (max-width: 1131px) {
    # row4 {
        ширина: 42вв;
    }
    # row5 {
        ширина: 45вв;
    }
    # row6 {
        маржа сверху: 20 пикселей;
        ширина: 90вв;
    }
}
Только экран @media и (min-width: 600px) и (max-width: 781px)
{
    # row4 {
        ширина: 84вв;
        маржа: авто;
        маржа слева: 22px;
    }
    # row5 {
        
        ширина: 84вв;
        маржа: авто;
        маржа сверху: 20 пикселей;
        маржа слева: 22px;
    }
    # row6 {
        ширина: 84вв;
        маржа: авто;
        маржа сверху: 20 пикселей;
        маржа слева: 22px;
    }
}
@media only screen и (max-width: 600px) {
    # row4 {
        ширина: 78vw;
        маржа: авто;
        маржа слева: 3 пикселя;
    }
    # row5 {
        
        ширина: 78vw;
        маржа: авто;
        маржа сверху: 20 пикселей;
        маржа слева: 3 пикселя;
    }
    # row6 {
        ширина: 78vw;
        маржа: авто;
        маржа сверху: 20 пикселей;
        маржа слева: 3px;
    }
}
@media only screen and (min-height: 1000px) {
    #navbar {
        высота: 10vh;
    }
    # container1 :: before {
        высота: 39vh;
    }
    # container1 {
        высота: 44vh
    }
}

    Выход:

    • 15,6-дюймовые ноутбуки:
    • iPhone 6/7/8 Plus:
    • iPad Pro:
Technical Scripter Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023