Thêm logo vào tiêu đề HTML

Vì tiêu đề được thiết kế trong mọi bố cục của trang web. Nó chứa các mục khác nhau như logo của công ty, các menu khác nhau, v.v.

Đầu tiên, chúng ta sẽ tạo một phần div với tiêu đề tên lớp. Nó giống như một thùng chứa các phần tử html khác nhau. Chúng tôi định nghĩa div trong html như sau,

HTML

Chúng tôi sẽ xác định CSS cho phần tử cơ thể với lề. 0px; . 0px; . Với điều này, nó sẽ chiếm toàn bộ chiều rộng mà không có bất kỳ lề hoặc phần đệm nào xung quanh nó. Vì lề là khoảng trống bên ngoài phần tử HTML và phần đệm là khoảng trống bên trong phần tử html

CSS

body{
	margin:0px;
	padding:0px;
}

Sau này, chúng tôi sẽ xác định CSS của tiêu đề div với chiều rộng. 100%;, chiều cao. 60px và màu nền của tiêu đề. Bề rộng. 100% sẽ chiếm toàn bộ chiều rộng của thiết bị

Lớp được định nghĩa với ". " Và tên lớp. Nó xác định kiểu dáng của các loại phần tử tương tự

Thí dụ

.header{
	width:100%;
	height:60px;
	background-color:#E6E6FA;
}

Sau khi xác định tiêu đề vùng chứa bây giờ chúng tôi sẽ xác định cách căn chỉnh tên logo trang web và thanh tìm kiếm trên tiêu đề của trang web

Bây giờ chúng ta sẽ định nghĩa tiêu đề h1 và CSS của nó như sau,

Website Logo

Vì chúng ta biết phần tử h1 là phần tử cấp khối. Các phần tử cấp khối luôn chiếm toàn bộ chiều rộng và không cho phép bất kỳ phần tử nào bên cạnh nó. Vì vậy, chúng tôi sẽ làm cho nó khối nội tuyến. Một phần tử nội tuyến chỉ lấy chiều rộng cần thiết nhưng chúng tôi không thể cung cấp chiều cao và chiều rộng cho nó. Vì vậy, chúng tôi sẽ sử dụng thuộc tính hiển thị cho khối nội tuyến vì nó có thể lấy chiều rộng và chiều cao và chúng tôi có thể thả nổi nó với các phần tử khác. Chúng tôi sẽ cung cấp tài sản hiển thị như,

display:inline-block;

Chúng ta sẽ sử dụng thuộc tính float trong tiêu đề. Thuộc tính float giúp căn chỉnh các phần tử sang trái hoặc phải của container. Chúng ta có thể đặt các yếu tố khác nhau xung quanh nó. Nếu chúng ta muốn loại bỏ thuộc tính float và muốn các phần tử html xuất hiện ở dòng mới phá vỡ luồng float, chúng ta sẽ sử dụng thuộc tính rõ ràng

Thí dụ

Không rõ ràng div2 đứng sau div1, vì div1 được thả nổi sang trái, văn bản trong div2 được thả nổi xung quanh div1 và div2 bao quanh nó

Với thuộc tính rõ ràng, chúng ta có thể di chuyển div2 xuống bên dưới div1. Thuộc tính rõ ràng được sử dụng theo cùng hướng của các phần tử float. Ví dụ: Chúng tôi đã thả div 1 sang trái nên chúng tôi sẽ sử dụng rõ ràng. CSS trái. Khi sử dụng xóa, div2 sẽ ở dưới div1, xóa. bên trái;

Đây là CSS của tiêu đề h1 được sử dụng,

.logo{
	color:#663399;
	font-size:25px;
	font-family:verdana;
	text-align:left;
	margin-top:0px;
	float:left;
	margin:0px;
	line-height:50px;
	padding-left:9px;
}

Chúng tôi đã sử dụng thuộc tính line-height. Nó xác định lượng không gian bên trên và bên dưới các phần tử html. Nó được sử dụng để căn chỉnh hai phần tử trên cùng một dòng chiều cao

Xin chào các bạn,
Tôi đã cố gắng thêm một hình ảnh logo trên tiêu đề của mình
Tiêu đề của tôi được thiết kế trên css và html là một hình ảnh thông thường sẽ là biểu trưng, ​​tôi sẽ sử dụng nó vì tôi sẽ không có quá nhiều trang (nếu có giải pháp thay thế tốt hơn, xin cảm ơn) bất kỳ cách hay nào để thêm biểu trưng vào

**

CSS -

**

body {
	background-image: url("back.jpg");
	    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;;
}

.header {
	background-image:url("header.png");
	height:70px;
	width:110%;
	margin:-10px;
}

.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
    height: 5%;
    color: #8b3436;
	background-color: #000000;
	text-align: center;
}

p {
	margin-left: 20px;
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 26.4px;
}

**

HTML -

**

   
     
	 
   

     

	 
     
	 

	  	 
	 

	 
 Copyright © www.csgochance.com 
	 

   

Thay đổi thiết kế của tiêu đề tùy thuộc vào kích thước màn hình. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng

Tự mình thử »

Tạo tiêu đề đáp ứng

Bước 1) Thêm HTML

Thí dụ

Bước 2) Thêm CSS

Thí dụ

/* Tạo kiểu cho tiêu đề với nền xám và một số phần đệm */
tiêu đề {
tràn ra. ẩn giấu;
màu nền. #f1f1f1;
đệm. 20px 10px;
}

/* Tạo kiểu cho các liên kết đầu trang */
tiêu đề một {
trôi nổi. bên trái;
màu. màu đen;
căn chỉnh văn bản. trung tâm;
đệm. 12px;
trang trí văn bản. không ai;
cỡ chữ. 18px;
chiều cao giữa các dòng. 25px;
bán kính đường viền. 4px;
}

/* Tạo kiểu cho liên kết logo (lưu ý rằng chúng ta đặt cùng một giá trị của line-height và font-size để ngăn tiêu đề tăng lên khi phông chữ lớn hơn */
tiêu đề một. Logo {
cỡ chữ. 25px;
trọng lượng phông chữ. Dũng cảm;
}

/* Thay đổi màu nền khi di chuột qua */
tiêu đề một. bay lượn {
màu nền. #ddd;
màu. màu đen;
}

/* Tạo kiểu cho liên kết đang hoạt động/hiện tại*/
tiêu đề một. tích cực {
màu nền. màu xanh da trời;
màu. trắng;
}

/* Di chuyển phần liên kết sang bên phải */
tiêu đề bên phải {
trôi nổi. đúng;
}

/* Thêm truy vấn phương tiện để đáp ứng - khi màn hình rộng 500px trở xuống, hãy xếp chồng các liên kết lên nhau */
màn hình @media và (chiều rộng tối đa. 500px) {
  . tiêu đề một {
trôi nổi. không ai;
trưng bày. khối;
căn chỉnh văn bản. bên trái;
}
  . tiêu đề bên phải {
trôi nổi. không ai;
}
}

Mẹo. Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng

Làm cách nào để chèn logo vào HTML?

Làm cách nào để thêm logo biểu tượng vào thanh tiêu đề bằng HTML?

Làm cách nào để thêm logo trong HTML CSS?

Làm cách nào để thêm logo vào thanh điều hướng trong HTML?