Cách đặt css trong tiêu đề. Tiêu đề trang

Chào mọi người. Hôm nay tôi đã xem số liệu thống kê truy vấn tìm kiếm, qua đó mọi người vào blog và nhận thấy rằng có một số blog không liên quan chút nào. Không, không phải blog, mà là các bài báo.

Một trong số chúng cách sửa tiêu đề trang web? Tôi ngay lập tức quyết định chấn chỉnh tình hình và viết một bài báo, vì chủ đề này có liên quan và có những câu hỏi trong lĩnh vực này.

Nói chung, có một số cách để cuộn một trang. Bạn có thể sử dụng javascript, nhưng tôi không rành về chủ đề này và chỉ đang tìm hiểu nó. Vì vậy, hiện tại chúng ta sẽ thực hiện với CSS. Chúa phù hộ, sửa tiêu đề trang web(và không chỉ một chiếc mũ, mà bất kỳ yếu tố nào khác), bạn có thể làm điều đó với “chút máu” :)

Trên thực tế, phương pháp sửa một phần tử khi cuộn trang rất đơn giản và bạn sẽ ngạc nhiên khi vấn đề này được giải quyết dễ dàng như thế nào.

Sửa tiêu đề khi cuộn trang

Để sửa tiêu đề, bạn sẽ phải tạo hai khối. Một - để có thể căn giữa nắp. Và có một đứa trẻ trong đó, điều này sẽ được ghi lại. Hãy bắt đầu nào...

Như thế này html đơn giản kết cấu! Bây giờ hãy thêm phong cách!

#headerMain ( chiều rộng: 920px; chiều cao: 195px; lề: 0px tự động; z-index: 0; ) #header ( chiều rộng: 920px; chiều cao: 195px; nền: url(../img/bg-header.jpg) không -lặp lại; vị trí: cố định; chỉ số z: 9999;

Lúc này tiêu đề sẽ được cố định ở phía trên màn hình và không di chuyển khi cuộn.

Trong bài viết trước chúng tôi đã làm bộ khung của mẫu HTML của chúng tôi, đã 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

Tôi nghĩ nhiều người trong số các bạn đã nhận thấy rằng xu hướng hiện nay bao gồm ngày càng nhiều yếu tố thiết kế hấp dẫn vẫn hiển thị khi người dùng cuộn trang. Theo tôi, điều này rất thuận tiện, đặc biệt nếu đó là điều hướng trang web. Đây chính xác là ví dụ chúng ta sẽ làm ngày hôm nay. Chúng ta sẽ tìm hiểu cách tạo tiêu đề trang web hoạt hình bằng JQuery và CSS3 có hoạt ảnh.

Như thường lệ, điều này hóa ra được thực hiện với ít dòng mã nhất và rất đơn giản, đồng thời rất hiệu quả. Nào, bây giờ chúng ta hãy bắt đầu với bài học.

Nhưng trước tiên tôi muốn gửi lời cảm ơn chân thành tới http://www.webdesignerdepot.com và bây giờ chúng ta hãy bắt đầu.

Ι

HTML

Mã HTML rất đơn giản, chúng ta chỉ cần đặt các thẻ cho , sau đó viết nội dung trang web giữa chúng:

Tiêu đề trang web được đính kèm

Vì đây là ví dụ đơn giản nhất nên ở đây chúng tôi chỉ thêm văn bản vào giữa các thẻ h1 nhưng bạn cũng có thể sử dụng hình ảnh hoặc điều hướng trang web chẳng hạn.

mã jQuery

CSS là nhất cách tốt nhất hiện đang triển khai hoạt ảnh và chuyển tiếp. Vì vậy, chúng tôi sẽ sử dụng tối thiểu các tập lệnh và chỉ để xác định kích hoạt hoạt ảnh khi cuộn trang.

Khi giá trị vị trí cuộn trang lớn hơn 1 nghĩa là người dùng đã cuộn trang và bạn cần thêm lớp “sticky” vào thẻ tiêu đề trang web. Đây là cách tiêu đề trang web được kích hoạt và sửa chữa.

Và đây là mã của chính nó:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("dính");

Điều quan trọng cần lưu ý là việc sử dụng trong trong ví dụ này không phải là một ý tưởng hay, bởi vì nếu việc sử dụng tập lệnh bị vô hiệu hóa trong trình duyệt thì tiêu đề trang web sẽ được sửa và thế là xong.

CSS

Mã CSS sẽ bao gồm 2 phần. Mã đầu tiên sẽ chịu trách nhiệm về tiêu đề trang web tiêu chuẩn, ở vị trí mặc định. Đoạn mã thứ hai sẽ chịu trách nhiệm hiển thị tiêu đề khi người dùng cuộn trang. Hãy xem mã mặc định trông như thế nào:

Tiêu đề( vị trí: cố định; chiều rộng: 100%; căn chỉnh văn bản: giữa; cỡ chữ: 72px; chiều cao dòng: 108px; chiều cao: 108px; nền: #335C7D; màu: #fff; họ phông chữ: "PT Sans ", sans serif; )

Bây giờ nhất điểm thú vị: Khi người dùng cuộn xuống trang, lớp .sticky sẽ được áp dụng để chúng tôi có thể cung cấp khả năng hiển thị hoàn toàn đa dạng mà CSS có thể thực hiện. Chúng tôi cũng sẽ đặt một vị trí cố định để tiêu đề trang web của chúng tôi luôn hiển thị.

Với những điều này Quy tắc CSS, bên dưới, chúng tôi muốn giảm diện tích của tiêu đề khi cuộn, thay đổi màu sắc và tất nhiên là giảm phông chữ. Đây là mã:

Header.sticky ( cỡ chữ: 24px; chiều cao dòng: 48px; chiều cao: 48px; nền: #efc47D; căn chỉnh văn bản: trái; đệm-trái: 20px; )

Đây là ví dụ đơn giản nhất mà bạn nên hiểu bản chất của công việc. Tất cả phụ thuộc vào thiết kế trang web của bạn.

Chà, bây giờ hãy thêm một số hoạt ảnh vào quá trình chuyển đổi của chúng ta bằng cách sử dụng . Đây là mã:

Chuyển tiếp: tất cả đều dễ dàng 0,4 giây;

Ι

Phần kết luận

Tôi hy vọng rằng phương pháp này sẽ giải quyết được nhiều câu hỏi liên quan đến việc thực hiện điều hướng thuận tiện và đơn giản cho trang web. Bên cạnh đó việc thực hiện này rất đơn giản và rõ ràng.

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 bị 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ổi Và vị 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ẽ phụ thuộc vào chiều cao khối cha mẹ- mũ. 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:

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 “:” cho các phần tử giả thay vì “::”.

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 đề ( căn chỉnh văn bản: căn chỉnh ; 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à (độ rộng tối đa: 720px)( tiêu đề ( chiều cao: tự động; ) tiêu đề > div, tiêu đề > div h1, điều hướng tiêu đề ( chiều cao: tự động; chiều rộng: tự động; hiển thị: khối; căn chỉnh văn bản: trung tâm;

Kết quả:

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.