Hôm nay mình xin chia sẻ đôi chút kinh nghiệm về việc Học PHP :
- Trước khi học php thì mình nghĩ mọi người nên tìm hiểu kĩ một chút về HTML & CSS & Bootstrap là gì sau đó tiến đến việc học PHP là hiệu quả nhất
Đầu tiên để học được HTML & CSS & Bootstrap thì mọi người nên thực hành nhiều về nó để nhớ các cấu trúc câu lệnh mà sau này mình sẽ thực hành áp dụng vào trong khi học PHP sau này.
sau đây mình cũng chia sẻ thêm cách tạo Dropdow Menu cho những ai chưa biết và tạo cảm hứng cho những newbie.
Dành cho những newbie mới tập tành muốn tìm hiểu về code:
Vì nhu cầu sử dụng muốn tối giản tiện ích thanh menu trên trình duyệt web của mình, nên mình sẽ giới thiệu với mọi người cách làm thanh Dropdow Menu đơn giản và hiệu quả chỉ dùng CSS để style: Demo Dropdow Menu
* Đầu tiên mình tạo file HTML & CSS ở trong cùng một thư mục:
* Đầu tiên mình tạo file HTML & CSS ở trong cùng một thư mục:
- Đầu tiên mình sẽ viết đoạn HTML như bình thường chỉ có mỗi thanh menu thui nhé:
<html>
<head>
<title>menudropdow</title>
<meta name="description" content="">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sản Phẩm</a>
<ul>
<li><a href="#">Máy Tính</a></li>
<li><a href="#">Điện Thoại</a></li>
<li><a href="#">Máy Ảnh</a></li>
</ul>
</li>
<li><a href="#">Tin Tức</a>
<ul>
<li><a href="#">Tin Quốc Tế</a></li>
<li><a href="#">Tin Nội Bộ</a></li>
</ul>
</li>
<li><a href="#">Giới Thiệu</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</div><!–end #container–>
</body>
</html>
~> xác định phương hướng mình sẽ phải làm những gì ở trong đầu để cho nó thành một thanh Dropdow Menu ví dụ như tạo đường viền quanh thanh menu, màu nền cho thanh menu, màu chữ, xổ xuống ở đâu…
- Và bây giờ mình sẽ style nó:
B1: đầu tiên bạn tạo một cái đường viền border với nét liền bao quoanh dòng menu mình muốn tạo, và thêm vào đó là thêm background cho mình có thể dễ thấy, sau đó mình style nó sang trái hết dùng lệnh float.
code:
#container{
border: 1px solid #333;
background:linear-gradient(#3380cb,#51a9ff);
float: left;
}
<mình dùng một chút CSS3 cho đẹp nhé>
B2: khi này mình sẽ thấy có những dầu chấm đầu dòng mình sẽ bỏ dấu chấm bằng lệnh list-style
#container ul{
float: left;
list-style: none;
}
B3: cấu hình thành hàng ngang và thuộc tính mẹ
#container ul li{
float: left;
position: relative;
}
B4: công việc tiếp theo khi thanh menu của mình đã thành hàng ngang là thêm những thuộc tính màu sắc, kiểu chữ… tùy mọi người nhé:
<html>
<head>
<title>menudropdow</title>
<meta name="description" content="">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sản Phẩm</a>
<ul>
<li><a href="#">Máy Tính</a></li>
<li><a href="#">Điện Thoại</a></li>
<li><a href="#">Máy Ảnh</a></li>
</ul>
</li>
<li><a href="#">Tin Tức</a>
<ul>
<li><a href="#">Tin Quốc Tế</a></li>
<li><a href="#">Tin Nội Bộ</a></li>
</ul>
</li>
<li><a href="#">Giới Thiệu</a></li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</div><!–end #container–>
</body>
</html>
~> xác định phương hướng mình sẽ phải làm những gì ở trong đầu để cho nó thành một thanh Dropdow Menu ví dụ như tạo đường viền quanh thanh menu, màu nền cho thanh menu, màu chữ, xổ xuống ở đâu…
- Và bây giờ mình sẽ style nó:
B1: đầu tiên bạn tạo một cái đường viền border với nét liền bao quoanh dòng menu mình muốn tạo, và thêm vào đó là thêm background cho mình có thể dễ thấy, sau đó mình style nó sang trái hết dùng lệnh float.
code:
#container{
border: 1px solid #333;
background:linear-gradient(#3380cb,#51a9ff);
float: left;
}
<mình dùng một chút CSS3 cho đẹp nhé>
B2: khi này mình sẽ thấy có những dầu chấm đầu dòng mình sẽ bỏ dấu chấm bằng lệnh list-style
#container ul{
float: left;
list-style: none;
}
B3: cấu hình thành hàng ngang và thuộc tính mẹ
#container ul li{
float: left;
position: relative;
}
B4: công việc tiếp theo khi thanh menu của mình đã thành hàng ngang là thêm những thuộc tính màu sắc, kiểu chữ… tùy mọi người nhé:
