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
Dịch vụ quét mã độc WordPress miễn phí dành cho khách hàng mua WordPress Hosting.
WordPress has been gaining a foothold in the general content management system (CMS) game for a few years now, but the real breakthrough was the custom post type mechanism which allows for the creation of a wide variety of content
jCaption allows you to add captions to your Drupal images, no matter what editor you're using.
Bình luận (0)
Add Comment