Làm thế nào để Sửa đổi các Layouts trong CSS3 - núm vú

Hãy thử một vài bố cục CSS3 để xem bạn muốn làm gì với họ trước khi bắt đầu tạo một dự án sản xuất. Sao chép mã nguồn từ ví dụ trên trang Drive động và đặt nó vào các tệp như bạn mong đợi để sử dụng nó.

Với mục đích của ví dụ này, bạn tạo tệp HTML5 với nội dung sau đây thu được từ mã HTML được hiển thị bằng ví dụ. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 07 của mã có thể tải xuống như TwoColumnLayout. HTML.)

CSS Fixed Layout # 2. 1- (Cố định cố định)

CSS Fixed Layout # 2. 1- Cố định cố định
840px
Cột nội dung: 640px 
Cột bên trái: 200px 
Chân trang

Ví dụ thêm khoảng trắng vào mã được cung cấp trên trang Dynamic Drive nhằm mục đích làm cho nó dễ đọc hơn và cũng cho thấy cấu trúc được tạo ra bằng cách sử dụng các thẻ như thế nào. Bạn nên làm điều tương tự với bất kỳ mã nào bạn có được từ trang web. Bạn muốn chắc chắn rằng bạn hiểu bố cục làm việc như thế nào trước khi bạn bắt đầu thực hiện bất kỳ sửa đổi cần thiết nào.

Ví dụ loại bỏ các tập lệnh động vì bạn không cần chúng để điền vào các phần có nội dung ngẫu nhiên. Tuy nhiên, nó sẽ thêm các ghi chú cho thấy số pixel được sử dụng theo mặc định cho mỗi phần (ví dụ Dynamic Drive chỉ ghi chú kích thước của cột bên trái cố định).

Nếu bạn sửa đổi CSS cho trang này, bạn cũng nên thay đổi các ghi chú bạn tạo về kích thước cột cố định.

Ví dụ cũng sử dụng tệp CSS bên ngoài. Chú ý bổ sung một thẻ vào. CSS cho tệp ngoài không thay đổi từ thẻ cho trang ví dụ như được hiển thị ở đây.

body {margin: 0; đệm: 0; line-height: 1.5em;} b {font-size: 110%;} em {color: red;} #maincontainer {width: 840px; / * Chiều rộng của container chính * / lề: 0 tự động; / * Trung tâm chứa trên trang * /} #topsection {background: #EAEAEA; chiều cao: 90px; / * Chiều cao của phần trên cùng * /} #phần h1 {margin: 0; padding-top: 15px;} #contentwrapper {float: còn lại; width: 100%;} #contentcolumn {margin-left: 200px; / * Đặt lề trái sang LeftColumnWidth * /} #leftcolumn {float: left; chiều rộng: 200px; / * Chiều rộng của cột bên trái * / margin-left: -840px; / * Đặt lề trái cho - (MainContainerWidth) * / background: # C8FC98;} #footer {clear: left; Chiều rộng: 100%; nền đen; màu: #FFF; text-align: trung tâm; padding: 4px 0;} #footer a {color: # FFFF80;}. innertube {margin: 10px; / * Lề cho DIV bên trong mỗi cột (để cung cấp đệm) * / margin-top: 0;}

Tại thời điểm này, bạn có thể tải trang để bắt đầu suy nghĩ về những gì bạn muốn sửa đổi.Đây là trang như xuất hiện mà không sửa đổi sau khi sao chép nó từ trang web và tách HTML khỏi CSS.

Tùy chọn đầu tiên bạn muốn thay đổi là màu sắc được sử dụng cho các vật thể khác nhau. Tất nhiên, các màu sắc cần phải phù hợp với bảng màu cho trang web của bạn. Các mẫu sử dụng các biểu diễn màu lục thập lục. Bạn nên sửa đổi chúng để phù hợp với những gì được sử dụng bởi các mẫu khác trên trang web của bạn (nếu cần).

Các mẫu dựa vào độ rộng cột cố định có thể yêu cầu tinh chỉnh để hoạt động với phần còn lại của trang web. Để thay đổi chiều rộng tổng thể của trang, bạn sửa đổi thuộc tính chiều rộng của #danh sách kiểu nhà cung cấp. Chiều rộng khung bên trái được kiểm soát bởi thuộc tính width của kiểu #leftcolumn.

Kích thước khay nội dung là sự khác biệt giữa chiều rộng kiểu #phương pháp và chiều rộng kiểu # chiều rộng. Dynamic Drive có xu hướng sử dụng đặt tên nhất quán, do đó một bố cục sử dụng cột bên phải cho các liên kết sẽ có một phong cách #rightcolumn mà bạn sửa đổi để thay đổi chiều rộng của cột đó.

Nếu bạn thay đổi kích thước của #leftcolumn hoặc #rightcolumn styles, bạn cũng cần phải thay đổi thuộc tính margin-left của #contentcolumn style để khớp.

Chiều cao của phần trên cùng chỉ là 90px. Điều này có thể gây ra sự cố khi làm việc với tiêu đề lớn hơn. Thay đổi thuộc tính chiều cao của kiểu #topsection để tương thích với các tiêu đề khác trên trang web của bạn.

Tương tự, chân trang không có chiều cao thực tế, vì vậy bạn cần sửa đổi nó bằng cách thêm thuộc tính chiều cao vào kiểu #footer để đảm bảo mỗi trang trong trang web của bạn trông giống nhau.

Các mẫu này cũng dựa vào cả thẻ (đậm) và (nhấn mạnh). Mặc dù cả hai thẻ vẫn được hỗ trợ bởi HTML5, nhưng có một cảnh báo mạnh mẽ với thẻ để sử dụng nó chỉ như là phương án cuối cùng.

Nếu bạn có kế hoạch sử dụng lâu dài các mẫu này, bạn nên thay thế các thẻ với hoặc các thẻ, hoặc tốt hơn nữa, chỉ cần tránh sử dụng và thẻ hoàn toàn ủng hộ định dạng CSS.

Các thẻ này là phần còn lại từ những ngày trước khi CSS làm cho nó có thể thêm các hình thức khác nhau của sự nhấn mạnh và đậm bằng cách sử dụng font-style và font-weight properties. Ví dụ cho thấy thẻ còn nguyên vẹn, nhưng đề xuất là loại bỏ chúng và sử dụng các loại định dạng khác thay thế.