Cách tạo tiêu đề từ đám mây html css. Tiêu đề trang

Bố trí trang là quá trình phát triển cấu trúc của một tài liệu HTML, kết quả của nó là một trang web. Cấu trúc của một trang web được xác định bởi các thẻ HTML tương ứng. Thẻ - khối chứa hình chữ nhật dành cho nội dung - không xuất hiện trong cửa sổ trình duyệt. Chúng cho trình duyệt biết về loại nội dung và trình duyệt, dựa trên thông tin này, sẽ hiển thị nội dung của chúng - tệp văn bản hoặc phương tiện.

Cách tạo cấu trúc trang bằng các khối (bố cục khối)

1. Cách chia bố cục trang của bạn thành nhiều phần

Để tạo bố cục trang, bạn cần chọn các phần (section) chính của tài liệu. Bạn có thể đọc thêm về các yếu tố cắt trong bài viết.

Một trang web tiêu chuẩn chứa các phần sau:


Cơm. 1. Các phần chính của trang

Chúng tôi sẽ không sử dụng phần tử

, vì nó không được hỗ trợ bởi tất cả các trình duyệt.

Yếu tố

,
- dựa trên khối nên chúng sẽ chiếm toàn bộ chiều rộng của khối chứa của chúng - phần tử . Một trang có bố cục này sẽ trông đẹp mắt màn hình nhỏ, nhưng trên các thiết bị có độ phân giải cao Văn bản của những trang như vậy sẽ khó đọc. Vì vậy, bạn cần thêm tag container cho nội dung – nội dung của từng phần:


Cơm. 2. Các phần chính của trang có thẻ vùng chứa

và đặt chiều rộng tối đa cho nó, phần đệm, tính năng này sẽ tách nội dung khỏi các cạnh màn hình của thiết bị có độ phân giải thấp, cũng như lề, cho phép bạn căn chỉnh vùng chứa ở giữa khối cha mẹ:

Vùng chứa ( chiều rộng: 100%; chiều rộng tối đa: 1024px; /*chiều rộng tối đa có thể có giá trị khác*/ phần đệm: 0 15px; lề: 0 tự động; )

Vì vậy, chúng tôi đã nhận được một khung cho trang của mình (chiều cao của các phần là trong trường hợp nàyảo, vì không có nội dung nên các phần có chiều cao bằng 0).

2. Bố cục tiêu đề trang web và vị trí các thành phần của nó

Hãy bắt đầu đánh dấu phần đầu tiên, phần được gọi là tiêu đề của trang web. Yếu tố

được thiết kế để nhóm các thông tin giới thiệu và hướng trợ theo trang/trang. Hãy thêm nó vào trong thẻ
biểu tượng trang web và liên kết điều hướng:

LOGO

Cơm. 3. Tiêu đề trang web có thêm logo và liên kết

Logo ( float: left; ) nav ( float: right; ) nav ul ( lề: 0; đệm: 0; list-style: none; ) nav li ( display: inline-block; /*một cách để đặt các phần tử trong một đường kẻ */ )

Có một số cách để đặt khối phần tử Mỗi dòng. Tất cả đều được đưa ra trong bài học.


Cơm. 4. Hậu quả của việc sập khối container

Lưu ý rằng sau khi chúng tôi áp dụng gói, tiêu đề sẽ biến mất. Điều này xảy ra vì các phần tử nổi (những phần tử có tập thuộc tính float) bị xóa khỏi luồng thông thường và vùng chứa gốc không còn nhìn thấy chiều cao của chúng nữa, vì vậy phần tử

và phần tử bên trong nó có class.container bị sập. Để khắc phục tình trạng này, hãy sử dụng tính năng dọn dẹp luồng cho một phần tử có lớp .container:

Vùng chứa:sau ( nội dung: ""; hiển thị: bảng; xóa: cả hai; )

Chúng ta cũng sẽ thêm phần đệm dọc vào nó, tách các phần tử bên trong nó khỏi các cạnh của tiêu đề. Kết quả là, các kiểu sẽ trông như thế này:

Vùng chứa ( chiều rộng: 100%; chiều rộng tối đa: 1024px; phần đệm: 15px; lề: 0 tự động; )
Cơm. 5. Làm sạch luồng

Hãy xem xét tình huống trong đó hình ảnh đóng vai trò là biểu tượng. Nó có thể được thêm trực tiếp vào thẻ hoặc làm hình nền. Hình ảnh sẽ có chiều cao riêng, có thể rất khác so với chiều cao của menu điều hướng, vì vậy chúng ta sẽ gặp phải một vấn đề căn chỉnh theo chiều dọc các phần tử tiêu đề.


Cơm. 6. Hình ảnh logo

Trong ví dụ của chúng tôi, chiều cao của logo là 38px, vì vậy để căn chỉnh các liên kết menu vào giữa tiêu đề, bạn cần cung cấp cho chúng chiều cao dòng phù hợp:

Điều hướng a (trang trí văn bản: không có; chiều cao dòng: 38px; ) Hình. 7. Căn chỉnh các liên kết menu tiêu đề

3. Tạo lưới cho phần chính của trang

Phần chính của trang thường là một mạng lưới các khối có chiều rộng khác nhau. Việc định vị các khối như vậy cũng được thực hiện bằng cách sử dụng thuộc tính nổi. Hãy bọc từng hàng khối khối bổ sung với lớp.row:


Cơm. 7. Lưới phần chính của page.col-1-2 ( width: 50%; float: left; ) .col-1-3 ( width: 33.3333333333%; float: left; ) .col-1-4 ( chiều rộng: 25 %; float: trái; .col-2-3 ( chiều rộng: 66.6666666667%; float: left; )

Đối với một phần tử có lớp .row, chúng tôi cũng áp dụng tính năng dọn dẹp luồng:

Container:after, .row:after ( content: ""; display: table; clear: cả hai; )

Để tách các hàng với nhau, bạn có thể thêm lề dưới:

Hàng ( lề-dưới: 15px; )

Chiều cao của các khối lưới được xác định bởi chiều cao của nội dung bên trong chúng, vì vậy nó có thể khác nhau:


Cơm. 8. Chiều cao khác nhau của các phần tử lưới

Chiều cao của các khối có thể được cố định bằng cách chỉ định nó một cách rõ ràng, ví dụ: .row div (height: 100px) . Nhưng trong trường hợp này, bạn cần đảm bảo rằng khi thêm khả năng thích ứng vào bố cục, nội dung của các khối sẽ không vượt ra ngoài rìa của khối.

Nếu bạn cần thiết lập màu nềnđối với các khối hàng, việc này có thể được thực hiện như sau: đối với một phần tử có lớp .row, hãy thêm lớp mới, điều này sẽ cho phép bạn chỉ cách điệu hàng này (nó sẽ trở thành .row row-one), chúng tôi sẽ chỉ định cho nó màu nền của khối nhỏ hơn về chiều cao và đối với khối cao hãy đặt màu riêng cho nó, nghĩa là bằng cách này, chúng ta sẽ tạo nền nền.

Lorem ipsum dolor ngồi amet.
Bạn có thể bị rối loạn tạm thời và khó chịu. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.
.row-one ( nền: lightblue; ) .col-2-3 ( chiều rộng: 66.6666666667%; float: trái; nền: vỏ sò; )
Cơm. 9. Nền mờ

Nếu phần chính của trang chỉ chứa hai khối thì hàng trình bao bọc bổ sung có thể không được thêm vào:

4. Bố cục chân trang

Chân trang hoặc chân trang, thường chứa thông tin bản quyền, liên kết bổ sung và như thế. Tất cả thông tin này cũng được đặt trong các cột, có thể có chiều rộng giống nhau hoặc khác nhau.

Thành phần trang web mà chúng ta sẽ xem xét hôm nay là một trong những thành phần quan trọng nhất và rất đáng chú ý trên trang. Đôi khi họ không làm cho nó quá lớn. Nó có thể là tĩnh hoặc động. Tất cả phụ thuộc vào mong muốn và trí tưởng tượng của người thiết kế và chủ sở hữu trang web. Bạn có thể đã đoán được chúng ta sẽ nói về điều gì - đúng vậy, về tiêu đề trang web. Hôm nay chúng ta sẽ xem xét bốn cách những cách không chuẩn, nhờ đó bạn có thể thiết kế phần này của trang web. Nhờ những phương pháp này, trang web của bạn chắc chắn sẽ nổi bật so với những trang khác.

Bạn có thể xem bốn ví dụ tại liên kết theo dõi:

Tải xuống

Làm thế nào để sử dụng? - Tiêu đề hoạt hình cho trang web

phần HTML

Trong mã trang, tất cả những gì bạn cần chèn là:

1 2 3 <div id = "tiêu đề lớn" class = "tiêu đề lớn" > id = "demo-canvas" > </div>

trong khối

với id và lớp tiêu đề lớn có một thẻ , trong đó tất cả hoạt ảnh diễn ra. Một khối
chỉ chứa một hình nền.

Phần Javascript

Sau đó ở cuối trang bạn cần kết nối thư viện cần thiết. Chúng ở trong thư mục js(trong kho có nguồn - link đầu bài).

Ví dụ: số 1 bạn cần bao gồm các thư viện sau:

Dưới đây tôi đã chụp ảnh màn hình của từng hiệu ứng.

Trong bài viết trước chúng tôi đã làm khung của chúng tôi mẫu HTML , đã sẵn sàng để điền và đăng ký. Hôm nay tôi sẽ kể cho bạn nghe cách tạo tiêu đề trang web đẹp (phần trên cùng) và một menu đơn giản. Hôm nay chúng ta cũng sẽ thực hiện một số thay đổi về kiểu dáng của các khối khác.

Vậy chúng ta có gì khoảnh khắc này? Bây giờ chúng tôi có những phong cách này:

Html, nội dung ( chiều cao: 100%; màu: #000; nền: #FFFFFF; word-wrap: break-word; cỡ chữ: 12px; họ phông chữ: Verdana, Arial, Sans-Serif; ) #wrapper ( chiều cao :auto !quan trọng; chiều cao: 100%; chiều cao tối thiểu: 100%; ) #header ( chiều cao: 100px; ) #container ( chiều rộng tối thiểu: 800px; ) #center ( lề: 0px 200px 0px 200px; ) float:left; width:200px; ) #right ( float:right; width:200px; ) #footer ( Height:100px; Margin-top:-100px; ) .clear ( clear:both; ) #space ( Height:100px ; )

Và đây là mã cho chính mẫu đó:

Tên của trang web

Trước hết, hãy thực hiện một số thay đổi về kiểu dáng của khối bao bọc:

#wrapper ( chiều cao: tự động ! quan trọng; chiều cao: 100%; chiều cao tối thiểu: 100%; chiều rộng: 1024px; lề: 0 tự động; căn chỉnh văn bản: trái; )

Tôi đặt chiều rộng cố định - chiều rộng của khối, kích thước 1024 pixel, căn chỉnh khối đó vào giữa và văn bản trong đó ở bên trái bằng cách sử dụng text-align: left. Chúng ta có thể căn chỉnh khối vào giữa bằng cách sử dụng kiểu lề, đặt lề trên và lề dưới thành 0 và chiều rộng thành tự động. Thật không may, điều này không phải lúc nào cũng có tác dụng trình duyệt web IE 6, vì vậy trong phần nội dung tôi đã viết text-align: center; và đó là lý do tại sao tôi phải căn chỉnh văn bản trong khối gói và chân trang sang bên trái. Tôi cũng đã chỉ định lề: 0 trong phần nội dung, từ đó đặt lề từ các cạnh thành 0 pixel. Kết quả là Body đã có các kiểu sau:

Html, nội dung ( chiều cao: 100%; màu: #000; nền: #FFFFFF; word-wrap: break-word; cỡ chữ: 12px; họ phông chữ: Verdana, Arial, Sans-Serif; lề: 0; văn bản -căn chỉnh: giữa)

Tôi cũng đã thực hiện các thay đổi đối với tầng hầm:

#footer ( chiều rộng: 1024px; lề: 0 tự động; căn chỉnh văn bản: trái; chiều cao: 100px; lề trên:-100px; nền: #4a90d9; )

Mọi thứ ở đây đều tương tự như khối bao bọc: đặt chiều rộng thành 1024px, căn chỉnh khối ở giữa và căn chỉnh văn bản sang trái. Tôi cũng đã thêm lề-top vào vùng chứa: lề-top: 20px; và loại bỏ chiều rộng tối thiểu vì chúng tôi có chiều rộng bao bọc cố định.

Chà, chúng tôi đã chuẩn bị mẫu, đã đến lúc chuyển sang tiêu đề trang web. Các phong cách sẽ như thế này:

#header ( chiều cao: 140px; nền: #fff; đệm-top: 40px; )

Chiều cao khối là 140px, nền màu trắng và lề từ cạnh trên là 40 pixel. Đó là tất cả những thay đổi về kiểu tiêu đề.
Cái gì? Đây là tất cả? Và có cả một bài viết được đặt theo tên này?
Dĩ nhiên là không. Tiêu đề trang web sẽ bao gồm các thành phần khác: logo và menu, sẽ được thiết kế riêng.

Hãy đăng ký Mã mẫu HTML Bên trong khối tiêu đề có dòng này:
Đây thực chất là một liên kết đến trang chủ không có văn bản nhưng được gán lớp class="logo". Bây giờ bạn cần phải đăng ký nó trong phong cách css.

Logo ( display:block; chiều cao: 104px; chiều rộng: 390px; nền: url("image/logo.png") không lặp lại; )

Tôi đã tạo khối phần tử, đặt chiều rộng và chiều cao cho nó, đồng thời tạo hình ảnh logo làm nền mà tôi đặt trong thư mục hình ảnh. Tất cả các hình ảnh mẫu sẽ được đặt trong thư mục này. Kích thước hình ảnh là 388*100 pixel, vậy tại sao kích thước khối hơi khác nhau? Tôi đã tạo chiều cao 104 pixel để có một khoảng trống từ hình ảnh logo ở dưới cùng giữa menu tương lai và logo, đồng thời lấy chiều rộng thêm hai pixel để đề phòng, vì tôi đã gặp một vài lần Mozilla xác định sai kích thước của hình ảnh và cắt nó một chút. Vậy là chúng ta đã xong phần logo. Thực đơn trong

Đã xem video khóa học trên bố trí khối trang web từ Andrey Morkovina.

Tôi bắt đầu xem với cảm giác như sắp học được điều gì đó mới mẻ. Nhưng tôi có đủ kiên nhẫn để xem đến phần thứ chín. Tôi cảm thấy mệt mỏi khi chứng kiến ​​tác giả vật lộn với bố cục của mẫu và đặc biệt là cách tạo tiêu đề.

Vì lý do nào đó, tác giả chỉ cắt bỏ một phần nền có điều hướng, chèn hình ảnh logo vào khung html và bọc nó bằng một liên kết, cố gắng đoán vị trí điều hướng bằng cách sử dụng tuyệt đối hoặc định vị tương đối. Tôi quyết định thử tự mình tạo tiêu đề trang web theo cách mà tôi thấy phù hợp hơn.

Tôi dựa trên việc tạo tiêu đề dựa trên thuộc tính của các lớp lồng nhau trên

, , xác định các thuộc tính của việc căn giữa trang và thiết lập chiều rộng của nó: #wrap ( width : 800px ; chiều cao : 100% ; lề : 0 auto ; nền : #c0c0c0 ; )

Sau đó một lớp được tạo ra

và đặt chiều cao của nó: #header ( chiều rộng : 100% ; chiều cao : 70px ; )

Sau đó tôi tạo một lớp

1 id id="điều hướng"
, nhiệm vụ của nó sẽ chứa hình nền cho danh sách điều hướng tiêu đề. Tôi đặt chiều cao của lớp này bằng chiều cao của tiêu đề và đặt hình nền ở góc bên phải của khối. Chiều cao của nó bằng chiều cao của tiêu đề, vì vậy chỉ cần quét theo chiều ngang sang phải và để nguyên theo chiều dọc là đủ.

Thiết kế ngắn và sẽ không chiếm toàn bộ chiều rộng của tiêu đề mà chỉ chiếm một phần trong đó bên phải, vừa đủ để chứa danh sách điều hướng. Mã CSS cho lớp này như sau:

#nav ( nền : url(i/bg-nav.gif) #b318cf 100% 0 không lặp lại ; chiều cao : 70px ; )

Bây giờ tôi tạo một lớp khác

và sẽ nằm trên cùng của lớp này, chồng lên nó.

Do đó nền của lớp

Tôi đặt rõ ràng chiều cao của nó. Mã có các thuộc tính được hiển thị bên dưới: #head ( nền : url(i/bg-header.gif) #2b66c8 0 0 no-repeat ; chiều cao : 50px ; )

Vâng, vấn đề thực tế đã được giải quyết. Trong trường hợp này, cả vị trí tuyệt đối và tương đối đều không được sử dụng. chỉ bù đắp nền của lớp. Nó vẫn còn để tạo lớp cuối cùng, lớp này sẽ thực hiện nhiệm vụ của logo trang web. Tôi đặt nó lên trên tất cả các lớp khác và làm cho nó có thể nhấp vào được trong toàn bộ không gian của nó.

Tuy nhiên tôi sẽ sử dụng nó một lần nữa hình nền, mà tôi sẽ đặt bên trong lớp này. Không có img trong mã html! Không cần phải định vị hay dịch chuyển nó đi bất cứ đâu vì theo mặc định nó sẽ nằm ở bên trái. góc trên cùng khối ( như tôi dự định vì sự đơn giản của thí nghiệm). Tôi sẽ chỉ thiết lập rõ ràng chiều cao và chiều rộng của lớp này, bằng chiều cao và chiều rộng Hình nền:

#logo ( nền : url(i/logo.gif) #36cf18 0 0 không lặp lại ; chiều rộng : 30px ; chiều cao : 30px ; )

Để làm cho lớp có thể nhấp được, tôi đặt một liên kết bên trong nó. Vì ban đầu nó là phần tử nội tuyến (

.
1 hiển thị:khối
. Bây giờ, hãy mở rộng liên kết, đặt chiều rộng và chiều cao của nó theo tỷ lệ phần trăm. Tất nhiên, bạn có thể chỉ định các tham số này bằng cách sử dụng pixel vì kích thước của logo đã biết. Nhưng tốt hơn hết bạn nên giao nhiệm vụ này cho trình duyệt – hãy để nó tự tính toán kích thước của khối liên kết: #logo a ( display : block ; width : 100% ; Height : 100% ; )

Việc còn lại là tạo ra Chức năng điều hướng tiêu đề, phải được đặt ở trên cùng của lớp

. Vì theo mã, lớp là .

Bây giờ chỉ cần chuyển danh sách sang phải bằng cách sử dụng

1 nổi: đúng
và gán các thuộc tính thông thường cho nó để định vị nó theo chiều ngang và tạo kiểu cho nó: #nav ul ( list-style-type : none ; float : right ; ) #nav li ( display : inline-block ; ) #nav a ( text-trang trí : không có ; màu sắc : #fff ; chiều cao dòng : 20px ;

Điểm duy nhất gây khó khăn cho tôi là những vết lõm khó nhận thấy xuất hiện giữa khối bên ngoài

. Ban đầu, tôi đăng ký tài sản cho họ, vấn đề đã được giải quyết. Đối với các phần tử và đối với tôi, tôi cũng đặt thêm chiều cao của dòng. Các khoảng trống biến mất và các mục menu kéo dài đến toàn bộ chiều cao của khối chính.

Thế là xong, tiêu đề trang web đã sẵn sàng. Nếu bạn nhìn vào mã html, bạn có thể thấy nó “đúng”. Nghĩa là, nó không bị vấy bẩn bởi đủ loại

1 hình ảnh
. Các dấu hiệu rất đơn giản Thuộc tính CSS, sẽ được đảm bảo hoạt động trên hầu hết các trình duyệt. Đồng thời, cô ấy sẽ không “di chuyển” đi đâu cả.

Dưới đây tôi sẽ đưa ra mã đầy đủ khung html và mã CSS.

/* đặt lại */ * ( lề : 0 ; phần đệm : 0 ; ) /* main */ #wrap ( chiều rộng : 800px ; chiều cao : 100% ; lề : 0 tự động ; nền : #c0c0c0 ; ) #header ( chiều rộng : 100 % ; chiều cao : 70px ; ) #nav ( nền : url(i/bg-nav.gif) #b318cf 100% 0 không lặp lại ; chiều cao : 70px ; ) #nav ul ( list-style-type : none ; float : phải ) #nav li ( hiển thị : khối nội tuyến ; ) #nav a ( trang trí văn bản : không ; màu : #fff ; font-weight : đậm ; lề phải : 15px ; chiều cao dòng : 20px ; hiển thị : nội tuyến -block ; ) #head ( nền : url(i/bg-header.gif) #2b66c8 0 0 không lặp lại ; chiều cao : 50px ; ) #logo ( nền : url(i/logo.gif) #36cf18 0 0 không -repeat ; chiều rộng : 30px ; chiều cao : 30px ; ) #logo a ( hiển thị : khối ; chiều rộng : 100% ; chiều cao : 100% ; )

Ở đây tôi sẽ trình bày sơ đồ tôi đã vẽ về vị trí của tất cả các khối trong tiêu đề trang web.

Thường thì có vẻ như nhiệm vụ đơn giản bố cục yêu cầu cấu trúc đánh dấu HTML phức tạp và sử dụng các thủ thuật CSS. Việc căn giữa các phần tử hoặc căn chỉnh nội dung có thể rất tẻ nhạt. Một nhiệm vụ như vậy là căn chỉnh các thành phần ở đầu trang web sao cho logo ở bên trái và các mục menu ở bên phải. Bạn có thể sử dụng float và vị trí: tuyệt đối và để căn chỉnh theo chiều dọc, bạn có thể thêm lề và phần đệm cho các phần tử khác nhau. Có vẻ như không có gì phức tạp. Nhưng nếu trang web được hiển thị chính xác trên thiêt bị di động, nhiều vấn đề phát sinh.

Dưới đây là một cách ngắn gọn để giải quyết vấn đề này.

Đánh dấu HTML càng đơn giản càng tốt:

Rất tệ

Chiều cao của tiêu đề được cố định, thêm căn chỉnh văn bản: căn chỉnh, đối với các phần tử con:

Tiêu đề ( căn chỉnh văn bản: căn đều; khoảng cách chữ: 1px; chiều cao: 8em; phần đệm: 2em 10%; nền: #2c3e50; màu: #fff; )

Thêm vào hiển thị: khối nội tuyến cho tất cả các phần tử điều hướngđể bạn có thể sắp xếp chúng lần lượt:

Tiêu đề h1, điều hướng tiêu đề ( display: inline-block; )

Thuộc tính căn chỉnh văn bản: căn chỉnhđã hoạt động theo cách chúng ta muốn, chúng ta cần sử dụng một thủ thuật nhỏ với các phần tử giả, được tìm thấy trong bài viết Kỹ thuật lưới CSS hợp lý hoàn hảo bằng cách sử dụng khối nội tuyến, của Jelmer de Maat:

Header::after ( nội dung: ""; hiển thị: khối nội tuyến; chiều rộng: 100%; )

Kết quả là căn chỉnh theo chiều ngang, không sử dụng trôi nổivị trí: tuyệt đối. Bây giờ bạn cần căn chỉnh các phần tử theo chiều dọc. sử dụng căn chỉnh theo chiều dọc cho các phần tử điều hướng sẽ có sự phụ thuộc vào chiều cao của khối cha - tiêu đề. Và điều này không đúng lắm. Ví dụ về việc sử dụng Vertical-align: top và Vertical-align: middle trên jsbin. Dưới đây có lẽ là nhất Một cách thuận tiện căn chỉnh theo chiều dọc.

Hãy sử dụng lại các phần tử giả. sử dụng một ví dụ từ bài viết Định tâm vào điều chưa biết, được đề cập bởi Michał Czernow:

Tiêu đề h1 ( chiều cao: 100%; ) tiêu đề h1:: trước ( nội dung: ""; hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; chiều cao: 100%; )
Kết quả là những gì bạn cần:

Vẫn còn phải giải quyết hai vấn đề: ánh xạ chính xác cho số lượng lớn văn bản trong tiêu đề và khả năng thích ứng. Nếu tiêu đề trang quá dài, bố cục sẽ bắt đầu trượt ra ngoài:

Sử dụng thủ thuật phần tử giả trên tiêu đề:

Mã CSS

tiêu đề ( text-align:just; chiều cao: 15em; phần đệm: 2em 5%; nền: #2c3e50; màu: #fff; ) tiêu đề::after ( nội dung: ""; hiển thị: khối nội tuyến; chiều rộng: 100%; ) tiêu đề > div, điều hướng tiêu đề, tiêu đề div h1 ( hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; ) tiêu đề > div ( chiều rộng: 50%; chiều cao: 100%; căn chỉnh văn bản: trái; ) tiêu đề > div: :trước (nội dung: ""; hiển thị: khối nội tuyến; căn dọc: giữa; chiều cao: 100%; )

Có vẻ tốt hơn nhiều:

Bây giờ hãy chuyển sang khả năng thích ứng. Có một số cách để giải quyết vấn đề này; bạn có thể đơn giản là không đặt chiều cao của tiêu đề và tất cả các phần tử bên trong sẽ thích ứng với chiều cao. Điều này sẽ không yêu cầu thủ thuật thứ hai với các phần tử giả, ví dụ trực tiếp trên jsbin.

Mã CSS

tiêu đề ( text-align:just; đệm: 2em 5%; nền: #2c3e50; color: #fff; ) tiêu đề::after ( nội dung: ""; hiển thị: khối nội tuyến; chiều rộng: 100%; ) tiêu đề h1, điều hướng tiêu đề ( display: inline-block; dọc-align: middle; ) tiêu đề h1 ( width: 50%; text-align: left; đệm-top: 0.5em; ) điều hướng tiêu đề ( đệm-top: 1em; )

Nếu bạn cần đặt chiều cao của tiêu đề, thì bạn sẽ phải sử dụng thủ thuật thứ hai với các phần tử giả và thêm truy vấn phương tiện cho màn hình kích cỡ khác nhau:

Màn hình @media và (độ rộng tối đa: 820px)( tiêu đề ( chiều cao: tự động; ) tiêu đề > div, tiêu đề >

Kết quả có tính thích ứng và trông như thế này trên thiết bị di động:

Trong ví dụ, 820px được sử dụng để hiển thị rõ ràng; trên một trang web trực tiếp, giá trị tất nhiên phải khác nhau để phù hợp với yêu cầu. Để hỗ trợ Internet Explorer 8, bạn phải sử dụng “:” thay vì “::” cho các phần tử giả.

Mã CSS cuối cùng

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( đệm: 0; lề: 0; ) nội dung ( nền: #1abc9c; họ phông chữ: "Lato", sans-serif; chuyển đổi văn bản: chữ hoa; khoảng cách giữa các chữ cái: 1px;) tiêu đề ( text-align:justify ; chiều cao: 8em; phần đệm: 2em 5%; màu: #fff; ) tiêu đề::after ( nội dung: ""; chiều rộng: 100%; ) tiêu đề > div, tiêu đề > div:: trước, tiêu đề điều hướng, tiêu đề > div h1 ( display: inline-block; Vertical-align: middle; text-align: left; ) tiêu đề > div ( chiều cao: 100%; ) tiêu đề > div:: trước ( nội dung : ""; chiều cao: 100%; ) tiêu đề > div h1 ( font-size: 3em; font-style: italic; ) tiêu đề điều hướng a ( đệm: 0 0.6em; khoảng trắng: nowrap; ) tiêu đề điều hướng a:last -child ( đệm-phải: 0; ) @ màn hình phương tiện và (max-width: 720px)( header ( Height: auto; ) header > div, header > div h1, header nav ( Height: auto; width: auto; display : block; text-align: center;


Kết quả: