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
Với hình trên các bạn có thể hình dung được rằng Authority site là một trang web lớn, về nhiều mục lớn và các mục con.
Wordpress thực sự mạnh mẽ cho cộng đồng bloger chuyên nghiệp, với những ưu điểm riêng biệt làm cho Wordpress ngày càng lớn mạnh và trở nên phổ biến. Bài viết này sẽ giới thiệu về các loại tài khoản dùng để phần quyền trong việc quản lý nội dung trong Wordpress, hiện tại Wordpress có 4 loại tài khoản chính là Admin, Editer, Author, Contributer, và Subsrciber
This tutorial covers writing a "Hello World" test for Drupal 7 using the SimpleTest framework
Bình luận (0)
Add Comment