Paragraph với image, headline và link
Thêm các thành phần khác vào một đoạn văn bản, đây là dạng thường dùng trong hầu hết các trang web.
Văn bản (paragraph) với image, headline và link
Một đoạn văn bản đơn giản với image nằm bên trái, có headline và link.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p.image {
float: left;
width: 130px;
}
div.block {
margin-left: 140px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
div.block h3 {
margin-bottom: 5px;
}
div.block p {
padding-bottom: 15px;
text-align: justify;
}
div.block p.detail {
padding: 0;
}
div.block p a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow.gif) no-repeat left center;
color: blue;
padding-left: 10px;
text-decoration: underline;
}
div.block p a:hover {
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<h3>Headline h3</h3>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
<p class="detail"><a href="http://hocwebchuan.com">Chi tiết</a></p>
</div>
</div>
</body>
</html>
Hiển thị trình duyệt:
clearfix là thủ thuật được dùng kèm với thuộc tính float, bạn có thể xem thêm về clearfix ở phần hướng dẫn học.
Một đoạn văn bản đơn giản với image nằm bên phải, có headline và link.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
p.image {
float: right;
width: 130px;
}
div.block {
margin-right: 140px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
div.block h3 {
margin-bottom: 5px;
}
div.block p {
padding-bottom: 15px;
text-align: justify;
}
div.block p.detail {
padding: 0;
text-align: right;
}
div.block p a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow.gif) no-repeat left center;
color: blue;
padding-left: 10px;
text-decoration: underline;
}
div.block p a:hover {
text-decoration: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<h3>Headline h3</h3>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
<p class="detail"><a href="http://hocwebchuan.com">Chi tiết</a></p>
</div>
</div>
</body>
</html>