Chào mọi người, chào mừng trở lại.
Một lần nữa, tôi sẽ yêu cầu các bạn ngừng học và bắt đầu lập trình và luyện tập.
Và chúng tôi sẽ sử dụng cùng một ví dụ mà chúng tôi đã sử dụng trong lần ngắt mã hóa đầu tiên của chúng tôi.
Vì vậy, tôi muốn cho các bạn xem trang cũ của chúng tôi là gì, ngay đây.
Và xem làm thế nào chúng ta có thể thay đổi nó thành một cái gì đó trông
giống như trang mới của chúng ta ở đây,
nơi chúng ta đang thực hiện một số lề, mái chèo, và chiều rộng và chiều cao của chúng ta.
Được rồi, chúng ta hãy đi trước và bắt đầu.
Điều đầu tiên tôi muốn làm là sử dụng cùng một bảng phong cách tôi đã sử dụng cho bảng
đầu tiên.
Hoàn toàn không cần phải tạo lại bảng kiểu dáng của bạn khi bạn có thể
sử dụng bảng này và sửa đổi nó, hoặc nếu bạn muốn, hãy sử dụng hai bảng kiểu dáng.
Tôi sẽ chỉ dùng một cái thôi.
Và điều đầu tiên tôi sẽ sửa chữa là thực tế là
tôi đã làm những gì bạn có thể gọi là một sai lầm trong phiên bản trước của tôi.
Tôi có hai quy tắc kiểu h1.
Đó không phải là vấn đề.
Trình duyệt sẽ áp dụng tất cả các kiểu này.
Nhưng những gì tôi thực sự muốn làm là tôi có ý định tạo kiểu thẻ cơ thể.
Vì vậy, chúng ta hãy nhìn vào nó trông như thế nào ngay bây giờ.
Và chúng ta hãy quay lại phiên bản hiện tại của chúng tôi.
Và chúng ta đi đây.
Nó trông khá hơn những gì chúng ta từng có một chút.
Được rồi, bây giờ tôi đang ở một nơi khởi đầu tốt cho khi tôi bắt đầu,
hãy nói về những thứ khác nhau mà chúng ta có thể tạo kiểu trong trang của chúng ta, được chứ?
Một trong những điều đầu tiên tôi muốn làm là tôi muốn thêm một chút
lề vào trang của tôi.
Nếu bạn nhìn qua đây, không có nhiều không gian giữa cạnh của trang và
trình duyệt thực tế.
Tôi muốn thêm một chút.
Bạn có thể thêm một chút, bạn có thể thêm rất nhiều.
Trong thực tế, trong khi chúng ta viết mã ngày hôm nay, tôi sẽ thêm rất nhiều, chỉ để bạn có thể thấy hiệu ứng.
Vậy làm thế nào để bạn làm điều đó?
Làm thế nào để bạn thêm khoảng trống đó giữa phần tử và hàng xóm của nó?
Bạn vào và chúng tôi sẽ thêm một lề.
Và, như tôi đã nói, tôi nghĩ tôi sẽ làm cho nó rõ ràng hơn một chút so với
mã mà tôi đã trình bày ngay đó.
Tôi sẽ đi trước và kiếm được 4%.
Vì vậy, khi chúng ta làm việc này, tôi sẽ quay lại trang.
Tôi sẽ nạp đạn lại.
Và bạn có thể thấy mọi thứ đã được chuyển đến, được chứ?
Margin chỉ thêm một chút không gian và làm cho nó hấp dẫn trực quan hơn đối với người dùng của bạn, được
chứ?
Hãy nghĩ về những việc khác mà chúng ta muốn làm.
Rõ ràng tôi có thể muốn thêm một chút không gian giữa các
liên kết của tôi và dưới cùng của văn bản.
Vì vậy, điều này hơi khác một chút.
Tôi không nói để tách các yếu tố,
Tôi đang nói rằng tôi cần nhiều không gian hơn giữa biên giới của tôi và các yếu tố chính nó.
Vì vậy, trong trường hợp đó, những gì chúng tôi muốn sử dụng không phải là lề, chúng tôi muốn sửa đổi các đệm.
Vậy chúng ta hãy vào xem chúng ta nghĩ chúng ta sẽ làm điều đó ở đâu.
Được rồi, vì vậy tôi cần phải thêm phần đệm bên trong toàn bộ tiêu đề.
Vì vậy, chúng ta hãy đi ngay đây và
tôi sẽ thay đổi nó để, đệm, một lần nữa bạn có thể chọn bất cứ điều gì bạn muốn.
Bạn có thể sử dụng pixel, bạn có thể sử dụng phần trăm.
Tôi sẽ tiếp tục trong trường hợp này, tôi sẽ đưa vào điểm ảnh.
Và tôi sẽ nói xin vui lòng thêm 15 pixel khoảng cách giữa biên giới và đáy.
Vì vậy, làm mới, oh, chắc chắn rằng tôi tiết kiệm.
Và làm mới, và
bạn có thể thấy tôi đã thêm padding tất cả các cách xung quanh toàn bộ điều.
Nếu tôi thực sự chỉ muốn padding được ở phía dưới,
Tôi có thể đã nói padding đáy, hoặc padding phải, hoặc padding trái.
Được rồi, chúng ta hãy tiếp tục và phong cách một cái gì đó khác.
Một trong những điều lớn mà tôi thay đổi là thay vì có
một cái bên dưới nhau, tôi đã thay đổi chúng để chúng ở cạnh nhau.
Vì vậy, hãy nhớ, theo mặc định, các phần là khối, chúng là khối hiển thị
, có nghĩa là đừng để bất cứ ai khác đến bên cạnh tôi.
Để thay đổi nó để
chúng ở bên cạnh nhau, chúng ta có thể sử dụng nội tuyến hoặc nội tuyến khối.
Hầu như luôn luôn khi đưa ra lựa chọn này, bạn sẽ sử dụng nội tuyến,
bởi vì khi bạn sử dụng nội tuyến, bạn có thể bao gồm chiều cao và chiều rộng.
Được rồi, quay lại tập tin CSS của tôi.
Tôi không muốn thay đổi tiêu đề.
Tôi nghĩ tôi khá tốt với h1.
Các nav, H2, oh, bạn biết gì không?
Tôi không có bất cứ điều gì mà tôi có thể thay đổi ở đây, vì vậy chúng ta hãy tiếp tục và
đặt một thẻ mới.
Section, được rồi, tôi muốn cả ba phần bên cạnh nhau.
Vì vậy, những gì tôi có thể làm là tôi có thể chọn 400 điểm ảnh mỗi điểm ảnh.
Vâng, điều đó có nghĩa là trình duyệt phải có ít nhất 1.200 pixel.
Tôi có thể chọn 150 điểm ảnh mỗi lần.
Điều đó có nghĩa là họ sẽ rất gầy ngay cả khi họ không cần phải như vậy.
Vì vậy, chúng ta hãy sử dụng tỷ lệ phần trăm.
Tôi sẽ sử dụng 30%, không phải 33%, bởi vì tôi muốn cho một ít chỗ khuỷu tay để
đệm, lề, biên giới, vv
Được rồi, chúng ta hãy tiếp tục nhìn vào nó ngay bây giờ, tôi muốn xem nó trông như thế nào.
Bạn có thể thấy tôi đã làm được 30%, nhưng họ vẫn không nằm cạnh nhau.
Đó là bởi vì họ vẫn bị chặn.
Hãy thay đổi chúng thành khối nội tuyến, Hiển thị.
Và chúng ta hãy hy vọng cho điều tốt nhất.
Chúng ta đi đây.
Tôi có cả ba thứ bên cạnh nhau.
Vẫn không nhìn chính xác theo cách chúng tôi muốn, nhưng đó là từng bước.
Nó đang làm cho một chút tiến bộ tại một thời điểm.
Tôi sẽ tiếp tục sửa lại sự thật rằng họ không phải là tất cả xếp hàng ở phía trên.
Và tôi sẽ nói phao: trái; làm mới và chúng tôi đang tiến gần hơn,
chúng tôi đang tiến gần hơn, nhưng vẫn còn một chút sai ở đây.
Đầu tiên, chúng bị đè bẹp.
Tôi không thích tất cả chúng bị đè bẹp với nhau.
Vậy làm thế nào để bạn tách các yếu tố khác nhau với nhau?
Làm thế nào để bạn thêm một chút không gian giữa các yếu tố?
Được rồi, nếu chúng ta ở lớp, tôi sẽ có một học sinh giống như ooh, ooh,
tôi biết, vâng, đó là lợi nhuận, được chứ? Mar@@
gin, tôi sẽ chỉ đặt một lề ở một bên, giả sử Margin-right.
Và tôi sẽ làm cho nó một cái gì đó nhỏ như 2%.
Được rồi, chúng ta đang đến gần hơn.
Chúng ta đang đến gần hơn.
Vẫn không hoàn toàn những gì chúng tôi muốn, nhưng đây là cách nó hoạt động.
Bạn thêm một chút.
Anh điều chỉnh đi.
Bạn thêm một chút.
Vì vậy, một trong những vấn đề lớn ở đây là khi bạn thả những thứ sang bên trái, hoặc
khi bạn thả những thứ,
một khi bạn đã hoàn thành nổi khi bạn không muốn những yếu tố tiếp theo trôi nổi.
Anh thực sự phải vào và nói, oh, nhưng tôi không muốn nổi phần này.
Vì vậy, một khi chúng tôi đã hoàn thành với ba phần này,
chúng tôi không muốn chân trang cũng có chúng bên cạnh chúng.
Vì vậy, chúng ta hãy đi vào và điều chỉnh mã chân trang.
Ở dưới này.
Được rồi, nếu bạn nhớ nếu bạn không muốn mọi thứ trôi nổi bên cạnh bạn,
chúng tôi sẽ sử dụng rõ ràng: cả hai,
có nghĩa là đừng để bất cứ thứ gì trôi nổi ở hai bên của tôi.
Ồ, tốt hơn nhiều, phải không?
Trông đẹp hơn nhiều rồi.
Và ngoài sự thật là tôi có màu sắc kỳ lạ,
chúng ta rất gần ngay đây.
Tôi thực sự hơi thích màu xám trên đầu trang và chân trang vì vậy
tôi sẽ rời khỏi nó.
Nhưng điều tôi muốn làm là tôi muốn làm cho bức ảnh đó nhỏ hơn.
Biểu tượng nhỏ này ngay đây, chúng ta hãy làm cho nó trông giống như thế này một chút.
Và điều đó rất đơn giản cho cách tiếp cận chúng ta sẽ sử dụng ngay bây giờ.
Chúng ta hãy đi trước.
Tôi sẽ thêm một hình ảnh.
Và tôi sẽ tiếp tục và chỉ cần mã hóa nó ngay bây giờ.
Vì vậy, tôi sẽ làm cho nó 75 điểm ảnh.
Oops, sẽ phải nói rộng:75px.
Chúng ta hãy xem chúng ta đã làm thế nào.
Yeah, có vẻ ổn mà.
Nếu tôi không thích nó và tôi muốn chơi với nó, tôi sẽ không vào đây và
thử 100 và 80 và 52.
Những gì tôi sẽ làm là tôi sẽ đi vào đây và làm Inspect Element một lần nữa.
Và tôi sẽ, ồ, làm cho cái này lớn hơn vì nếu không mọi thứ trông thật điên rồ.
Và tôi sẽ đi vào hình ảnh và
tôi sẽ nói, okay nó trông như thế nào nếu thay vào đó tôi làm cho nó 150 pixel?
Trông có đẹp hơn không?
Hoặc oops, không muốn làm thế.
Hoặc nếu tôi làm cho nó 125 pixel thì sao?
Tôi có thích điều đó không?
Chọn một giá trị bạn thích, và
sau khi bạn tìm thấy một cái gì đó có vẻ tốt với bạn, hãy sao chép giá trị đó vào bảng kiểu.
Vì nếu tôi làm mới nó ngay bây giờ, giá trị phần tử kiểm tra của tôi biến mất.
Được rồi, chúng ta hãy vào đây, sửa nó, lưu nó, và làm mới.
Được rồi, điều này thật tuyệt, đây
là những thứ tôi muốn các bạn làm trong lớp này.
Tôi muốn bạn lấy một tập tin HTML và nói ooh, tôi có thể thay đổi điều này xung quanh?
Tôi có thể làm gì để làm cho nó khác biệt?
Rõ ràng, trang này chúng tôi đã tạo ra ngay đây không phải là một sản phẩm hoàn chỉnh.
Nó không chính xác như thế nào bạn muốn nó ở ngoài đó trên web.
Vì vậy, chúng tôi sẽ tiếp tục học những điều mới và
chúng tôi sẽ tiếp tục tạo kiểu mọi thứ theo những cách khác nhau.
Và khi bạn tiếp tục tập luyện, bạn sẽ tự tin và
khả năng của bạn sẽ thực sự phát triển.
Và đó là điều tôi muốn.
Tôi muốn sự tự tin của các bạn trở nên
rất, rất cao vào cuối tuần thứ 4 mà các bạn có thể làm được điều này.
Chúc may mắn.