Giờ đây bạn đã quen thuộc với thao tác thêm một trang vào Câu chuyện web, thao tác thêm những trang tiếp theo trong câu chuyện "Niềm vui của thú cưng" cũng thực hiện tương tự vậy. Dựa trên thông tin được cung cấp bên dưới, hãy tiếp tục tạo những trang còn lại bằng cách dùng những điều mà bạn đã học được tới giờ. Nếu bị kẹt, hãy nhìn vào mã (pets-completed.html) hoàn chỉnh.
MẸO – Nhớ rằng mỗi trang cần có một thuộc tính "id" đặc trưng (ví dụ như id="page1").
Trang 1: Mèo
Minh hoạ cách hiển thị một hình ảnh hay văn bản trong một lớp duy nhất.
Một yếu tố cho trích dẫn sau: Chó đến khi được gọi. Mèo lãnh thông điệp và quay về lại với bạn. --Mary Bly
Trang 2: Chó
Minh hoạ cách sắp xếp văn bản và hiển thị một hình ảnh lấp đầy màn hình với hai lớp.
Bao hàm 2 lớp:
Lớp 1: Thực thi khuôn mẫu fill, và bao hàm một amp-img thích nghi (dog.jpg, 720 x 1280px).
Lớp 2: Thực thi khuôn mẫu thirds và bao hàm 2 yếu tố:
Một yếu tố
với tiêu đề: Chó
Một yếu tố
vốn chỉ định một grid-area chiếm phần lower-third và có dòng chữ sau: Chó có lẽ là loài vật thuần dưỡng đầu tiên. Chúng đã đi theo con người khoảng 10.000 năm nay. Một số nhà khoa học khẳng quyết rằng mọi loài chó, dù là chó nhà hay chó hoang dã, đều có cùng tổ tiên ở loài sói nhỏ vùng Nam Á.
Trang 3: Chim
Minh hoạ cách sắp xếp văn bản, hiển thị một hình ảnh lấp đầy màn hình, và cung ứng âm thanh nền cho trang.
Bao hàm 3 lớp:
Lớp 1: Thực thi khuôn mẫu fill và bao hàm một amp-img thích nghi (bird.jpg, 720 x 1280px).
Lớp 2 Thực thi khuôn mẫu vertical và bao hàm một yếu tố:
Một yếu tố
với tiêu đề: Chim
Lớp 3: Thực thi khuôn mẫu vertical và bao hàm một yếu tố:
Một yếu tố cho câu trích sau: Một con chim có ba thứ: Lông vũ, khả năng bay và tiếng hót, Và lông vũ là thứ nhạt nhoà nhất.--Marjorie Allen Seiffert
Lớp thứ ba này chỉ định class="bottom" để sắp các yếu tố con ở cuối màn hình.
Phát một file âm thanh chạy nền trong khi đang hiểu thị trang. Bạn có thể phát âm thanh chạy nền cho toàn bộ câu chuyện hoặc cho những trang đơn lẻ. Để phát âm thanh cho một trang, hãy thêm thuộc tính background-audio="assets/bird-singing.mp3" vào yếu tố <amp-story-page>.
Trang 4: Thỏ
Minh hoạ cách sắp xếp văn bản và hiển thị một video lấp đầy màn hình cho trang.
Bao hàm 3 lớp:
Lớp 1: Thực thi khuôn mẫu fill, và bao hàm một amp-video thích nghi (rabbit.mp4).
Nhớ thêm đoạn mã bắt buộc cho thành phần amp-video trong phần để cho video xuất hiện.
Chỉ định một hình ảnh poster (rabbit.jpg). Thuộc tính này bắt buộc cho những câu chuyện AMP hợp lệ.
Đặt video phát tự động với thuộc tính autoplay. Thuộc tính này bắt buộc cho những câu chuyện AMP hợp lệ.
Đặt video lặp trở lại với thuộc tính loop.
Đặt kích thước thành width="720"height="1280" và layout="responsive".
Lớp 2 Thực thi khuôn mẫu vertical và bao hàm một yếu tố:
Một yếu tố
với tiêu đề: Thỏ
Lớp 3: Thực thi khuôn mẫu vertical và bao hàm một yếu tố:
Một yếu tố
chứa dòng chữ sau: Thỏ có thể học cách làm theo những câu lệnh giản đơn và chạy đến khi được gọi tên, và chúng là loài tò mò và nghịch ngợm.
Áp dụng lớp CSS bottom cho lớp này để sắp các yếu tố con ở cuối màn hình.
Câu chuyện "Niềm vui của thú cưng" gần hoàn thành. Chúng ta sẽ dùng hình hoạt họa trong trang cuối để tập hợp lại tất cả mấy con thú cưng này.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.