GIAO DIỆN WEBSITE

Mình code 3 trang chính theo thứ tự trang giới thiệu, thông báo và cuối cùng là trang chính với một bức thư tình. Mình chọn font chữ dạng script (viết tay) để cho nó giống một bức thư thật sự. Dưới đây là hình ảnh minh họa cho 3 trang chính của mình.

TRANG GIỚI THIỆU

03 03 2018 05 46 54 - Share code web tỏ tình mới nhất 2018
03 03 2018 05 48 04 - Share code web tỏ tình mới nhất 2018

KHI MỞ TRÊN ĐIỆN THOẠI XIAOMI A1 CỦA MÌNH.

03 03 2018 05 50 53 - Share code web tỏ tình mới nhất 2018
03 03 2018 05 51 07 - Share code web tỏ tình mới nhất 2018
Trang giới thiệu khi mới vào sẽ có hiệu ứng vẽ tim bằng svg và nhấp nháy rất dễ thương. Hai nút bấm trên dưới với hai chức năng khác nhau. Mình sẽ để bạn tự khám phá nhé !! Khi bạn rê chuột lên chữ Click Here cũng sẽ có hiệu ứng.
Khi bạn ấn vào chữ Click Here thì sẽ chuyển sang trang 2 và đưa thông báo cho cô ấy.

TRANG 2

03 03 2018 05 54 38 - Share code web tỏ tình mới nhất 2018

TRANG 2 TRÊN GIAO DIỆN ĐIỆN THOẠI

03 03 2018 05 57 22 - Share code web tỏ tình mới nhất 2018
Lá thư sẽ nhảy nhảy dễ thương lắm. Trang này là trang có hiệu ứng nhiều nhất và cũng mất nhiều công sức của mình lắm đấy. Khi bạn rê chuột vào lá thư sẽ được chuyển sang trang 3. Nơi đó sẽ có một lá thư tình !!!

TRANG 3

03 03 2018 05 58 47 - Share code web tỏ tình mới nhất 2018

TRANG 3 TRÊN ĐIỆN THOẠI

03 03 2018 05 59 58 - Share code web tỏ tình mới nhất 2018
Đây chỉ là bức thư tình đơn giản chúng ta sẽ tự viết. Nhưng mình chắc bất cứ cô gái nào nhận lá thư như thế này cũng cảm động lắm.

HƯỚNG DẪN SỬ DỤNG CODE WEB TỎ TÌNH ANONYVIET

Trước khi tải về, mình sẽ hướng dẫn bạn sử dụng và chỉnh sửa nội dung theo ý bạn. Xin nhắc lại đây là web tỏ tình do mình tự code. Mong bạn tôn trọng bản quyền của mình để mình không thất vọng nhé !
03 03 2018 06 08 58 - Share code web tỏ tình mới nhất 2018
Hãy chắc chắn tải đủ các file như ảnh trên nhé ! Giao diện được code trong 2 file index.html và index2.html, bạn sẽ chỉnh giao diện trong hai file này.

CHỈNH SỬA GIAO DIỆN TRANG 1 VÀ TRANG 2

Bạn nên dùng phím tắt Ctrl + F trong trình chỉnh sửa của bạn để tìm những chỗ mình nói cho nhanh. Mình đang sử dụng Sublime Text 3 để code và chỉnh sửa các file code. Bây giờ hãy vào file index.html để chỉnh sửa nội dung.

ĐỐI VỚI TRANG 1

03 03 2018 06 13 02 - Share code web tỏ tình mới nhất 2018
03 03 2018 06 28 21 - Share code web tỏ tình mới nhất 2018
Bạn có thể chỉnh sửa tên hiển thị trên Tab (thẻ của trình duyệt) theo ý bạn mong muốn. Hãy tìm thẻ <title> và chỉnh sửa lại nội dung bạn muốn.
03 03 2018 06 31 24 - Share code web tỏ tình mới nhất 2018
03 03 2018 06 31 46 - Share code web tỏ tình mới nhất 2018
Thẻ div có chứa class “firstclk” sẽ là nơi bạn chỉnh sửa nội dung của chữ Click Here. Tuy nhiên, đáng buồn là Font chữ của chữ Click Here không hỗ trợ tiếng việt. Cho nên mình mới để tiếng anh cho đẹp luôn và chữ này cũng không khó hiểu với bất kì ai.
03 03 2018 06 33 52 - Share code web tỏ tình mới nhất 2018
Phần nhịp tim của anh do có chuyển động đếm cho nên mình viết bên file myscript.js trong folder javascript. Bạn mở lên và tìm chữ “Nhịp tim của anh” và chỉnh lại nhé.
03 03 2018 06 35 27 - Share code web tỏ tình mới nhất 2018
Để chỉnh sửa nhạc nền thì kéo xuống cuối file index.html và tìm thẻ audio và đổi thành tên tương ứng trong Folder music nhé. Bạn có thể tải bài nhạc bạn muốn về và để trong thư mục (folder) music. Sau đó đổi tên mySong.mp4 thành tên bài nhạc bạn đã tải.
03 03 2018 06 54 50 - Share code web tỏ tình mới nhất 2018

ĐỐI VỚI TRANG 2

Ở trang tỏ tình thứ hai này do mình thiết kết hiệu ứng vẽ Javascript khá chặt chẽ và khắt khe. Nên bạn chỉ có thể chỉnh lại dòng chữ “Tớ có điều muốn nói…”. Để tránh bị bể giao diện Bootstrap nên bạn chỉ nên chỉnh dòng chữ này thôi.
03 03 2018 06 39 15 - Share code web tỏ tình mới nhất 2018
Hãy tìm kiếm bằng phím tắt cho nhanh bạn nhé !
03 03 2018 06 40 09 - Share code web tỏ tình mới nhất 2018

CHỈNH SỬA NỘI DUNG TRANG 3 CỦA CODE WEB TỎ TÌNH

Trang 3 thì mình thiết kế mục đích chính của việc tỏ tình. Cho nên làm đơn giản, dễ chỉnh sửa cho bạn dễ dàng thay đổi nội dung lại. Bây giờ, bạn hãy mở file index2.html để chỉnh sửa trang thứ 3 của web tỏ tình.
03 03 2018 06 42 38 - Share code web tỏ tình mới nhất 2018
Vừa vào là bạn sẽ thấy luôn tất cả nội dung trong file index2.html nhé. Hãy chỉnh lại theo ý bạn muốn. Lưu ý là chỗ class something có code javascript hiệu ứng, cho nên không nên ghi dài quá dễ bị bể khi qua điện thoại nhé !
03 03 2018 06 43 22 - Share code web tỏ tình mới nhất 2018
Vậy là xong, sau khi chỉnh sửa thì chỉ còn upload toàn bộ code web tỏ tình lên host và gửi cho bạn nữ kia thôi. Chúc các bác hạnh phúc nhé !

DOWNLOAD TOÀN BỘ SOURE CODE WEB TỎ TÌNH

Trích nguồn từ Anonyviet
- - 4 bình luận
CHUYÊN MỤC

BÌNH LUẬN (4)

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)