Chào mừng trở lại, mọi người.
Đã đến lúc chúng ta ngừng học hỏi những điều mới mẻ và
đưa vào thực hành những điều mà chúng ta đã nói đến trong tuần trước.
Những gì chúng ta sẽ làm là thêm một số thành phần mới mà chúng ta đang nghiên cứu.
Nhưng chúng ta sẽ làm điều đó cùng nhau khi chúng ta viết mã, nên một lần nữa tôi sẽ nhấn mạnh rằng tôi
thực sự hy vọng bạn dừng lại, bỏ bất cứ điều gì bạn đang làm, quét máy tính xách tay của bạn hoặc
bất cứ điều gì bạn đang viết mã, và lập
mã với tôi hơn là chỉ xem những gì tôi đang làm.
Khi chúng tôi cùng nhau lập trình,
hy vọng bạn đã tạo ra một cái gì đó trông giống như màn hình này ở đây.
Chúng tôi đã đi vào và chúng tôi đã sử dụng chiều rộng và màn hình khác nhau,
đệm và lề và chúng tôi đã làm cho trang của chúng tôi tốt hơn một chút.
Hôm nay, chúng ta sẽ đi thêm một bước nữa và thêm một số yếu tố khác nhau
như gradient, thay vì có ba phần chiều rộng bằng nhau, chúng ta sẽ có một số
phần chiếm một nửa trang, một số chiếm toàn bộ trang, những điều nhỏ nhặt như thế này.
Và chúng tôi sẽ sử dụng những bộ chọn lọc mới mà chúng tôi đã nghiên cứu.
Vì vậy, chúng ta hãy đi trước và bắt đầu.
Điều đầu tiên mà tôi muốn làm là đặt trong gradient tuyến tính hoặc
màu sắc mới mà đi trong cả đầu trang và chân trang.
Vì vậy, khi tôi đi đến tờ phong cách của tôi, và tôi sẽ đến đây.
Một trong những điều đầu tiên tôi muốn làm là tôi muốn đặt trong đó chúng ta cần một
nền tảng mới cho đầu trang và chân trang.
Và tôi sẽ bắt đầu bằng cách đặt nó ngay tại đây.
Tôi biết tôi đã lừa dối, tôi đã sao chép và dán.
Nhưng tôi muốn làm điều đó, xin lỗi.
Tôi muốn làm điều đó, bởi vì tôi cứ lộn xộn khi tôi đang đánh máy.
Vì vậy, những gì tôi đã đặt ở đây, là tôi đã bắt đầu bằng cách đặt trong một màu nền.
Bạn luôn muốn làm điều đó, bởi vì nếu bạn không làm vậy, nếu vì một lý do nào đó
trình duyệt không thể xử lý gradient tuyến tính, bạn đã cho nó một fall-back.
Sau đó, tôi đã có quy tắc gradient tuyến tính của tôi trong mỗi webkit khác nhau.
Vì vậy, một khi tôi thêm rằng và tôi nhấn lưu, chúng tôi có thể làm mới trang và
xem nếu chúng tôi có loại màu xám đến màu xanh mà chúng tôi đang tìm kiếm.
Này, tuyệt, chúng tôi đã làm.
Bây giờ, khi tôi viết quy tắc này, bạn có thể nhớ rằng tôi đặt đầu trang,
chân trang và điều đó có nghĩa là nó phải áp dụng cho cả hai yếu tố này.
Nhưng nó chỉ áp dụng cho tiêu đề.
Chúng ta cần suy nghĩ về lý do tại sao điều đó xảy ra.
Lý do là nếu chúng ta di chuyển xuống, bạn có thể thấy rằng hơn nữa xuống trong trang
tôi đã nói, Tôi muốn nền chân trang của tôi là màu sắc đặc biệt này.
Việc này sẽ ghi đè lên mọi quy tắc trước đó, nên tôi sẽ vào đây.
Và tôi sẽ xóa nó, và nói, chúng ta hãy loại bỏ nó.
Làm mới, và tuyệt vời.
Bây giờ nó có vẻ tốt hơn nhiều.
Được rồi, vì vậy chúng tôi đã thực hiện một thay đổi, và hy vọng bạn đang quen với ý tưởng
của cả hai sử dụng dấu phẩy để tạo kiểu hai yếu tố cùng một lúc, bạn có thể làm nhiều hơn và
đặt vào các tiền tố bộ web hoặc tiền tố trình duyệt.
Nếu bạn loại bỏ nó, nó có thể hoạt động trên trình duyệt của bạn,
nhưng có một cơ hội thực sự tốt nó sẽ không hoạt động trên trình duyệt khác.
Nên chúng tôi muốn thực hành điều này.
Được rồi, chúng ta hãy xem xem chúng ta có gì nào.
Tôi đã có gradient trong.
Điều tiếp theo tôi muốn giải quyết là tạo kiểu các liên kết này
, và một lần nữa, tôi không tạo kiểu tất cả các liên kết trong trang, vì
nếu bạn nhận thấy, điều này xuống đây vẫn trông giống hệt nhau.
Tôi chỉ muốn tạo kiểu các liên kết bên trong phần điều hướng.
Vì vậy, tôi sẽ đi ngay đây và, tôi đã tạo kiểu nav của tôi.
Trông đẹp đấy.
Lần sau, tôi sẽ nói,
hey, chúng ta hãy phong cách chỉ những liên kết đó là bên trong nav.
Và, chúng tôi đã thực hiện khá nhiều thay đổi.
Nếu tôi xuống đây, chúng ta có thể thấy nó.
Một trong những chúng tôi đã thêm một cái gì đó trông giống như một cấu trúc hộp cho nó.
Thông thường bạn không thể làm điều này bởi vì trong các yếu tố dòng không có chiều rộng và
chiều cao nhưng, chúng tôi sẽ đi trước và chơi với nó.
Hãy đi trước và bắt đầu, trước tiên tôi sẽ nói rằng tôi muốn chiều rộng của mỗi một trong các
liên kết của tôi là khoảng 22%, lưu điều này.
Làm mới, không có may mắn.
Vì vậy, một lần nữa, hãy nhớ rằng, một trong những điều tôi nói là các liên kết là nội tuyến và
bạn không thể cho chúng chiều rộng hoặc chiều cao.
Vì vậy, bây giờ, nếu tôi đi vào và tôi nói chúng ta hãy thay đổi màn hình của chúng tôi để
inline-block, chúng ta nên có nhiều may mắn hơn.
Hầu như quá nhiều may mắn, vì màn hình không hoàn toàn phù hợp với điều đó.
Được chứ? Được rồi.
Tuyệt quá, gần hơn một bước.
Hãy thêm rằng màu nền khác nhau.
Và tôi nghĩ tôi đã biến nó thành màu trắng.
Nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn.
Bùm.
Chắc chắn chúng ta đang đến gần hơn.
Những bước nhỏ bé đang đưa chúng ta đến gần hơn rất nhiều.
Vì vậy, điều tiếp theo tôi muốn giải quyết khi chúng tôi cố gắng thay đổi trang
của chúng tôi là ý tưởng rằng một số phần nên chiếm một nửa màn hình,
trong khi một số phần nên đi trước và chiếm toàn bộ chiều rộng của màn hình.
Và cách chúng ta sẽ làm điều đó là sử dụng các lớp học.
Nếu bạn nhớ,
các lớp học là một cách để tạo kiểu một số nhóm yếu tố nhất định theo cách cư xử tương tự.
Vậy hãy tiếp tục xem chúng ta sẽ làm thế nào.
Điều đầu tiên tôi cần làm là làm một lớp học mới, và lớp này sẽ nói,
thay vì tất cả các phần chiếm 30%, tôi chỉ muốn một số trong số họ,
tôi sẽ gọi họ một nửa để chiếm khoảng, giả sử 45% trang.
Bằng cách này nó sẽ chỉ nhận được một số phần, không phải tất cả chúng.
Nếu tôi làm mới, nó sẽ không làm việc được nêu ra bởi vì vấn đề là tôi đã
thoát khỏi phong cách phần của tôi và thay thế nó bằng lớp này và
không nơi nào trong HTML của tôi tôi đã nhớ để tham khảo các lớp học.
Vì vậy, lần đầu tiên chúng ta bây giờ sẽ đi vào tập tin HTML của chúng tôi và
bắt đầu thực hiện một số thay đổi.
Sẽ đi ở đây, Tôi muốn điều này chỉ chiếm một nửa màn hình,
vì vậy tôi sẽ nói lớp = một nửa.
Và tôi muốn cái này chiếm một nửa màn hình.
Chúng ta có cái đó.
Chúng ta sẽ không thay đổi cái kia, vì vậy
khi tôi làm mới, bạn có thể thấy rằng hai trong số họ đang ở cạnh nhau.
Vì vậy, khi tôi có và làm mới nó trông gần hơn một chút, khác hơn là tôi đã có
một số điều kỳ lạ xảy ra với một số điều màu xanh và khác nhau.
Vì vậy, điều này là bởi vì tôi đã sử dụng phao.
Và nếu bạn nhớ, khi bạn đang sử dụng phao đôi khi nó gây ra
những thứ bên cạnh nhau về cơ bản là ở các vị trí bạn không muốn chúng ở trong.
Vì vậy, phần dưới cùng của chúng tôi, phần mà chúng tôi biết rằng chúng tôi không muốn nổi,
chúng tôi cần phải đi vào và nói hey, có một số phần mà chúng tôi muốn trở thành toàn bộ.
Vì vậy, chúng ta hãy trở lại bảng phong cách của chúng tôi.
Và tôi sẽ làm một chút sao chép và dán ở đây.
Và tôi sẽ nói, anh biết không?
Một phần này, tôi cần nó để được lớp bằng toàn bộ.
Vậy hãy quay lại đây.
Phần class = toàn bộ có nghĩa là cái này nên chiếm toàn bộ chiều rộng,
đừng cố gắng để nổi nó bên cạnh nhau.
Và chúng ta hãy tiếp tục và làm mới.
Trông đẹp hơn nhiều.
Có vẻ như chúng tôi muốn mọi thứ được kết thúc.
Và một lần nữa, chú ý.
Chỉ có các liên kết nav được tạo kiểu, không phải tất cả các liên kết.
Chúng tôi đã đặt trong gradient.
Nếu chuyển màu của bạn không hoạt động,
có thể là do bạn không đặt trong tiền tố trình duyệt của mình.
Chúng tôi thực sự có rất nhiều điều nhỏ đang diễn ra trong trang này.
Và một lần nữa, tôi không phải là một nghệ sĩ đồ họa, nên tôi không tạo ra những thứ đẹp nhất.
Nhưng thật thú vị khi đi vào và tạo ra những thứ khác nhau và
xem cách bạn có thể tạo kiểu chúng cho mình.
Vì vậy, hãy tiếp tục đi và chúc may mắn và đừng lo lắng khi bạn nhấn những lỗi chính tả đó.
Tất cả chúng ta đều biết.