Home-theater-designers
Bạn muốn trang web của mình trông tuyệt vời --- nhưng kỹ năng phát triển web của bạn còn thiếu.
Đừng tuyệt vọng! Bạn không cần phải biết CSS hoặc PHP để xây dựng một trang web đẹp mắt với các hiệu ứng tuyệt vời. Một số thẻ HTML đơn giản và biết cách sao chép và dán sẽ làm được.
Để giúp bạn bắt đầu với một số hiệu ứng HTML thú vị, chúng tôi đã biên soạn các mẫu mã hiệu ứng HTML miễn phí này. Chúng sẽ nâng cao chức năng và trải nghiệm người dùng trên trang web của bạn, đồng thời không phá vỡ ngân hàng. Mặc dù chúng chủ yếu là HTML, những mã thú vị này cũng có thể chứa một số CSS và PHP.
1. Hiệu ứng thị sai tuyệt vời với HTML
Bạn có thể đã thấy Hiệu ứng thị sai được sử dụng trên các trang web có quảng cáo trực tuyến. Khi bạn cuộn xuống một bài báo, hình nền xuất hiện để cuộn ở một tốc độ khác, hoặc một quảng cáo xuất hiện.
Ngoài ra, có lẽ hình nền sẽ thay đổi khi bạn truy cập các phần khác nhau của trang web. Đó là một hiệu ứng tuyệt vời giúp tăng thêm chiều sâu hình ảnh cho nội dung và lý tưởng ngay cả khi bạn không hiểu mã HTML cơ bản .
Bạn có thể chơi với hiệu ứng và sao chép mã cho một Hiệu ứng cuộn thị sai đơn giản từ W3Schools .
Trong phiên bản phức tạp nhất của nó, hiệu ứng này là sự kết hợp của HTML, CSS và JS.
Hãy tiếp tục và tìm nạp các mã ở trên Hiệu ứng thị sai đầu trang / chân trang từ CodePen .
2. Mã hộp nhận xét HTML có thể cuộn
Đây là một phần tử HTML đơn giản nhưng hữu ích cho phép bạn đóng gói các đoạn văn bản dài thành một định dạng nhỏ gọn. Bằng cách này, nó không chiếm toàn bộ không gian trên trang.
Bạn có thể thử với màu sắc và kích thước của hộp văn bản để làm cho nó phù hợp với nhu cầu của bạn.
Đầu vào:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) Nếu bạn muốn thứ gì đó lạ mắt hơn một chút, bạn cũng có thể tìm nạp mã cho một hộp nhận xét có thể tùy chỉnh từ Quackit .
Họ cung cấp một số mẫu, nhưng bạn cũng có thể sử dụng trình chỉnh sửa của họ để thay đổi và kiểm tra (chạy) mã tùy chỉnh của mình theo cách thủ công.
3. Một thủ thuật HTML thú vị: Văn bản được đánh dấu
Với một đơn giảnThẻ HTML bạn có thể thêm rất nhiều hiệu ứng thú vị vào văn bản hoặc hình ảnh của mình. Lưu ý rằng không phải tất cả chúng đều hoạt động trên các trình duyệt. Những cái được đề cập ở đây hoạt động trong Google Chrome, Microsoft Edge và Mozilla Firefox.
Hiệu ứng văn bản HTML này làm nổi bật văn bản giữacác thẻ.
Đầu vào:
Your highlighted text here.Bản demo đầu ra:
4. Thêm hình nền vào văn bản
Tương tự như vậy, bạn có thể thay đổi màu của văn bản hoặc thêm hình nền. Cái này sẽ đẹp nếu cỡ chữ của văn bản lớn hơn.
Đầu vào:
MakeUseOf presents...Hiệu ứng tương tự cũng đạt được bằng cách thêm các yếu tố kiểu và phông chữ vào văn bản trong một nhãn.
bản phân phối Linux tốt nhất để phát triển web
Bản demo đầu ra:
5. Thủ thuật HTML hữu ích để thêm chú giải công cụ tiêu đề
Chú giải công cụ tiêu đề xuất hiện khi bạn cuộn chuột qua một đoạn văn bản hoặc hình ảnh 'được điều khiển'. Bạn sẽ thấy những thứ này được sử dụng trên các trang web trên hình ảnh, văn bản được liên kết hoặc thậm chí là các mục menu trong các ứng dụng dành cho máy tính để bàn. Sử dụng mã HTML này để thêm chú giải công cụ vào văn bản thuần túy trên trang web của bạn.
Đầu vào:
Move your mouse over me!Bản demo đầu ra:
6. Các thủ thuật HTML thú vị nhất chưa từng có: Cuộn hoặc giảm văn bản
Khi bạn tìm kiếm 'marquee html' trên Google, bạn sẽ phát hiện ra một Easter Egg nhỏ. Xem số kết quả tìm kiếm cuộn ở trên cùng? Đó là một hiệu ứng được tạo ra bởi thẻ marquee hiện đã lỗi thời. Mặc dù hiệu ứng văn bản HTML tuyệt vời này đã không còn được dùng nữa, nhưng hầu hết các trình duyệt vẫn hỗ trợ nó.
Đầu vào:
I wanna scroll with it, baby!Bản demo đầu ra:
Bạn có thể thêm các thuộc tính khác để kiểm soát hành vi cuộn, màu nền, hướng, chiều cao, v.v. Hãy cẩn thận, tuy nhiên; những tác dụng này có thể trở nên khá khó chịu nếu lạm dụng quá mức.
Để có hiệu ứng chữ rơi tuyệt vời, quay lại Quackit một lần nữa và sao chép mã marquee được tùy chỉnh cao của họ.
7. Xây dựng một Switchmenu thú vị với HTML
Các thủ thuật HTML thú vị nhất là các hiệu ứng HTML động. Tuy nhiên, chúng thường dựa trên kịch bản. Đây là một hiệu ứng cho các menu mà bạn sẽ đồng ý là trông rất đẹp.
Nó phức tạp hơn một chút so với thẻ HTML thông thường của bạn vì nó hoạt động với biểu định kiểu và các tập lệnh. Ưu điểm là bạn không phải tải lên tệp CSS hoặc tập lệnh để làm cho nó hoạt động. Thay vào đó, chỉ cần dán đoạn mã sau vào phần trang web của bạn.
Đầu vào:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Bản demo đầu ra:
Thật không may, chúng tôi không thể chứng minh hiệu ứng này ở đây. Nhưng nguồn gốc, Động lực , có một bản sao hoạt động của hiệu ứng HTML động này.
8. Nhận bảng tính HTML với Tableizer
Nếu bạn muốn hiển thị một bảng tính trên trang web của mình, hãy để Tableizer! chuyển đổi dữ liệu của bạn thành một bảng HTML. Chỉ cần dán dữ liệu thô từ Excel, Google Doc hoặc bất kỳ bảng tính nào khác vào công cụ chuyển đổi tại tableizer.journalistopia.com . Tinh chỉnh tùy chọn bảng , sau đó nhấp vào Tableize nó để nhận đầu ra HTML.
Đây có lẽ là một trong những mã HTML thú vị nhất cho trang web của bạn, như Tableize It! làm tất cả các công việc khó khăn.
Nhấp chuột Sao chép HTML vào Clipboard để sao chép mã HTML và thêm nó vào trang web của bạn. Cân nhắc chỉnh sửa màu nền để làm cho nó trông mát mẻ hơn rất nhiều.
cách tạo trang trình bày theo thời gian trên google slide
Mặc dù đây không thực sự là một hiệu ứng HTML, nhưng nó khá tiện dụng.
Các mã và hiệu ứng HTML thú vị hơn cho trang web của bạn
Sức mạnh của HTML, CSS và JavaScript cung cấp các tùy chọn tiềm năng không giới hạn cho các hiệu ứng tuyệt đẹp trên trang web của bạn. Muốn thêm?
- HTML Goodies mang đến cho bạn điều tuyệt vờigắn thẻ ý tưởng.
- Động lực có nhiều tập lệnh HTML động đáng kinh ngạc.
- Quackit cung cấp mã HTML thú vị.
Chúng tôi đã chỉ cho bạn tám mã HTML thú vị mà bạn có thể sao chép để nâng cao trang web của mình. Mặc dù khác nhau, nhưng tất cả chúng đều dễ thực hiện miễn là bạn biết các kỹ thuật mã hóa HTML cơ bản.
Đăng lại Đăng lại tiếng riu ríu E-mail 17 Ví dụ về mã HTML đơn giản mà bạn có thể học trong 10 phútBạn muốn tạo một trang web cơ bản? Tìm hiểu các ví dụ HTML này và dùng thử chúng trong trình soạn thảo văn bản để xem chúng trông như thế nào trong trình duyệt của bạn.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Phát triển web
- Công cụ quản trị trang web
Phó tổng biên tập về Bảo mật, Linux, Tự làm, Lập trình và Giải thích Công nghệ, và Nhà sản xuất Podcast Thực sự Hữu ích, có nhiều kinh nghiệm trong lĩnh vực hỗ trợ máy tính để bàn và phần mềm. Một người đóng góp cho tạp chí Định dạng Linux, Christian là một người mày mò Raspberry Pi, người yêu thích Lego và người hâm mộ trò chơi cổ điển.
Xem thêm từ Christian CawleyTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký