Hướng dẫn iphone html editor - trình soạn thảo html iphone

Các yếu tố trên trang web của bạn được thay đổi kích thước để phù hợp với thiết bị bạn đã chọn. Nhiều nhấp chuột trên cùng một biểu tượng có thể thay đổi hướng của thiết bị. Trong trường hợp của các thiết bị iPad, nhiều lần nhấp có thể cho phép các chế độ xem màn hình chia của trang web của bạn. Trong chế độ xem thiết bị di động, bạn có thể thấy rằng các hình ảnh thay đổi kích thước để phù hợp với màn hình và tiêu đề và chân trang vẫn được sửa chữa.

Sau khi bạn ban đầu tạo một trang web, có lẽ bạn sẽ muốn thực hiện các thay đổi dựa trên hành vi trong trình duyệt. Bạn có thể sử dụng Thanh tra web để sửa đổi và chỉnh sửa trang web sau khi bạn tạo nó ban đầu.

1. Chọn một phần tử

• Trong danh mục đầu tư của bạn, bạn thấy trang web có thanh tiêu đề ở trên cùng chứa tiêu đề Jane Doe Design và một nút xáo trộn. Nhưng khi bạn cuộn xuống trang, thanh tiêu đề biến mất và thanh chân trang không thể nhìn thấy cho đến khi bạn cuộn xuống phía dưới. Bởi vì đây là danh mục đầu tư, bạn sẽ muốn tạo tiêu đề với tên và chân trang với số lượng hình ảnh liên tục khi cuộn, đặc biệt là trên các thiết bị di động.

• Để làm điều này, bạn chọn một phần tử và thay đổi thuộc tính CSS của nó. Trong trường hợp này, bạn sẽ chọn phần tử tiêu đề, bằng cách thực hiện một trong những điều sau đây:

Nhấp chuột phải vào phần tử (trong trường hợp này, tiêu đề Jane Doe Design) và chọn Kiểm tra phần tử từ menu.

Trong thanh tra web, nhấp vào nút chọn phần tử (xem hình bên dưới). Sau đó di chuyển con trỏ đến tiêu đề và nhấp vào nó khi nó được tô sáng.

Sau khi bạn chọn một phần tử, Thanh tra web sẽ tự động đưa bạn đến phần tử trong tab Phần tử. Tab này hiển thị cấu trúc phân cấp của tệp HTML của bạn với tất cả các phần tử mô hình đối tượng tài liệu (DOM). Đường dẫn của các phần tử DOM được lồng xung quanh phần tử đã chọn có thể nhìn thấy trong thanh nhảy ở đầu của tab phần tử (xem hình bên dưới). DOM được mở ra một phần và đánh dấu tiêu đề được xác định bởi thẻ

được tô sáng.

2. Sửa đổi và lưu các thuộc tính CSS trong tab các phần tử

1. Ở phía bên phải của tab phần tử là một thanh bên được chia thành ba phần. Phần mặc định trong trọng tâm khi bạn chọn một phần tử là thanh bên kiểu. Nó hiển thị tất cả các kiểu CSS liên quan đến phần tử đã chọn.

2. Thanh bên kiểu được mở từ khi bạn chọn phần tử tiêu đề. Bạn cần thay đổi tài sản cho vị trí tiêu đề.

3. Trong thanh bên kiểu, nhấp vào bên trong phần CSS cho tiêu đề.

   Thêm thuộc tính vị trí bằng cách nhập position: fixed;

3. Mở tệp CSS với Mở nhanh

Tiếp theo bạn cần thêm một thuộc tính để ảnh phóng to khi bạn di chuột qua nó. Thuộc tính di chuột này sẽ cho một dấu hiệu tốt hơn về bức ảnh được chọn. Để thực hiện việc này, bạn đi vào tệp index.min.css bằng cách sử dụng Quick Open (xem hình bên dưới), một tính năng cho phép bạn nhanh chóng tìm kiếm một tệp trong thanh tra web.

1. Nhấn lệnh-shift-o và bắt đầu gõ index.min.css cho đến khi tên tệp AutoCompletes.

2. Nhấn Enter.

   Thanh tra web đưa bạn đến đúng tệp và mở tab Tài nguyên.

4. Tìm kiếm trong một tệp

Bây giờ bạn cần tìm thuộc tính

     -webkit-transform: scale(1.3)

1. Nhấn Command-F để làm cho thanh tìm kiếm xuất hiện ở đầu tab Tài nguyên.

2. Bắt đầu gõ

        -webkit-transform: scale(1.3)

   0.

5. Sửa đổi các thuộc tính CSS trong tab Tài nguyên

Sau khi bạn tìm thấy khối CSS trong tệp, bạn cần thêm một thuộc tính khác và tạo một khối di chuột mới.

1. Thêm dòng này vào bộ chọn

        -webkit-transform: scale(1.3)

   0:

   .photo-wrapper: hover img {

   -webkit-transform: scale(1.3)

   }

2. Thêm khối CSS này cho thuộc tính Hover:

   .photo-wrapper:hover img{

   -webkit-transform: scale(1.3)

   }

3. Thêm khối CSS này cho thuộc tính Hover:

4. .photo-wrapper:hover img{

Nhấn Command-S để lưu tệp, trả lời bất kỳ lời nhắc hệ thống nào.

Để xem các thay đổi của bạn, hãy truy cập Thanh tra web và nhấp vào tải lại.

1. 6. Kiểm tra trang của bạn ở chế độ thiết kế đáp ứng

   Bây giờ bạn đã sửa các thuộc tính này, hãy kiểm tra trang của bạn để xem nó trông như thế nào trên các thiết bị khác nhau. Một trang web có vẻ tốt trên nhiều thiết bị được gọi là phản hồi vì nó thích nghi trực quan với thiết bị mà nó được hiển thị. Thiết kế đáp ứng đảm bảo rằng nội dung của bạn tự động phù hợp với mọi kích thước màn hình. Để kiểm tra khả năng đáp ứng của trang web của bạn, trước tiên bạn cần vào chế độ thiết kế đáp ứng.

2. Từ menu phát triển, chọn Nhập chế độ thiết kế đáp ứng.

Màn hình của bạn bây giờ sẽ trông giống như hình ảnh bên dưới. Trình duyệt của bạn được thay thế bằng một cửa sổ màu xám chứa một số chế độ xem thiết bị.