Chào tất cả mọi người.
Trong việc xem xét mã ngày hôm nay, chúng ta sẽ nói về việc làm một lịch.
Bởi vì những gì tôi thực sự thích về lịch là có tất cả những
điều nhỏ bé, nhỏ bé bạn cần phải suy nghĩ để thực sự làm cho trang của bạn trông chuyên nghiệp.
Vì vậy, những gì tôi có ngay trên màn hình là một lịch rất, rất đơn giản,
nơi bạn có thể thấy, tôi có tất cả những ngày trong tháng.
Tôi cũng có, vào một vài ngày, những cuộc hẹn nhỏ.
Nên tôi sẽ ăn trưa với mẹ, hoặc gặp trưởng khoa, hoặc là trợ giúp thư viện.
Và, vào ngày 31, đó là Halloween, vì vậy boo!
Chúng ta có thể làm gì để lấy thông tin
này, nội dung này từ HTML5 của chúng tôi, và biến nó thành một thứ thực sự dễ chịu?
Vâng, chúng ta hãy nhìn vào những gì tôi đã làm với nó.
Ở đây, tôi đã sử dụng CSS để tạo ra một lịch
có rất nhiều thứ khác nhau xảy ra trên nó.
Đầu tiên, tôi đã đi trước và tôi đã tạo kiểu cho nó một cách độc đáo.
Tôi đã bao gồm những thứ như bán kính biên giới, nổi bật những ngày này ngay tại đây.
Tôi nhận ra nó thực sự rất khó để nhìn thấy trên màn hình ngay bây giờ, nhưng tôi thực sự có
một hình nền cho những ngày đó để làm cho nó trông hơi khác một chút.
Một điều khác tôi đã thêm vào đó là vào những ngày có những dấu hoa thị nhỏ,
nếu tôi nhấp vào chúng, cuộc hẹn thực tế sẽ xuất hiện.
Vì vậy, như bạn có thể thấy, tôi sẽ được đối phó với rất nhiều yếu tố CSS khác nhau.
Và tôi sẽ từ từ kiểm tra mật mã
chỉ để cho các bạn biết chuyện gì đang xảy ra.
Bây giờ nó sẽ là không thể cho bạn để làm theo cùng với tôi với mã này và
biết chính xác những gì tôi đang làm.
Thay vào đó, tôi đưa nó cho bạn như là một nguồn lực để loại lựa chọn thông qua và
hiểu các phần khác nhau khi bạn cần và
khi bạn muốn kết hợp chúng vào trang của bạn.
Vì vậy, chúng ta hãy nhìn vào CSS.
Bạn có thể thấy đây là một trang rất, rất bận rộn.
Vì vậy, chỉ cần ngồi lại và
bạn có thể nghe tôi nói về những điều khác nhau thay vì cố gắng đọc mã.
Tôi đã đi vào và tôi muốn làm lịch của tôi với một bán kính biên giới rất đẹp nên
tôi sẽ có một cái gì đó xung quanh đầu trang.
Vấn đề là, bản thân bảng thực sự chỉ là phần này.
Nó không phải là chú thích.
Vì vậy, những gì tôi đã làm là tôi đã đi vào và
tôi nói, đừng lo lắng về hai góc trên, ở đây và ở đây.
Chỉ có đường cong hai góc dưới, được rồi.
Làm thế nào để tôi có được ý tưởng tuyệt vời về xen kẽ giữa một loại màu xám nhạt
và màu này và đi lại?
Vâng với điều này, bạn có thể đi trước và sử dụng một số yếu tố giả khác nhau.
Vì vậy, trong trường hợp này, tôi đã đi vào.
Và đó không phải là tôi.
Đó là trình duyệt nói, hey, tôi sẽ xem xét tất cả các hàng bảng khác nhau.
Và bất cứ khi nào tôi thấy một đứa trẻ kỳ quặc, tôi sẽ làm cho nó một màu,
bất cứ khi nào tôi nhìn thấy một đứa trẻ thậm chí, tôi sẽ làm cho nó một màu khác.
Đây là rất nhiều đẹp hơn bạn phải đi vào bảng của bạn và
đặt lớp bằng thậm chí, lớp bằng lẻ, lớp bằng thậm chí,
đặc biệt là nếu sau đó bạn quyết định thêm thông tin và nó ném ra hàng của bạn.
Đây là một cái gì đó thực sự mạnh mẽ mà bạn nên cố gắng tận dụng lợi thế của.
Thế còn khi bạn cố gắng làm cho trang của bạn trông thực sự chuyên nghiệp,
các yếu tố chồng lên nhau?
Vì vậy, ngay tại đây, tôi thực sự đang nhìn vào một bảng, và một hàng bảng, và
một yếu tố bảng.
Tôi phải trải qua và suy nghĩ về từng cái này và nghĩ về những thứ như,
hm, trong hàng bảng cuối cùng của tôi, phần tử bảng cuối cùng,
nó có một đường cong khác so với đứa con đầu lòng.
Vì vậy, đi trước, tải về mã này và có một cái nhìn vào đó và chơi với nó.
Điều gì sẽ xảy ra nếu bạn bình luận nó ra?
Chuyện gì sẽ xảy ra?
Được rồi, tôi có mã khá đơn giản cho chú thích, tôi đã đi trước và
chỉ cần thêm một số bán kính biên giới và màu sắc.
Điều tôi thực sự muốn cho các bạn thấy là toàn bộ ý tưởng về khi nào các bạn muốn giấu mọi thứ.
Chúng ta hãy quay trở lại HTML.
Tôi đã đặt tất cả các yếu tố của tôi Bên trong một thẻ span.
Vì vậy, ở đây, tôi đã có span thư viện helper.
Tôi hy vọng rằng bạn đang suy nghĩ ngay bây giờ và đi,
tại sao chúng không xuất hiện khi tôi lần đầu tiên nhìn vào lịch?
Tại sao nó không có ở đó?
Vâng, lý do sẽ là bởi vì theo mặc định, tôi sẽ đi trước và
giấu tất cả các cuộc hẹn khác nhau.
Tôi sẽ nói rằng, khả năng hiển thị ẩn đi.
Bây giờ điều này là khác biệt so với hiển thị không có.
Nếu tôi không trưng bày gì cả, toàn bộ quảng trường này sẽ biến mất, nó sẽ không có ở đó.
Tầm nhìn ẩn giấu nói rằng, tôi muốn rời khỏi không gian đó, nhưng
tôi không muốn cho thấy những gì trong đó.
Đó là một điều rất ít sắc thái, và đây chính là lý do tại sao tôi đưa ra ví dụ này, để
bạn có thể thấy sự khác biệt.
Được rồi, bây giờ nó bị giấu đi.
Nhưng ngay sau khi tôi làm cho nó hoạt động, và hoạt động có nghĩa là ngay sau khi bạn nhấp vào
nó, tôi thay đổi khả năng hiển thị từ ẩn sang hiển thị.
Vì vậy, chúng ta hãy nhấp vào nó.
Và bạn có thể thấy bữa trưa với mẹ xuất hiện.
Người trợ giúp thư viện, và cũng ở đây, vào Halloween,
tôi có một thông điệp nhỏ ở đó.
Vì vậy, đã có rất nhiều điều xảy ra với CSS này.
Và tôi không muốn đi xuống từng dòng của nó, và
anh cũng không muốn tôi làm điều đó.
Nó sẽ rất nhàm chán.
Vì vậy, tôi hy vọng mặc dù, rằng tôi đã cho bạn thấy một số cách mà các
lớp giả, các yếu tố giả, các trạng thái khác nhau, tất cả đi cùng nhau
để tạo ra một trang có thể trông tốt hơn nhiều so với HTML đơn giản của chính nó.
Vì vậy, tôi hy vọng bạn sẽ sử dụng mã này và tạo ra một cái gì đó tuyệt vời cho chính mình.
Chúc may mắn.