Hướng dẫn travel website using html and css - trang web du lịch sử dụng html và css
|
Show Trang web du lịch sử dụng HTML CSS JavaScript Trong video này, tôi sẽ chỉ cho bạn cách tạo trang web du lịch đáp ứng bằng cách sử dụng HTML CSS JavaScript Trang web trực tiếp GitHub Repo Xin chào, tôi là Sadee (WebDev) trong kênh này, tôi tạo video về trang web đáp ứng hoàn chỉnh. Bạn có thể kiểm tra kênh của tôi 👇 Kênh của tôi: CodeWithSadee 🔔 Đăng ký: Đăng ký ngay Các liên kết thiết yếuTệp khởi động Dấu thời gian0:00 - Bản demo 3:06 - Cấu trúc tập tin 3:34 - Dự án ban đầu 8:44 - Tiêu đề 19:31 - Anh hùng Phần 25:04 - Điểm đến Phần 32:57 - Chuyến tham quan phổ biến Phần 42:30 - Giới thiệu Phần 48:32 - Blog Phần 55:42 - Footer 1:09:48 - Truy vấn truyền thông Nếu bạn đang xem tin nhắn này, điều đó có nghĩa là chúng tôi đang gặp khó khăn trong việc tải tài nguyên bên ngoài trên trang web của chúng tôi. Nếu bạn đứng sau một bộ lọc web, vui lòng đảm bảo rằng các tên miền *.kastatic.org và *.kasandbox.org không bị chặn.*.kastatic.org and *.kasandbox.org are unblocked. Xin chào mọi người, tôi hy vọng bạn đang làm rất tốt. Tôi trở lại với một blog khác trong đó chúng tôi sẽ học cách tạo trang web du lịch phản hồi bằng cách sử dụng HTML CSS và Bootstrap.Travel website using HTML CSS and Bootstrap. Tiếp theo, chúng tôi sẽ tạo một thư mục bên trong máy tính bất kỳ ổ đĩa nàoTravel-Website Tiếp theo chúng tôi sẽ tạo thư mục hình ảnh bên trong dự án của chúng tôi. Trong thư mục này, chúng tôi có thể giữ hình ảnh mà chúng tôi sẽ sử dụng trong dự án của chúng tôiImage folder inside our project.in this folder we can keep our images which we will use in our project Bạn có thể tải xuống hình ảnh từ liên kết bên dưới: 170 Travel_site_img.zip - Google Drive Tiếp theo, chúng tôi sẽ tạo một tệp chỉ mục.html trong dự án của chúng tôiindex.html in our project Tiếp theo Tạo CSS File Style.css bên trong dự án của chúng tôi.Style.css inside our project. Đầu tiên chúng tôi sẽ viết một số mã cơ bản bên trong tệp CSS sẽ được áp dụng cho tất cả các phần tử. * là một bộ chọn được sử dụng cho tất cả các phần tử* is a selector that used for all element Tiếp theo, chúng tôi sẽ liên kết tệp CSS với tệp HTML bằng cách sử dụng thẻ liên kết trong tệp HTML. Tiếp theo, chúng tôi thêm liên kết bootstrap bên trong tệp html bằng thẻ liên kếtbootstrap link inside html file using Link tag Bây giờ chúng tôi sẽ tạo phần Chúng tôi sẽ cung cấp tiêu đề tên lớp.header. Thẻ phần bên trong Chúng tôi sẽ tạo Div cho rằng chúng tôi cung cấp cho container lớp là lớp bootstrap. Điều đó sẽ thêm một số khoảng trống từ bên trái và bên phải.div for that we give class container that is a Bootstrap class.that will add some space from left and right side. Tiếp theo chúng tôi sẽ viết mã CSS cho lớp tiêu đề bên trong Style.css.header class inside style.css. Chúng tôi sử dụng chiều cao cho phần phần của chúng tôi và chúng tôi sẽ cung cấp phần hình ảnh nền của chúng tôi cho rằng chúng tôi đang sử dụng màu trên hình ảnh nền.height for our section part and we will give background-image our section part for that we are using color on background-image. Kích thước nền: Bìa; Nó sẽ bao gồm tất cả các trang, gắn nền: Đã sửa; Vì vậy, hình ảnh của chúng tôi sẽ phù hợp đúng trong trang. Sử dụng vị trí nền: Trung tâm; Hình ảnh của chúng tôi sẽ ở giữa trang.linear-gradient: (RGBA (0,0,0,0,0.6), RGBA (0,0,0,0,0.6)); Chúng tôi đang thực hiện màu sắc trên hình ảnh.; it will cover all page,background-attachement:fixed; So our image will alight properly in page.Using background-position:center; our image will be in center of page.linear-gradient:(rgba(0,0,0,0.6),rgba(0,0,0,0.6)); we are performing color on image. Nhấp tiếp theo bên phải vào tệp index.html. Sau đó, hãy mở khi mở với máy chủ trực tiếp.index.html file.after thatclick on open with live server. Tự động trang của chúng tôi sẽ mở trong trình duyệt. our page will open in browser. Tiếp theo, chúng tôi sẽ thêm nút logo và đăng nhập vào bên trong index.htmllogin button in inside index.html Bây giờ logo và nút sẽ được hiển thị trên trang của chúng tôi trong trình duyệt bên dưới.logo and button will be display on our page in browser below. Tiếp theo chúng tôi sẽ sử dụng CSS để giữ những hình ảnh này ở đúng nơi. css for keeping these images on right places. Đối với logo, chúng tôi sẽ sử dụng chiều rộng: 170px; Nó sẽ làm giảm kích thước của logo của chúng tôi.Float: trái; Sẽ giữ logo bên trái của màn hình trang web của chúng tôiwidth:170px; it will reduce size of our logo.float:left; will keep our logo left side of web page screen Đối với nút Chúng tôi sẽ sử dụng chiều rộng: 100px; Đệm: Padding 8px 0 được sử dụng để hiển thị văn bản ở nút bên trong nút. Chúng tôi sử dụng phao: Phải; thuộc tính để nút của chúng tôi sẽ được hiển thị ở phía bên phải của trang của chúng tôi. Văn bản nút của chúng tôi sẽ được hiển thị bằng màu trắng.background: trong suốt; Sử dụng thuộc tính này, chúng tôi có thể thấy hình ảnh nền của chúng tôi từ nút.outline: Không có! Quan trọng; sẽ loại bỏ đường viền bên ngoài khỏi nút của chúng tôi.button we will use width:100px; padding:8px 0 padding is used to display the text in center inside button.we use float:right; property so our button will be display on right side of our page.border-radius:50px will give our button border rounded.color:#fff; our button text will be display in white color.background:transparent; using this property we can see our background image from button.outline:none!important; will remove outside border from our button. Sau nút này, chúng tôi sẽ thêm tiêu đề bên trong Index.html. Bây giờ chúng tôi sẽ sử dụng CSS bên trong lớp tiêu đề văn bản-Align: Center; Nó sẽ di chuyển tiêu đề của chúng tôi ở trung tâm của trang.color: #FFF; Nó sẽ hiển thị văn bản tiêu đề của chúng tôi với màu trắng.header class text-align:center; it will move our title in center of page.color:#fff; it will display our heading text in white color. Bây giờ tiêu đề của chúng tôi sẽ hiển thị trong trình duyệt. Tiếp theo, chúng tôi phải giữ tiêu đề của chúng tôi ở giữa trang cho rằng chúng tôi sẽ sử dụng thuộc tính bên trong Style.cssTitle in center of page for that we will use below property inside style.css Các thuộc tính này chúng tôi sử dụng cho .Header H2 Tag.Padding-top: 200px; Nó sẽ di chuyển tiêu đề của chúng tôi từ phía trên xuống dưới. kích thước phông chữ: 55px; .header h2 tag.padding-top:200px; it will move our Title from top to bottom side.padding-bottom:0px; font-size:55px; Đối với đoạn văn, chúng tôi sử dụng lề: 18px 0px;margin:18px 0px; Bây giờ đi đến trong trình duyệt Tiêu đề trang của chúng tôi sẽ được hiển thị ở giữa trang.Title will be display in center of page. Tiếp theo, chúng tôi thêm một hộp tìm kiếm và nút cho chúng tôi sử dụng thẻ div bên trong tệp index.htmlsearch box and button for that we use div tag inside index.html file Bây giờ chúng tôi có thể xem trang của chúng tôi trên trình duyệt. Tiếp theo, chúng tôi sẽ thiết kế hộp đầu vào và nút đầu vào của chúng tôi bằng CSS Inside Style.css. Đối với thẻ div, chúng tôi đã sử dụng một số thuộc tính như chiều rộng: 90%; Biên giới-Radius: 30px; Khách sạn này sẽ cung cấp đường viền tròn. Bối cảnh: #FFF; Sử dụng nền thuộc tính này sẽ là phần đệm trắng: 2px; và lề: 2px;input box and button using css inside style.css. for div tag we used some property like width:90%; border-radius:30px ; this property will give round border. background:#fff; using this property background will be white padding:2px;and margin:2px; Đối với hộp tìm kiếm, chúng tôi đã sử dụng kiểm soát biểu mẫu là một lớp bootstrap. Chúng tôi sẽ sử dụng Inside Style.css.Search box we used form-control is a bootstrap class.we will use inside style.css. .form-control{ Biên giới: 0! Quan trọng; border-radius:30px!important; margin:2px; box-shadow:none!important; } Tiếp theo, chúng tôi đã sử dụng CSS cho nút cho rằng chúng tôi đã cho lớp .Input-group-text bên trong style.cssbutton for that we given class .input-group-text inside style.css sử dụng chiều rộng: 100px; E điều khiển chiều rộng của nút. Và chúng tôi thực hiện màu trên nút bằng hình ảnh nền: tuyến tính-gradient (#00FF7E,#1F3D90); Biên giới: 0! Quan trọng; Nó sẽ không hiển thị bất kỳ đường viền nào trên nút.Color: #FFF; Nó sẽ hiển thị văn bản nút của chúng tôi bằng màu trắng.width:100px; e control width of button.and we performing color on button using background-image:linear-gradient(#00ff7e,#1f3d90); border:0!important; it will not display any border on button.color:#fff; it will display our button text in white. .input-group-text{ Chiều rộng: 100px; background-image:linear-gradient(#00ff7e,#1f3d90); border:0!important; color:#fff!important; Đệm: 0 25px! Quan trọng; border-radius:30px!important; box-shadow:none; } Tiếp theo đi đến trình duyệt và kiểm tra hộp đầu vào. Tiếp theo, chúng tôi sẽ một phần khác bên trong tệp index.html phần đó sẽ dành cho chức năng tính năng.index.html file that section will be for features functionality. Tiếp theo, chúng tôi sẽ thiết kế phần Destinatin tính năng của chúng tôi bằng CSS.feature destinatin section using css. Tiếp theo chúng tôi sẽ kiểm tra tiêu đề phần của chúng tôi ở trung tâm trong trình duyệt. Tiếp theo, chúng tôi sẽ hiển thị hình ảnh bên trong phần nổi bật INDEX.html Tệp.Inide Phần thứ hai Chúng tôi tạo thùng chứa bên trong hàng bên trong hàng bên trong chúng tôi tạo cột. Chúng tôi đang hiển thị hình ảnh trong cột.image inside featured section index.html file.inside second section we create container inside container row inside row we create column.we are displaying image in column. và kiểm soát hình ảnh bằng chiều rộng: 100%; bên trong phong cách.csswidth:100%; inside style.css Bây giờ chúng ta có thể thấy hình ảnh trong trang của chúng tôi trên trình duyệt. Tiếp theo, chúng tôi sẽ hiển thị giá và xếp hạng bên dưới hình ảnh. Đối với chúng tôi phải thêm hai div bên trong index.htmltwo div inside index.html Đầu tiên chúng ta phải thêm CDN fontawmess bên trong index.html bằng thẻ liên kết.fontawesome cdn inside index.html using Link tag. Bây giờ giá và xếp hạng của chúng tôi sẽ được hiển thị trong trang của chúng tôi. Chúng tôi sẽ thiết kế giá của chúng tôi bằng CSS Code.Inside .Price Class Chúng tôi đã sử dụng nền:#FF5722; Vì vậy, nó sẽ hiển thị màu sau giá của chúng tôi. Giá của chúng tôi sẽ hiển thị ở trung tâm..price class we used background:#ff5722; so it will display color behind our price.border-radius:50% it will give rounded border around our price.using padding:10px; our price will display in center. Bây giờ giá của chúng tôi có thiết kế rất đẹp. Hãy trình duyệt và kiểm tra trang của chúng tôi. Bây giờ chúng tôi thiết kế đánh giá bằng cách sử dụng phao CSS. cách sử dụng: Phải; Phông chữ xếp hạng nó sẽ di chuyển sang bên phải của hình ảnh.background: #FFF; nó sẽ hiển thị ngôi sao xếp hạng dữ liệu trong màu trắng. Dưới cùng: -1px; Nó sẽ hiển thị xếp hạng dưới cùng của hình ảnh.float:right; it rating fonts will move to right side of image.background:#fff; it will display data rating star in white color.using bottom:-1px; it will display rating bottom of the picture. Để thiết kế biểu tượng đánh giá, chúng tôi đã sử dụng kích thước phông chữ: 15px; Nó sẽ kiểm soát kích thước của sao và màu sắc:#ff57222;rating icon we used font-size:15px; it will control size of star and color:#ff57222; Bây giờ chúng tôi truy cập trình duyệt và làm mới trang của chúng tôi. Xếp hạng của chúng tôi được thiết kế hoàn toàn. Tiếp theo chúng ta phải thêm một tiêu đề bên dưới hình ảnh.Title below image. Truy cập trình duyệt và kiểm tra trang của chúng tôi. Tiếp theo chúng tôi sẽ thiết kế tiêu đề bằng CSS Code trong Style.css. Đệm: 20px; sẽ cung cấp không gian giữa hình ảnh và title.text-align: Justify; sẽ giữ cho dòng của chúng tôi giống nhau. Đối với tiêu đề, chúng tôi sử dụng trọng lượng phông chữ: 600%; Nó sẽ hiển thị tiêu đề của chúng tôi trong một số văn bản táo bạo.Margin-top: 20px; Sẽ cho không gian từ hình ảnh. will give space between image and title.text-align:justify; will keep our line same order.for heading we use font-weight:600%; it will display our heading in some bold text.margin-top:20px; will give space from image. Tiếp theo chúng tôi sẽ truy cập trình duyệt và sẽ xem trang của chúng tôi. Tiếp theo, chúng tôi sẽ sao chép PASTE bên dưới mã thành hai cột nữa. Và chúng tôi sẽ thay đổi đường dẫn hình ảnh và giá của chúng tôi .Below là pic mã cột thứ hai của tôi.copy paste below code into two more column.and we will change our image path and price.below is my second column code pic. Tiếp theo là hình ảnh mã cột thứ ba. Bây giờ chúng tôi truy cập trình duyệt của chúng tôi và trang của chúng tôi dưới đây. Chúng tôi thực hiện một số CSS trên lớp hộp tính năng đó.css on that feature-box class. Tiếp theo chúng tôi sẽ tạo một phần khác. Sử dụng cho bộ sưu tập này. Chúng tôi sẽ viết mã CSS trong style.css. Chúng tôi sẽ sử dụng đệm: 100px 0; Nó sẽ cung cấp không gian từ nội dung hàng đầu và chúng tôi sẽ cung cấp nhẹ bằng cách sử dụng nền: #efefef; Màu sắc cho phần Thư viện của chúng tôi.css code in style.css. we will use padding:100px 0; it will give space from top content and we will give lightweight using background:#efefef; color for our gallery section. Tiếp theo chúng ta sẽ viết mã HTML bên trong Index.html. Chúng tôi sẽ thực hiện CSS Inside Style.css. Chúng tôi sẽ thực hiện chuyển đổi trên hình ảnh. css inside style.css.we will perform transition on image. Bây giờ chúng ta có thể xem hình ảnh bộ sưu tập trên trang trong trình duyệt. Tiếp theo chúng tôi sẽ viết mã CSS cho tiêu đề hình ảnh dưới đây. Bây giờ chúng tôi có thể kiểm tra hình ảnh hoặc tiêu đề trong trình duyệt trang của chúng tôi. Tiếp theo, chúng tôi sẽ sao chép Paste của Tag thẻ HTML bên trong Cột Phần bộ sưu tập. Bây giờ trang của chúng tôi trông rất đẹp. Tiếp theo, chúng tôi tạo một phần khác trong HTML cho biểu ngữ trong nền Chúng tôi sử dụng hình ảnh với sự trợ giúp của CSS.section in html for banner in background we use image with the help of css. Tiếp theo chúng tôi sẽ thực hiện CSS trên mã đó. Chúng tôi sử dụng hình ảnh nền CSS: URL (Image/Banner2.jpg); Nó sẽ hiển thị hình ảnh trong nền. Chúng tôi thực hiện vị trí nền: trung tâm; Chúng tôi đang bao gồm kích thước bằng cách sử dụng kích thước nền: bìa; Thuộc tính.background-image:url(image/banner2.jpg); it will display image in background.we perform background-position:center; we are covering size using background-size:cover; property.we fixed size of image using background-attachment:fixed; Bây giờ trang của chúng tôi chúng tôi có thể thấy trong trình duyệt. Tiếp theo, chúng tôi viết mã CSS cho tiêu đề và đoạn vănheading and paragraph Bây giờ biểu ngữ của chúng tôi sẽ trông rất đẹp. Tiếp theo, chúng tôi sẽ tạo một nút khác trong phần biểu ngữ bên trong index.htmlbutton column in banner section inside index.html Tiếp theo chúng tôi sẽ viết mã CSS cho nút bên trong Style.csscss code for button inside style.css Tiếp theo đi đến trình duyệt và chúng tôi có thể kiểm tra nút của chúng tôi được thiết kế hoàn toàn. Tiếp theo, chúng tôi sẽ tạo một phần khác để đánh giá người dùng trong tệp HTML.section for user-review in html file. Bây giờ chúng tôi viết mã CSS cho phần phản hồi của người dùng trong style.css.user-feedback section in style.css. Bây giờ chúng tôi sẽ thấy trang đánh giá người dùng được thiết kế trong trình duyệt. Tiếp theo, chúng tôi sẽ viết mã HTML cho chân trang bên trong index.html. Chúng tôi sử dụng hình ảnh trong cột đầu tiên. Hình ảnh chúng tôi viết một số đoạn. Chúng tôi đang hiển thị hai cột bên dưới pic.image we write some paragraph .we are displaying two columns below pic. Tiếp theo chúng tôi viết mã CSS trên chân trang.css code on footer. Tiếp theo, chúng tôi viết mã HTML cho chân trang thứ ba và thứ tư trong index.html. Tiếp theo chúng tôi thiết kế tất cả các cột chân trang trong style.css. Tiếp theo đi đến trình duyệt và chúng tôi sẽ thấy thiết kế hoàn chỉnh chân trang của chúng tôi bằng CSS. Với trang web du lịch của chúng tôi đã hoàn tất. Bây giờ bạn có thể kiểm tra trang web của chúng tôi cũng chịu trách nhiệm cho thiết bị nhỏ. Bạn có thể tải xuống Liên kết Kho lưu trữ GitHub của tôi. https://github.com/jitu001995/HTML-CSS-JS-Project.git Tôi có thể tạo một trang web chỉ sử dụng HTML và CSS không?Câu trả lời ngắn gọn là có, bạn có thể xây dựng một trang web đơn giản chỉ với HTML và CSS.Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự tuyệt vời và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.yes, you can build a simple website with just HTML and CSS. However, if you want to start building some really cool websites, and have more flexibility in what you can do, you need to use JavaScript, a backend language, web hosting, and databases.
Trang web nào là tốt nhất của HTML và CSS?Biên tập viên HTML và CSS tốt nhất.. Văn bản siêu phàm .. TextPad.. BBEdit.. Komodo ide .. Mã Visual Studio .. Bluefish.. Làm cách nào để tạo một trang web du lịch?Làm thế nào để tạo một trang web du lịch (thực sự kiếm được tiền).. Bước 1: Chọn một hốc (bắt đầu với một hốc xác định sau đó làm việc rộng) .... Bước 2: Tìm ra những gì bạn đang bán..... Bước 3: Chọn một nền tảng..... Bước 4: Tìm lưu trữ..... Bước 5: Tạo nội dung..... Bước 6: Tìm trợ giúp & quy mô..... Bước 7: Monetize & Cải thiện .. |
