Tạo một trang HTML với các phần tử mới của HTML5. Trong bài lab sau mình sử dụng các thẻ sau : <nav>, <article>, <section>, <aside>, <footer>.
Mời các bạn xem bài giới thiệu về các thẻ mới này click đây. Đây là code trang html, có chú thích.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Nhất Nghệ - Trang layout HTML5 - CSS3</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- div contain chứa toàn bộ trang web-->
<div id="contain">
<!--div header trên cùng của trang chứa logo , lời giới thiệu --->
<header id="top_header">
<img src="logo.jpg" id="logo"/>
<h1>TRUNG TÂM ĐÀO TẠO ỦY QUYỀN CỦA MICROSOFT</h1>
</header>
<!--kết thúc div header-->
<!-- div menu -->
<nav id="top_menu">
<ul>
<li>Trang chủ</li>
<li>Tin tức</li>
<li>Thông báo</li>
<li>Chương trình học</li>
<li>Diễn đàn</li>
</ul>
</nav>
<!-- kết thúc div menu-->
<!--div main chứa phần nội dung của trang -->
<div id="main">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Tiêu đề bài viết 1</h1>
<h2>Tóm tắt bài viết</h2>
</hgroup>
</header>
<p>Nội dung bài viết, nội dung bài viết!</p>
<footer>
<p>- Tác giả</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Tiêu đề bài viết 2</h1>
<h2>Tóm tắt bài viết</h2>
</hgroup>
</header>
<p>Nội dung bài viết, nội dung bài viết!</p>
<footer>
<p>- Tác giả</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>Tin tức</h4>
Tin hot trong ngày!
</aside>
</div>
<!--kết thúc div main-->
<!--footer -->
<footer id="the_footer">
Copyright 2012
</footer>
<!-- kết thúc footer-->
</div> <!--kết thúc div contain-->
</body>
</html>Trang CSS này sử dụng CSS3. Sau này mình sẽ viết một bài nói về CSS3 và những thuộc tính mới của nó. Còn bây giờ, tạm thời các bạn đọc chú thích nha
Thay vì dùng thẻ div và thuộc tính float: left như trước, ta có các thuộc tính sau linh động và dễ dùng hơn:
-webkit-box-pack:center –> Canh giữa.
-webkit-box-orient: vertical (hoặc horizontal) –> các phần tử trong nó sẽ dàn hàng dọc – vertical (từ trên xuống) hoặc hàng ngang – horizontal (trái sang phải)
-webkit-box-flex: 1 –> giãn kích thước tối đa.
Thuộc tính trong CSS3 đối với Firefox thêm tiếp đầu ngữ -moz, đối với Safari, Opera và Chrome là -webkit. Ví dụ như các thuộc tính trên, ta có thể thay webkit = moz
*{
margin:0px;
padding:0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgruop{
display:block;
}
body{
width:100%;
display:-moz-box;/* Firefox */
-moz-box-pack:center;/* Firefox */
display:-webkit-box;/* Safari, Opera và Chrome */
-webkit-box-pack:center;/* Safari, Opera và Chrome */
}
#contain{
max-width: 1000px;
margin: 20px 0px;
display:-moz-box;/* Firefox */
-moz-box-orient: vertical;
-moz-box-flex: 1;
display:-webkit-box;/* Safari, Opera và Chrome */
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: yellow;
border:3px solid black;
padding:20px;
display:-moz-box;/* Firefox */
-moz-box-orient:horizontal;
-moz-box-align:center;
display:-webkit-box;/* Safari, Opera và Chrome */
-webkit-box-orient:horizontal;
-webkit-box-align:center;
}
#logo{
width:165px;
margin-right:20px;
}
#logostt{
vertical-align:middle
}
#top_menu{
border:red;
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}
#main{
display:-moz-box;/* Firefox */
-moz-box-orient:horizontal;
display:-webkit-box;/* Safari, Opera và Chrome */
-webkit-box-orient:horizontal;
}
#main_section{
border: 1px solid blue;
-moz-box-flex:1;/* Firefox */
-webkit-box-flex:1;/* Safari, Opera và Chrome */
margin: 20px 20px 20px 0px;
padding:20px;
}
#side_news{
border: 1px solid red;
width:220px;
margin:20px 0px;
padding:30px;
background:#66CCCC;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
article{
background: #FFFBCC;
border: 1px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer{
text-align:right;
} Giờ các bạn chạy thử nhé, hãy thay đồi kích thước chiều rộng của cửa sổ trình duyệt, trang web sẽ tự động resize (trong khi phiên bản HTML và CSS khó làm được điều này).
Theo khoapham.vn
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
Sau hơn 1 tháng trời tìm tòi,liều mạng và kiên trì,cuối cùng cũng đã thực hiện được mơ ước mà bấy lâu nay luôn ấp ủ :chinh phục OSX.Cùng trãi nghiệm cùng với Hệ điều hành mới này Mac OSX Lion 10.7.1 :
Though to be a budget 4G devices, the Samsung Conquer 4G is very elegant and stylish. I was surprised at how well put together this phone is. The manufacturers seemed to have put a lot of attention to detail when making this gadget.
Thay vì hiển thị địa chỉ email bạn nhập vào hồ sơ Facebook để mọi người liên lạc với bạn, Facebook đã thay bằng địa chỉ có đuôi @facebook.com mà có thể bạn chưa bao giờ biết là mình có. Điều này khiến nhiều người dùng giận dữ.
![Viết chương trình in ra các số bậc thang trong đoạn [n1, n2] với n1, n2 được nhập từ bàn phím.](https://expressmagazine.net/sites/default/files/styles/thumbnail/public/imageDevelopment/viet-chuong-trinh-in-ra-cac-so-bac-thang-trong-doan.jpg?itok=mimCbEcT "Viết chương trình in ra các số bậc thang trong đoạn [n1, n2] với n1, n2 được nhập từ bàn phím.")
Bình luận (0)
Add Comment