Cách sử dụng mẫu này
Thiết lập thẻ title rất quan trọng. Hãy chọn từ ngữ cẩn thận và nhập chính xác.
Trước tiên, hãy mở mã nguồn HTML và chỉnh sửa
<title>Mẫu trang webcho phòng khám tư,văn phòng,công ty nhỏ</title>
sao cho phù hợp với tên trang web của bạn, ví dụ:
<title>Phòng khám bác sỹ Bơ</title>
Nếu muốn tối ưu hóa SEO, hãy thêm các từ quan trọng vào đầu tiêu đề.
Thay đổi bản quyền.
Tiếp theo, ở phần dưới của HTML, thay đổi
Copyright© Phòng khám bác sỹ Bơ All Rights Reserved.
thành tên trang web của bạn.
Thay đổi thẻ meta.
Hãy mở mã nguồn HTML và thay đổi thẻ meta.
Ở phần trên của mã nguồn, thay đổi
content="Nhập mô tả trang web tại đây"
bằng mô tả về trang web của bạn. Mô tả này có thể xuất hiện trong kết quả tìm kiếm, vì vậy hãy viết một mô tả ngắn gọn và hấp dẫn.
Thay đổi thẻ alt của logo h1
Trong HTML, thay đổi
alt="Phòng khám bác sỹ Bơ"
thành tên trang web của bạn.
Thay đổi màu sắc của mẫu
Thay đổi màu sắc tổng thể rất dễ dàng.
Mở file style.css trong thư mục css và thay đổi các cài đặt trong
:root {
để thay đổi màu sắc của toàn bộ trang web.
* Có thể cần điều chỉnh bảng hoặc khối cột nếu cần thiết.
Kích thước văn bản "Nhỏ" và "Lớn"
Nếu muốn thay đổi kích thước văn bản "Nhỏ" và "Lớn"
Mở file style.css trong thư mục css và thay đổi các cài đặt trong
/*Cài đặt kích thước văn bản
theo ý muốn.
Nếu muốn đặt "Lớn" làm mặc định
Mở file fontSizeChanger.js trong thư mục js và đọc các chú thích để thay đổi.
Về hình ảnh biểu tượng (Giải thích về Font Awesome)
Các hình ảnh không nằm trong thư mục images đều là tài nguyên của Font Awesome.
Trang chủ Font Awesome
Danh sách biểu tượng Font Awesome (phiên bản 6)
Có hai cách để chèn biểu tượng vào HTML: sử dụng thẻ i trực tiếp hoặc sử dụng các yếu tố giả trong CSS.
Để thay thế biểu tượng, hãy đọc hướng dẫn của chúng tôi.
Các thẻ và file cần thiết để sử dụng Font Awesome.
Đoạn mã "Font Awesome" được đọc ở đầu file style.css trong thư mục css.
Có thể gặp vấn đề nếu đã qua nhiều năm.
Nếu mẫu đột ngột hoạt động không đúng, hãy thay đổi phiên bản file Font Awesome được đọc từ CDN ở đầu file style.css và kiểm tra xem có hoạt động lại không.
Về menu trên
Khi chiều rộng màn hình nhỏ hơn 900px, menu chính sẽ trở thành khối mở/đóng.
Để thay đổi giá trị này, mở file main.js trong thư mục js và thay đổi
if(window.innerWidth <= 900)
giá trị từ 900.
Về menu thả xuống
Các menu "Về chúng tôi" và "Dịch vụ y tế" có menu thả xuống.
Không cần cài đặt đặc biệt để sử dụng menu thả xuống, nhưng hãy đảm bảo đặt chúng vào bên trong thẻ li cha.
Ví dụ đúng
<li><a href="">Menu cha</a>
<ul>
<li><a href="list.html">Menu thả xuống</a></li>
<li><a href="list.html">Menu thả xuống</a></li>
</ul>
</li>
Ví dụ sai
<li><a href="">Menu cha</a></li>
<ul>
<li><a href="list.html">Menu thả xuống</a></li>
<li><a href="list.html">Menu thả xuống</a></li>
</ul>
Về khối trigger-point (rất quan trọng)
Mẫu này sử dụng khối trigger-point để giữ menu ở đầu màn hình khi cuộn trang.
Khối này giúp thay đổi độ trong suốt và chiều cao sau khi đạt đến điểm nhất định, vì vậy đừng xóa nó.
Hãy đảm bảo bao gồm tất cả các yếu tố ở trên khối trigger-point trong khối này.
Về hình ảnh trình chiếu trên trang chủ
File slide.css trong thư mục css và file main.js trong thư mục js chứa các cài đặt cho trình chiếu.
Trong slide.css, bạn có thể thay đổi các cài đặt về hình ảnh và tốc độ chuyển đổi.
Trong main.js, bạn có thể thay đổi thời gian hiển thị của mỗi slide.
Không cần cài đặt thêm khi thêm hình ảnh, nhưng lưu ý không sử dụng hình ảnh quá lớn hoặc quá nhiều để tránh làm chậm trang.
Hình ảnh có tỷ lệ khung hình 2:1 được thiết lập để đáp ứng
Mẫu này sử dụng hình ảnh 2:1 để đáp ứng.
Nếu muốn hiển thị hình ảnh với tỷ lệ khác, hãy điều chỉnh
#mainimg {
trong slide.css.
Ví dụ, với hình ảnh 16:9, hãy thay đổi
padding-top: 56%;
trong slide.css.
Về văn bản trên trình chiếu
Văn bản được nhập trực tiếp trong HTML, hãy thay đổi theo nhu cầu.
Để thay đổi vị trí văn bản, hãy điều chỉnh justify-content và text-align trong slide.css.
Nếu không có cài đặt (slide2), văn bản sẽ căn trái.
Để căn giữa (slide1 và slide3), sử dụng:
justify-content: center;
text-align: center;
Để căn phải, sử dụng:
justify-content: flex-end;
text-align: right;
Về hình ảnh trình chiếu
Hình ảnh được cung cấp sẵn, bạn có thể sử dụng hoặc chỉnh sửa.
Các hình ảnh khác ngoài trình chiếu cũng được tạo từ AI và bạn có thể sử dụng chúng.
Thay đổi hình ảnh
Để thay đổi hình ảnh, hãy ghi đè file hình ảnh trong thư mục images.
Nếu muốn thay đổi phần mở rộng của file hình ảnh, hãy chỉnh sửa slide.css.
Hãy nén hình ảnh để giảm dung lượng.
Nếu hình ảnh quá lớn, trang có thể bị chậm khi tải.
Về trình chiếu hình thu nhỏ trên trang chủ
Sử dụng slick cho trình chiếu. Trang chủ slick
Chúng tôi không hỗ trợ ngoài hướng dẫn trong mẫu và trên trang web của chúng tôi, hãy tìm kiếm trên Google để biết thêm chi tiết.
Hãy chuẩn bị kích thước ảnh trước để chúng hiển thị đẹp
Bạn có thể thay đổi số lượng ảnh. Chỉ cần sao chép khối ảnh hiện có trong HTML và thay đổi tên file ảnh.
Cài đặt trình chiếu có thể chỉnh sửa trong slick.js trong thư mục js.
Các thẻ và file cần thiết để sử dụng slick
1. Thẻ "jQuery file" ở cuối HTML.
2. Thẻ "Trình chiếu (slick)" phía dưới.
3. File js/slick.js trong thư mục js.
Về biểu tượng "Thông báo" trên trang chủ
Văn bản trong biểu tượng được nhập trực tiếp trong HTML, hãy chỉnh sửa nếu cần.
Để thay đổi màu nền, hãy chỉnh sửa style.css trong thư mục css:
.new dt span
hoặc
.new .icon-bg1
thay đổi màu nền.
Để thêm biểu tượng mới, sao chép khối .new .icon-bg1 và thay đổi tên class, ví dụ .icon-bg2, và đặt màu nền mong muốn.
Sau đó, trong HTML, sử dụng:
<span class="icon-bg2">〜〜〜</span>
Hãy lưu ý không thêm quá nhiều văn bản để tránh làm vỡ layout.
Danh sách ul, ol
- Đây là phần tử ol. Văn bản mẫu.
- Đây là phần tử ol. Văn bản mẫu.
- Đây là phần tử ol. Văn bản mẫu.
- Đây là phần tử ul. Văn bản mẫu.
- Đây là phần tử ul. Văn bản mẫu.
- Đây là phần tử ul. Văn bản mẫu.
Về hiệu ứng xuất hiện
Các ví dụ về hiệu ứng xuất hiện được tổng hợp trong sample_inview.html.
Bạn có thể dễ dàng thay đổi hoặc tạo hiệu ứng riêng.