Kiến thức lập trình

Tạo Trang chủ cho Nhà hàng bằng HTML, CSS và Bootstrap – mã html cho menu nhà hàng

Byads_php

Th5 21, 2022

Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : mã html cho thực đơn nhà hàng

Điều kiện tiên quyết: HTML 5, CSS và Bootstrap

< span> HTML: HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản. Nó được sử dụng để thiết kế các trang web bằng ngôn ngữ đánh dấu. HTML là sự kết hợp của siêu văn bản và ngôn ngữ đánh dấu. Siêu văn bản xác định liên kết giữa các trang web. Ngôn ngữ đánh dấu được sử dụng để xác định tài liệu văn bản trong thẻ xác định cấu trúc của các trang web.

CSS: Trang tính kiểu xếp tầng, được gọi thân mật là như CSS, là một ngôn ngữ được thiết kế đơn giản nhằm mục đích đơn giản hóa quá trình làm cho các trang web trở nên hiển thị. CSS cho phép bạn áp dụng các kiểu cho các trang web. Quan trọng hơn, CSS cho phép bạn thực hiện điều này độc lập với HTML tạo nên mỗi trang web.

BOOTSTRAP: Bootstrap là một chương trình miễn phí và mở- bộ sưu tập công cụ nguồn để tạo các trang web và ứng dụng web đáp ứng. Đây là khung HTML, CSS và JavaScript phổ biến nhất để phát triển các trang web đáp ứng, ưu tiên thiết bị di động. Ngày nay, các trang web hoàn hảo cho tất cả các trình duyệt (IE, Firefox và Chrome) và cho mọi kích thước màn hình (Máy tính để bàn, Máy tính bảng và Điện thoại). Tất cả là nhờ các nhà phát triển Bootstrap – Mark Otto và Jacob Thornton của Twitter, mặc dù sau đó nó được tuyên bố là một dự án mã nguồn mở.

Dưới đây là mã nguồn để xây dựng Trang chủ Nhà hàng:

Phần HTML: Tên tệp là index.html

HTML

& lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

< / p>

& lt; head & gt;

& lt; < / code> meta bộ ký tự = "utf-8" & gt;

& lt; meta name = "viewport" content = " width = thiết bị - width,

Initial-scale = 1 , co-to-fit = không "& gt;

& lt; liên kết rel = " stylesheet " < code class = "color1"> href = "index.css" & gt;

< / p>

& lt; liên kết rel = "stylesheet" href =

" https://stackpath.bootstrapcdn.com/ bootstrap / 4.3.1 / css / bootstrap.min.css "

tính toàn vẹn =

"sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT" < / code>

crossorigin = " nặc danh " & gt;

& lt; title & gt; Trang web Nhà hàng & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; nav & gt;

& lt; ul class = "nav-flex-row" & gt;

& lt; li class = "nav-item" & gt;

& lt; a href = "# about" & gt; About & lt; / a & gt;

& lt; / li & gt;

& lt; li class = "nav-item" & gt;

& lt; a < code class = "color1"> href = "# đặt chỗ" & gt; Đặt chỗ & lt; / a & gt;

& lt; / li & gt;

& lt; li class = "nav -item " & gt;

< code class = "same"> & lt; a href = "# menu" & gt; Menu & lt; / a & gt;

& lt; / li & gt;

& lt; li class = "nav-item" & gt;

& lt; a href = "# shop " & gt; Mua sắm & lt; / a & gt; < / p>

& lt; / li & gt;

& lt; / ul & gt ;

& lt; / nav & gt;

< / code> & lt; phần class = "section-intro" & gt;

& lt; header & gt;

& lt; h1 & gt; Chào mừng đến với Fooddddie's

Nhà bếp & lt; / h1 & gt;

& lt; / header & gt;

& lt; div class = "link-to-book-wrapper" < code class = "trơn"> & gt;

& lt ; a class = " link-to-book "

href = "#reservations" & gt; Đặt bàn & lt; / a & gt;

& lt; / div & gt;

& lt; / phần & gt;

& lt; phần class = "về -section " & gt;

& lt; bài viết & gt;

& lt; h3 & gt;

Phần văn bản tại sao

nhà hàng là tốt nhất.

& lt; / h3 & gt;

& lt; p & gt;

Lorem ipsum dolor sit, amet consectetur

adipisicing elit. Một quos, voluptatum

Ill mollitia dolores libero placeat < / code>

nesciunt quasi adipisci impedit! Lorem < / p>

ipsum dolor sit, amet consectetur

< p class = "line number67 index66 alt2"> giảm giá. Từ những viên giải trí

dịu dàng và đau tự do là làm hài lòng

không thích nhận được từ bạn

lorem ipsum cà rốt, cà rốt cà chua

giảm giá. Từ những viên giải trí

dịu dàng và đau tự do là làm hài lòng

không thích để có được từ bạn lorem

đội là. < p class = "dòng number75 index74 alt2"> & lt; / p & gt;

& lt; / bài viết & gt;

& lt; / phần & gt;

& lt; div đây "carouselExampleControls"

lớp "băng chuyền trượt" dữ liệu đi xe "băng chuyền" & gt;

& lt; div lớp = "băng chuyền-bên" & gt;

& lt; div lớp "" & gt;

& lt; img src "img / food1.png"

lớp = "d-block M-100" alt "thức ăn" & gt;

& lt; / div & gt;

& lt; div lớp "băng chuyền -Item " & gt;

& lt; img src "img / food2.png"

lớp "d-block M-100" alt " F ood " & gt;

< lớp code = "đồng bằng"> & lt; / div & gt;

& lt; div class = < / code> "carousel-item" & gt;

< code class = "undefined space"> & lt; img src = "img / food3.png"

< code class = "undefined space"> class = "d-block w-100 " alt = " food " < code class = "trơn"> & gt;

& lt ; / div & gt;

& lt; / div & gt;

& lt; a class = " carousel-control-prev "

href = "# carouselExampleControls"

role = " button " < code class = "color1"> data-slide = "prev" & gt;

& lt; span class = "carousel-control-prev-icon"

aria-hidden = " true " & gt;

& lt; / span & gt;

& lt; span class = " sr-only " & gt; Trước đó & lt; / span & gt ;

& lt; / a & gt;

< / code> & lt; a class = "carousel-control-next"

< / code> href = "# carouselExampleControls"

< p class = "line number107 index106 alt2"> role = < code class = "string"> "button" data-slide = "tiếp theo" & gt;

& lt; span class = "carousel-control-next-icon"

aria-hidden = < code class = "string"> "true" & gt;

& lt; / span & gt;

& lt; span < / code> class = "sr-only" & gt; Tiếp theo & lt; / span & gt;

& lt; / a & gt;

& lt; / div < / code> & gt;

& lt; div class = "container" & gt;

& lt; div class = "row-flex" & gt;

& lt; div class = < code class = "string"> "flex-column-form" & gt;

& lt; h3 & gt;

Đặt chỗ

& lt; / h3 & gt;

& lt; form class = "media-center" < / code> & gt;

& lt; div class = "form-group" & gt;

& lt; p < code class = "trơn"> & gt;

Vui lòng để lại số của bạn, chúng tôi sẽ

c tất cả chỉ để đặt chỗ

& lt; / p & gt;

& lt; input type = < / code> "name" class = " form-control "

id = "exampleInputName1"

aria-descriptionby = " nameHelp "

placeholder = "Nhập tên của bạn" & gt;

< p class = "line number134 index133 alt1"> & lt; / div & gt;

& lt; div class = "form-group" & gt;

& lt; input type < / code> = "number" class = " form-control "

id = "exampleInputphoneNumber1"

placeholder = "Nhập số điện thoại của bạn" & gt;

& lt; / div & gt ;

& lt; nút type = "submit" class = "btn btn-primary" & gt;

Gửi

& lt; / nút & gt;

& lt; / form & gt;

& lt; / div & gt;

& lt; div class = "open-time" < code class = "trơn"> & gt;

& lt ; h3 & gt;

Thời gian mở cửa

& lt; / h3 & gt;

& lt; p < / code> & gt;

span & gt;

& lt; span & gt; Thứ sáu — Thứ bảy: 09:00 - 23 : 00 & lt; / span & gt;

& lt; span & gt ; Chủ nhật: 10:00 - 17:00 & lt; / span & gt;

& lt; / p & gt;

& lt ; / div & gt;

& lt; div class = "contact-address" & gt;

< p class = "line number158 index157 alt1"> & lt; h3 & gt;

Liên hệ

& lt; / h3 & gt;

& lt; p & gt;

& lt; span & gt; 410-602-8008 & lt; / span & gt;

& lt; span & gt; 15 Florida Ave & lt; / span & gt;

& lt; span < / code> & gt; Palo-Alto, 1111 CA & lt; / span & gt;

& lt; / p & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt; / < code class = "keyword"> div & gt;

< / p>

& lt; script src < mã class = "trơn"> = " https://code.jquery.com/jquery-3.3.1.slim.min.js "

toàn vẹn =

" sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo "

crossorigin = "nặc danh" & gt;

& lt; / script & gt;

& lt; script src =

" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js "

toàn vẹn =

"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

crossorigin = "nặc danh" & gt;

& lt; / script & gt;

& lt; script src =

" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js "

toàn vẹn =

"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x0xIM + B07jRM"

crossorigin = "nặc danh" & gt;

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

< strong> Phần CSS: Tên tệp là index.css

CSS

@ import url ( ' https://fonts.googleapis.com/css? family = Big + Shoulders + Text: 100, 300, 400, 500, 600, 700, 800, 900 & amp; display = swap ' );

. nav-flex-row {

display : flex;

flex- hướng < code class = "trơn">: row;

justify- nội dung : center ;

vị trí < code class = "trơn">: tuyệt đối ;

z-index : 100 ;

left : 0 ;

chiều rộng : 100% ; < / p>

padding : < / code> 0 ;

}

. nav-flex- row li {

text-decoration : không có ;

list-style-type : none ;

padding : 20px 15px < / p>

. nav-flex-row li a {

font-family : 'Big Shoulders Text' , thảo < code class = "trơn">;

color : # 000 < / code> ;

font-size < / p>

text-biến đổi : viết hoa ;

font-weight : 300 ;

}

. nav-flex-row li a: hover {

background : # E7E7E7 ;

}

. section-intro {

< p class = "line number34 index33 alt1"> height : < code class = "value"> 820px ;

< / code> background-image : url (img / foddiee.png);

background- size : cover;

display : flex;

flex- hướng : column;

justify- nội dung : center ;

align-items: center ;

}

. section-intro h 1 {

< code class = "keyword"> text-align : center ; < / code>

color : # 000 ;

< code class = "undefined space"> font-size : 4em < / code> ;

font-weight : 700 ;

}

. section-intro header {

display : flex;

flex: 4 ;

flex- hướng : row;

< code class = "trơn"> justify- nội dung : center ;

align-items: center ;

}

< p class = "line number57 index56 alt2">

. link-to-book-wrapper {

flex: 1 ;

}

. about-section {

display : flex;

< p class = "line number64 index63 alt1"> align-items: center ;

background-color : # f3f3f3 < / code> c 0 ;

padding : 50px 30px ;

}

.link-to-book {

color < / code> : # ffffff ;

display : block ;

border : 2px solid # ffffff ;

padding : 5px 10px ;

}

a.link-to-book: hover {

background-color : # ffffff ;

color : # 95999e ;

text-decoration : none ;

}

. about-section p,

. about-section h 3 {

text-align : center ;

width : 60% ;

margin : auto ;

font-family : 'Văn bản có vai lớn' , thảo luận ;

font-size : 1.8em ; < / code>

text-biến đổi : in hoa ;

}

. carousel-inner {

height : 700px ;

}

. Row-flex {

< code class = "undefined space"> display : flex;

flex- < / code> hướng : row;

}

. flex- column-form {

display < code class = "trơn">: flex;

flex- hướng : column;

< code class = "undefined space"> flex: 1 ;

margin : 30px 20px < / p>

. btn.btn-primary {

font-family : 'Big Shoulders Text' , thảo ;

color : # ffffff ;

background-color : # 95999e ;

text-biến đổi : viết hoa ;

font-size : 16px ;

padding : 5px 10px ;

letter-spacing : < / code> 2px ;

border : 0 ;

}

. btn.btn-primary: hover {

background-color < / p>

}

.opening-time,

. contact-address {

flex: 1 ;

margin : 30px 20px ;

font-size : 1.2em ;

}

. form-group p {

font-size : 1.2em ;

}

. open-time p span,

. contact-address p span {

hiển thị : block ;

}

@ media ( min-width : 577px ) và ( max-width : 800px ) {

. Section-intro {

height : 500px ;

}

. about-section p,

. about-section h 3 {

font-size : < code class = "value"> 20px ;

< / code> }

. carousel-inner {

height }

. row-flex {

display : flex;

flex- hướng : column;

}

}

@ media screen và ( max-width : 576px ) {

. section-intro {

height : 300px ;

}

. about- phần {

padding : 30px ;

}

. section-intro h 1 {

font -kích thước : 2em ;

< p class = "line number170 index169 alt1"> }

. about-section p,

. about-section h 3 {

font-size : 15px ;

}

. carousel-inner {

height : auto ;

}

. row -flex {

display : flex;

flex - hướng : column;

}

. row-flex h 3 {

font-size : 25px ;

text-align : center ;

}

< code class = "trơn">. form-group p {

font-size : 15px ;

}

. open-time p span,

. Contact-address p span {

font-size : 15px ;

text-align < mã class = "trơn">: center ;

}

} 

 < / pre> 
 


  Đầu ra:  


  






 






 Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề mã html cho menu nhà hàng

Create a Restaurant Menu with HTML & CSS Grid + Flexbox

alt

  • Tác giả: dcode
  • Ngày đăng: 2021-04-19
  • Đánh giá: 4 ⭐ ( 7271 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In today's video I'll be showing you how to use HTML, CSS Grid and Flexbox to create a responsive, mobile-friendly restaurant menu. This is a practical example of how to combine CSS Grid with Flexbox to build a layout.

    👩‍💻 SOURCE CODE:
    https://codepen.io/dcode-software/pen/dyNqJzJ

    Join this channel to get access to perks:
    https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g/join

    💜 Join my Discord Server:
    https://discord.gg/TXMQyvbpcA

    🎨 Download my Visual Studio Code theme:
    https://marketplace.visualstudio.com/items?itemName=dcode.dcode-theme
    Support me on Patreon:
    https://www.patreon.com/dcode

    Follow me on Twitter:
    @dcodeyt

    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

    dcode html css

Cộng đồng chia sẻ, download source code free, miễn phí

  • Tác giả: sourcecodefree.org
  • Đánh giá: 3 ⭐ ( 3450 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cộng đồng chia sẻ source code free, website, phần mềm, đồ án môn học, luận văn tốt nghiệp miễn phí

Mã QR cho menu nhà hàng: đặc quyền sử dụng

  • Tác giả: me-qr.com
  • Đánh giá: 4 ⭐ ( 4298 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu lý do tại sao bạn cần sử dụng mã QR cho nhà hàng và quán cà phê. Tạo QR cho menu và đánh giá. Áp dụng mã QR cho doanh nghiệp của bạn.

Menu Nhà Hàng, Menu Quán nước, Menu quán ăn...

  • Tác giả: ducquyencards.com
  • Đánh giá: 5 ⭐ ( 4930 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyên gia công sản xuất Menu cho các nhà in, menu nhà hàng, menu quán ăn, menu quán nước, menu nhựa, menu lò xo, menu nẹp ốc, menu xếp 3, menu 1 tấm, in nhanh, in nhanh KTS, thiệp cưới in KTS, In- Cắt Tem nhãn – đề can, In Tờ rơi – Brochure - Catalogue,

35 menu CSS và HTML cho di động, blog, Thương mại điện tử và hơn thế nữa

  • Tác giả: www.creativosonline.org
  • Đánh giá: 3 ⭐ ( 4591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 35 menu trong CSS và HTML nhằm vào thiết bị di động, blog, Thương mại điện tử và tất cả các loại trang web cần thiết để quản lý cấu trúc của một trang web.

15 mẫu HTML miễn phí và cao cấp cho nhà hàng

  • Tác giả: vi.blogpascher.com
  • Đánh giá: 3 ⭐ ( 2527 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể mua một chủ đề HTML cao cấp cho một trang web nhà hàng mà sau đó bạn có thể tùy chỉnh để đáp ứng nhu cầu chính xác của bạn và có một trang web tuyệt vời và chạy ngay lập tức.

Tổng hợp các template nhà hàng cực đẹp miễn phí

  • Tác giả: www.ngoisaoso.vn
  • Đánh giá: 4 ⭐ ( 2866 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn đang có kế hoạch mở một nhà hàng mới hoặc một quán cà phê, xây dựng một trang web nhà hàng với một thiết kế đẹp là điều cần thiết. Nó sẽ giúp doanh...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python MySQL - Chèn dữ liệu - Chèn kết nối mysql python

By ads_php

Related Post

Kiến thức lập trình

Hướng dẫn cơ bản về lệnh gọi lại JavaScript – javascript gọi lại là gì

Th6 25, 2022 ads_php
Kiến thức lập trình

4 cách dễ dàng để thêm biểu tượng trong HTML CSS (Ví dụ đơn giản) – cách thay đổi biểu tượng html của trang web

Th6 25, 2022 ads_php
Kiến thức lập trình

TẠO CHẾ ĐỘ XEM (Transact-SQL) – Máy chủ SQL – t-sql tạo chế độ xem ví dụ

Th6 25, 2022 ads_php

You missed

Kiến thức lập trình

Hướng dẫn cơ bản về lệnh gọi lại JavaScript – javascript gọi lại là gì

Th6 25, 2022 ads_php
Kiến thức lập trình

4 cách dễ dàng để thêm biểu tượng trong HTML CSS (Ví dụ đơn giản) – cách thay đổi biểu tượng html của trang web

Th6 25, 2022 ads_php
Kiến thức lập trình

TẠO CHẾ ĐỘ XEM (Transact-SQL) – Máy chủ SQL – t-sql tạo chế độ xem ví dụ

Th6 25, 2022 ads_php
Kiến thức lập trình

Cách đọc tệp văn bản bằng Python (Python mở) • datagy – đọc từ tệp văn bản python

Th6 25, 2022 ads_php