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
Want to use the most awesome version of Drupal on the most awesome Drupal hosting? ;) This guide is for you!
Bạn sử dụng Drupal CMS để xây dựng cho bản thân, bạn bè, khách hàng, ... và số website bạn cài đặt hiện giờ đã lên đến hàng chục? Chắc chắn bạn phải đối mặt với vấn đề: Khi có lỗi bảo mật phát sinh ở nhân Drupal hoặc ở một module cộng thêm nào đó,
Chắc hẳn bạn đã biết, quá trình thụ thai xảy ra khi tinh trùng kết hợp cùng tế bào trứng. Sự kết hợp này không hề đơn giản, thậm chí phải mất một khoảng thời gian khá dài tinh trùng mới có thể tiếp cận được trứng.
Bình luận (0)
Add Comment