Code giao diện web php

Sau đó, các bạn vào trình duyệt, chạy đường dẫn : //localhost/website/index.php , các bạn sẽ thấy được giao diện hiển thị như sau:

Link 1

Right heading

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Right heading

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Trong file header.php của chúng ta lúc này, các bạn sẽ thấy chứa đoạn mã css, chúng ta sẽ tiếp tục cắt toàn bộ đoạn mã css này vào file style.css.

Các bạn cắt toàn bộ đoạn mã sau trong file header.php

body {
	margin:0;
	padding:0;
	font-family: Sans-Serif;
	line-height: 1.5em;
}

header {
	background: #ccc;
	height: 100px;
}

header h2 {
	margin: 0;
	padding-top: 15px;
}

main {
	padding-bottom: 10010px;
	margin-bottom: -10000px;
	float: left;
	width: 100%;
}

nav {
	padding-bottom: 10010px;
	margin-bottom: -10000px;
	float: left;
	width: 230px;
	margin-left: -230px;
	background: #eee;
}

footer {
	clear: left;
	width: 100%;
	background: #ccc;
	text-align: center;
	padding: 4px 0;
}

#wrapper {
	overflow: hidden;
}
			
#content {
	margin-right: 230px; /* Same as 'nav' width */
}

.innertube {
	margin: 15px; /* Padding for content */
	margin-top: 0;
}

p {
	color: #555;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul a {
	color: darkgreen;
	text-decoration: none;
}

và bỏ vào file style.css, đồng thời sửa lại file header.php 1 chút như sau :

	
		
		Tạo website bằng PHP
		
		

	
		

	
		

			
Header...
		
	
		
	

	
		
			

Giờ thì các bạn vào trình duyệt, chạy lại đường dẫn //localhost/website/index.php . Bạn sẽ thấy trang index.php không có gì thay đổi như ban đầu, nhưng lúc này các đoạn mã trong file index.php đã được chia thành các file con nhỏ hơn. Rất thuận tiện để chúng ta có thể code và mở rộng sau này. Điều này rất quan trọng, vì nếu ngay từ bây giờ chúng ta không chia nhỏ các thành phần của website ra thì sau này, trong quá trình tạo website bằng PHP các bạn sẽ gặp rất nhiều khó khăn và rối rắm.

Tổng Kết

Vậy là mình đã hướng dẫn các bạn xong cách tạo giao diện website tin tức, bài viết đầu tiên của loạt bài tạo website bằng PHP. Bài kế tiếp chúng ta sẽ tiếp tục tạo cơ sở dữ liệu cho website.

Chúc các bạn học tốt !

Mình là Hiếu.
Người sáng lập ra blog Kungfu PHP chia sẻ mọi thứ về tiền điện tử, mmo, lập trình,…
Một câu nói mà mình rất thích đó là “Cuộc đời chỉ có một, vì thế hãy làm những gì khiến bạn hạnh phúc và ở bên người khiến bạn luôn mỉm cười”.
Hy vọng nơi đây là góc cafe nhỏ để chúng ta có thể trao đổi, cùng nhau phát triển.

►Nếu bạn thấy bài viết bạn đang đọc hữu ích, hãy mời mình một ly cafe nhé : //kungfuphp.com/donate