Cửa sổ bật lên hoặc cửa sổ bật xuống ngày càng trở nên phổ biến trên Internet. Hay đơn giản hơn là những bức ảnh bật lên. Nhiều chủ sở hữu trang web thường phải tạo chúng cho mục đích quảng cáo, nhưng không phải ai cũng biết thuật toán tạo ra chúng.
Nó là cần thiết
- - Trình soạn thảo HTML;
- - sổ tay;
- - lưu trữ.
Hướng dẫn
Bước 1
Tạo hoặc mở một trang web mới bằng HTML hoặc trình soạn thảo văn bản. Bạn có thể sử dụng các chương trình phổ biến như Dreamweaver, Expression Web và các chương trình khác cho mục đích này. Nếu bạn chỉ mới thực hiện những bước đầu tiên của mình trong ngôn ngữ lập trình HTML, hãy sử dụng "sổ ghi chú" thông thường.
Bước 2
Dán mã sau vào giữa các thẻ "head" và "/ head":
.thumbnail {vị trí: tương đối; z-index: 0;}
.thumbnail: hover {background-color: transparent; z-index: 50;}
.thumbnail span {/ * CSS cho hình ảnh phóng to * / position: Absolute; background-color: lightyellow; đệm: 5px; trái: -1000px; đường viền: 1px màu xám gạch ngang; khả năng hiển thị: ẩn; màu đen; text-decoration: none;}
.thumbnail span img {/ * CSS cho hình ảnh phóng to * / border-width: 0; padding: 2px;}
.thumbnail: hover span {/ * CSS cho hình ảnh phóng to khi di chuột * / vision: hiển thị; đầu: 0; trái: 65px; / * vị trí mà hình ảnh phóng to sẽ bù lại theo chiều ngang * /}
Bước 3
Điều chỉnh độ lệch ngang của hình ảnh bật lên bằng cách thay đổi giá trị trên dòng mã cuối cùng. Phân bổ không gian giữa các thẻ "body" và "/ body" nơi bạn muốn hình ảnh xuất hiện trên trang web. Sau đó, sao chép và dán mã sau:
Ví dụ về tiêu đề văn bản
Ví dụ về tiêu đề văn bản"
Bước 4
Thay thế "folder / largepci1.jpg" bằng tệp được sử dụng cho ảnh bật lên. Làm tương tự với khối mã thứ hai. Thay đổi dòng "Ví dụ về tiêu đề văn bản" trong đó thành dòng sẽ được viết trong hình ảnh bật lên. Đồng thời thay đổi các giá trị chiều cao và chiều rộng trong mã để điều chỉnh kích thước của hình ảnh bật lên. Tạo các khối mã bổ sung để thêm nhiều bản phác thảo hơn. Nhập các thuộc tính, thẻ và văn bản khác vào tài liệu HTML nếu cần. Lưu tệp HTML và sau đó tải nó lên máy chủ web của bạn.
