Trang Chủ Xã hội Truyền thông Thay đổi kích thước các phần tử bằng CSS và Douglas Robot JavaScript - núm vú

Thay đổi kích thước các phần tử bằng CSS và Douglas Robot JavaScript - núm vú

Mục lục:

Video: Week 0, continued 2025

Video: Week 0, continued 2025
Anonim

Mỗi phần tử trong một tài liệu HTML là một hình chữ nhật. Ngay cả khi một phần tử trông giống một vòng tròn (như đôi mắt của Douglas), nó thực sự được đối xử như một hình chữ nhật xung quanh hình tròn. Bởi vì tất cả mọi thứ là một hình chữ nhật, bạn có thể thay đổi kích thước của các phần tử bằng CSS bằng cách điều chỉnh độ rộng và chiều cao của chúng.

Để bắt đầu, hãy mở trình duyệt web của bạn và đăng nhập vào bảng điều khiển công cộng. Sau đó làm theo các bước sau:

  1. Tìm fiddle được gọi là Chương 6: Phong cách Robot - Bắt đầu và nhấp vào tiêu đề để mở nó.

    Bạn cũng có thể đi trực tiếp vào ứng dụng Robot.

    Bạn thấy một màn hình với HTML trong bảng điều khiển HTML và một số CSS trong bảng điều khiển CSS.

  2. Nhấp vào Fork ở trình đơn trên cùng để tạo một bản sao của câu cá trong tài khoản JSFiddle của chính bạn.

Khi bạn đo chiều rộng và chiều cao của sự vật trong thế giới thực, bạn sử dụng đơn vị đo lường chẳng hạn như inch, cm hoặc mét. Khi bạn đo mọi thứ trong thế giới CSS, bạn có nhiều đơn vị đo khác nhau. Chúng bao gồm px (pixels) và% (percent):

  • Pixels: Pixel là điểm nhỏ nhất có thể được hiển thị trong trình duyệt web của bạn. Khi bạn chỉ định chiều rộng và chiều cao bằng pixel, bạn sẽ cho trình duyệt biết chính xác độ rộng và chiều cao của một phần tử phải là bao nhiêu. Vấn đề với việc sử dụng các điểm ảnh cho các phép đo là nó luôn hiển thị những thứ có cùng kích thước - ngay cả khi cửa sổ trình duyệt của người dùng là rất lớn hoặc rất nhỏ.

  • Phần trăm: Khi bạn chỉ định chiều rộng và chiều cao với phần trăm, bạn đang nói với trình duyệt để làm cho phần tử này có tỷ lệ phần trăm nhất định về kích thước của cha mẹ của phần tử.

Bạn đã xác định tất cả các phép đo của Douglas sử dụng phần trăm. Điều này có lợi vì nó có nghĩa là bất kể bạn đang tìm kiếm Douglas trên điện thoại di động hay trên Jumbotron ở Times Square, kích thước của nó sẽ thích nghi để phù hợp với màn hình. Để xem sự kỳ diệu của kích thước tương đối trong hành động, kéo các đường viền cửa sổ trong JSFiddle để làm cho các kết quả ngăn lớn hơn hoặc nhỏ hơn. Lưu ý làm thế nào Douglas thay đổi kích thước cùng với kích thước của cửa sổ.

Có thể bạn đã từng nghe thuật ngữ thiết kế đáp ứng . Thiết kế đáp ứng nhằm tạo ra nội dung web linh hoạt và đáp ứng với kích thước màn hình của người dùng. Cách bạn chỉ định kích thước của Douglas là một ví dụ về thiết kế đáp ứng.

Thực hiện một vài thay đổi đối với một số phần của Douglas:

  1. Tìm luật CSS cho lớp mắt.

  2. Thay đổi chiều rộng thành 30% và chiều cao là 30%.

    Bạn sẽ nhận thấy mắt của Douglas trở nên to hơn. Nhưng chúng cũng không còn trung tâm trên khuôn mặt, như thể hiện ở đây!

    Đôi mắt to lớn của Douglas đã lệch khỏi tâm.
  3. Tìm luật CSS cho lớp cánh tay.

    . cánh tay {background-color: #cacaca; vị trí: tuyệt đối; đầu: 35%; chiều rộng: 5%; chiều cao: 40%;}
    

    . cánh tay CSS kiểm soát màu sắc và kích thước của cả hai cánh tay.

    The. cánh tay cũng kiểm soát khoảng cách của cánh tay từ trên cùng của cửa sổ.

  4. Thay đổi chiều rộng của cánh tay xuống còn 3% và sau đó nhấp vào Run để cho cánh tay Douglas gầy.

  5. Tìm luật CSS cho cánh tay trái của Douglas.

  6. Thêm thuộc tính để thay đổi chiều rộng lớn hơn chiều cao.

    Ví dụ:

    #leftarm {position: absolute; trái: 70%; chiều rộng: 27%; height: 5%;}
    

    Nhấp vào chạy để xem sự thay đổi. Douglas hiện đang trỏ màn hình, như bạn có thể nhìn thấy ở đây.

    Douglas đang chỉ tay!

Trong bước cuối cùng, bạn đã thêm chiều rộng và chiều cao vào một quy tắc với bộ chọn ID, mặc dù phần tử đã chọn đã có chiều rộng và chiều cao được áp dụng bằng bộ chọn lớp.

Mặc dù đã có chiều rộng và chiều rộng cho cánh tay trái, cánh tay lấy chiều rộng và chiều cao mới từ quy tắc bằng bộ chọn ID.

Hiểu biết về tầng

Tay trái của robot chỉ có thể là một chiều rộng và chiều rộng. Vậy điều gì xảy ra khi hai quy tắc CSS khác nhau cố gắng đặt chiều rộng và chiều cao của cánh tay một cách riêng biệt? Điều gì xảy ra là trình duyệt giữ một sự cạnh tranh giữa hai quy tắc CSS.

Trình duyệt sẽ xem xét các yếu tố như quy tắc CSS được đặt cuối cùng và cái nào cụ thể hơn để xác định độ rộng và chiều cao nào sẽ được sử dụng.

Trong cuộc cạnh tranh tầng này, các thuộc tính ID giành chiến thắng đối với các thuộc tính của lớp vì chúng là duy nhất cho một phần tử, và do đó cụ thể hơn thuộc tính lớp.

Các yếu tố định vị với CSS

Ngoài việc cung cấp cho bạn khả năng thay đổi màu sắc và cách các phần tử xuất hiện trong trình duyệt, CSS cũng cho phép bạn thay đổi vị trí trên màn hình một phần tử sẽ xuất hiện. Thay đổi vị trí một phần tử sẽ xuất hiện được gọi là vị trí một phần tử.

Thay đổi vị trí của một số phần của Douglas:

  1. Tìm quy tắc CSS kiểm soát mắt phải của Douglas.

    #righteye {position: tuyệt đối; trái: 20%; top: 20%;}
    

    Tài sản đầu tiên, vị trí, cho trình duyệt biết cách giải thích các thuộc tính vị trí cụ thể (như trên và bên trái). Khi bạn sử dụng vị trí tuyệt đối, phần tử đã chọn (mắt trong trường hợp này) có thể được định vị bất cứ nơi nào trong đầu mà không cần lo lắng về việc liệu một phần khác trong đầu sẽ đẩy nó ra khỏi đường. Nếu hai phần tử định vị hoàn toàn được đặt ở cùng một vị trí, chúng sẽ chồng chéo nhau.

    Mắt phải được thiết lập để hiển thị 20% dưới (chiều cao của đầu) từ mép trên của phần đầu và 20% (chiều rộng của đầu) ở bên phải cạnh trái của cái đầu.

  2. Di chuyển mắt phải sang trái và lên bằng cách thay đổi giá trị của cả hai trái và trên cùng sang phần trăm nhỏ hơn.

    Ví dụ:

    #righteye {position: absolute; trái: 10%; top: 10%;}
    

    Nhấp Chạy để xem kết quả, như được hiển thị ở đây.

    Douglas nâng mắt phải.
Thay đổi kích thước các phần tử bằng CSS và Douglas Robot JavaScript - núm vú

Lựa chọn của người biên tập

Làm thế nào để Thiết lập nhân viên trong QuickBooks Quá trình biên chế nâng cao - núm vú

Làm thế nào để Thiết lập nhân viên trong QuickBooks Quá trình biên chế nâng cao - núm vú

Sau khi bạn thành lập công ty của bạn thông tin cho bảng lương trong QuickBooks, bạn đã sẵn sàng để thiết lập nhân viên cho biên chế. Là một phần của quy trình Thiết lập biên chế nâng cao, QuickBooks hiển thị trang web nơi bạn có thể thêm nhân viên của mình. Bạn cũng có thể thêm nhân viên bằng cách hiển thị Trung tâm Nhân viên. (Chọn lệnh Employee → Employee Center và nhấp chuột ...

Làm thế nào để Thiết lập biểu đồ Tài khoản QuickBooks 2012 - núm vú

Làm thế nào để Thiết lập biểu đồ Tài khoản QuickBooks 2012 - núm vú

Biểu đồ tài khoản Danh sách trong QuickBooks 2012 là danh sách các tài khoản bạn sử dụng để phân loại thu nhập, chi phí, tài sản, nợ phải trả và số vốn chủ sở hữu của chủ sở hữu. Nếu bạn muốn xem chi tiết đơn hàng cụ thể của dữ liệu tài chính trên báo cáo, bạn cần một tài khoản cho chi tiết đơn hàng đó. Nếu bạn muốn ngân sách ...

Cách Thiết lập Máy in để in QuickBooks 2015 Hóa đơn - núm vú

Cách Thiết lập Máy in để in QuickBooks 2015 Hóa đơn - núm vú

Nếu bạn dự định in hóa đơn từ QuickBooks 2015, bạn chỉ cần cài đặt máy in hóa đơn một lần, nhưng bạn cần phải chỉ rõ một số quy tắc in ấn chung về hoá đơn. Các quy tắc này cũng áp dụng cho các bản ghi nhớ tín dụng và các đơn đặt hàng, bằng cách này. Để cài đặt máy in của bạn để in hóa đơn, làm theo các bước sau: Chọn ...

Lựa chọn của người biên tập

Hình ảnh Các chế độ phát trên một Canon EOS 70D - núm vú

Hình ảnh Các chế độ phát trên một Canon EOS 70D - núm vú

Một trong những điều tốt nhất về Canon EOS 70D của bạn có thể xem ảnh ngay sau khi bạn chụp chúng. Không còn đoán xem bạn có bị bắn mà bạn muốn hay cần thử lại; không còn lãng phí tiền bạc khi phát triển và in những bức ảnh bốc mùi. Để chuyển máy ảnh sang chế độ Phát lại, chỉ cần ...

Lựa chọn của người biên tập

Cách xem tab Thông báo của bạn trên Twitter - những con cần

Cách xem tab Thông báo của bạn trên Twitter - những con cần

Xem ai đang tương tác với bạn trên Twitter trực tiếp qua @replies và @mentions (Tweets để đáp ứng hoặc nói chung đề cập đến người dùng cá nhân), các mục yêu thích (cách thừa nhận hoặc đánh dấu trang Tweets) và retweets (chia sẻ nội dung đã được đăng bởi một người dùng Twitter khác). Yêu thích Nhấn vào biểu tượng ngôi sao, hoặc nút Video yêu thích, thêm vào Tweet của bạn ...

Sai lầm Twitter # 1: @reply versus @mention - núm vú

Sai lầm Twitter # 1: @reply versus @mention - núm vú

Mọi người dùng Twitter - mới và cũ - đã trở thành nạn nhân của sự nhầm lẫn giữa @reply versus @mention. Khi nhà phát triển thịnh vượng và nhà chiến lược nội dung Anum Hussein giới thiệu 21 mẹo đăng bài xã hội trên hội nghị INBOUND hàng năm, mẹo để hiểu sự khác biệt giữa @reply và @mention là số một ...

Mẹo vặt để xây dựng sự hiện diện của cá nhân trên Twitter

Mẹo vặt để xây dựng sự hiện diện của cá nhân trên Twitter

Twitter ban đầu phổ biến để giúp các cá nhân giữ liên lạc với bạn bè và người quen của họ qua các cập nhật nhỏ. Nhiều Twitterers cá nhân vẫn có xu hướng sử dụng Twitter theo cách này, cập nhật một vòng tròn gần gũi của bạn bè về những suy nghĩ và những sự kiện xảy ra trong cuộc sống của họ. Theo thời gian, bạn có thể theo kịp với những người mà bạn có thể không liên hệ ...