Ôn tẬp html & csseasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · div và p....
TRANSCRIPT
![Page 1: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/1.jpg)
HTML & CSS
Lương Trần Hy Hiến – www.aspt7cn.tk
![Page 2: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/2.jpg)
Nội dung
HTML
Cấu trúc trang HTML5
Các thẻ cơ bản
Form
Bảng
CSS
Selector
Nạp chồng
Box Model
Positioning
Layout
![Page 3: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/3.jpg)
Cấu trúc trang web
<html>, <head>, <body>, <title>, <meta>
Các thẻ căn bản
Tiêu đề: <h1>, <h2>,…<h6>
Danh sách: <ol>, <ul>, <li>
Đa ph.tiện: <img>, <embed>
Bảng: <table>, <tr>, <th>, <td>
Form nhập
<form>, <input>, <select>, <textarea>
<label>, <fieldset>, <legend>
HTML
![Page 4: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/4.jpg)
<html>
<head>
<meta charset=“utf-8">
<title>Tiêu đề</title>
</head>
<body>
<h1>CHÀO QUÍ VỊ</h1>
</body>
</html>
HTML-CẤU TRÚC
![Page 5: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/5.jpg)
<h1>ĐẦU ĐỀ</h1>
<ul type="square">
<li>Hiệu trưởng </li>
<li>Giáo viên</li>
<li>Sinh vien</li>
</ul>
<ol type="A" start="4">
<li>Hiệu trưởng </li>
<li>Giáo viên</li>
</ol>
<img src="abc.gif">
<embed src="fim.mp3" width="100" height="100">
HTML-THẺ CĂN BẢN
![Page 6: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/6.jpg)
Imgae, Video, Audio
![Page 7: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/7.jpg)
<table width="300" border="1" cellspacing="2" cellpadding="5">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFF00">D</td>
<td rowspan="2" bgcolor="#FF0000">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
</table>
HTML-BẢNG
![Page 8: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/8.jpg)
<form action="" method="post" enctype="multipart/form-data" name="form1">
<select name="select">
<option value="VN">Viet Nam</option>
<option value="US">United States</option>
</select>
<textarea name="textarea"></textarea>
<input type="text" name="textfield">
<input type="password" name="textfield2">
<input type="checkbox" name="checkbox" value="checkbox">
<input name="radiobutton" type="radio" value="radiobutton">
<input type="file" name="file">
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">
<input type="button" name="Submit22" value="Button">
</form>
HTML-FORM
![Page 9: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/9.jpg)
Thẻ tổ chức bố cục
<div>, <p>
<fieldset> + <legend>
Symentic
<header>
<footer>
<aside>
<section>
<article>
<nav>
![Page 10: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/10.jpg)
DIV và P
![Page 11: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/11.jpg)
FieldSet
![Page 12: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/12.jpg)
Symentic
Như <div> nhưng có nghĩa để dễ nhớ cho phần
nội dung bên trong.
![Page 13: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/13.jpg)
CSS
![Page 14: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/14.jpg)
Class selector
Đ.Nghĩa: .ClassName{CSS}
A.Dụng:<Tag class=“ClassName”>
ID Selector
Đ.Nghĩa: #IDName{CSS}
A.Dụng:<Tag id=“IDName”>
HTML Selector
Đ.Nghĩa: Tag{CSS}
Inline Style
A.Dụng:<Tag style=“CSS”>
CSS-ĐỊNH NGHĨA
![Page 15: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/15.jpg)
CSS cơ bản
Selector là ký hiệu đượcthẻ để áp dụng css.
3 loại selector cơ bản
• HTML selectorTagName{css}
• Class selector:.ClassName{css}
• ID selector:#Id{css}
sử dụng để xác định các
![Page 16: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/16.jpg)
Định Nghĩa
<style type="text/css">
.MyHeader
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #FF0000;
}
</style>
Áp Dụng
<h1 class=“MyHeader”>Hello World</h1>
CSS-CLASS SELECTOR
font-family: tên font chữfont-weight: độ đậm
font-style: kiểu chữfont-size: kích thước chữcolor: màu chữ
Dấu
chấm
![Page 17: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/17.jpg)
Định Nghĩa
<style type="text/css">
#MyParam
{
background-color: #0000FF;
background-image: url(images/abc.gif);
text-align: justify;
margin: 10px;
padding: 5px;
border: 1px dotted #0000FF;
}
</style>
Áp Dụng
<p id=“MyPara”>Hello World</p>
CSS-ID SELECTOR
background-color: màu nền
background-image: ảnh nền
text-align: canh lềmargin: độ dày lề ngoài
padding: độ dày lề trong
border: đường viền
Dấu
thăng
![Page 18: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/18.jpg)
FIELDSET
{
width: 200px;
border: 1px solid #0000FF;
}
LEGEND
{
font-weight: bold;
color: #FF0000;
background-color: #FFFF00;
border: 1px solid #0000FF;
width: 100px;
}
<fieldset>
<legend>DE MUC</legend>
NOI DUNG
</fieldset>
CSS-HTML SELECTOR
![Page 19: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/19.jpg)
Áp Dụng
<p style=“font-size:50px;color:red;”>
Hello World
</p>
CSS-INLINE STYLE
![Page 20: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/20.jpg)
P INPUT
{
CSS1
}
#MyMenu IMG
{
CSS2
}
P .MyClass
{
CSS3
}
.MyClass #MyID
{
CSS4
}
CSS-KHOANH VÙNG
P INPUT:
CSS1 chỉ áp dụng cho các thẻ <INPUT> đặt trong thẻ <P>
(<P><INPUT></P><INPUT>)
#MyMenu IMG:
CSS2 chỉ áp dụng cho các thẻ <IMG> đặt trong thẻ có ID là
MyMenu (<span id=“MyMenu”><IMG></span><IMG>)
P .MyClass:
CSS3 chỉ áp dụng cho các thẻ có thuộc tính class là MyClass đặt
trong thẻ <P> (<P><INPUT class=“MyClass”><INPUT></P>)
.MyClass #MyID:
CSS4 chỉ áp dụng cho các thẻ có thuộc tính class là MyClass đặt
trong thẻ có ID là MyID (<span class=“MyClass”><IMG
id=“MyID”><IMG></span>)
![Page 21: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/21.jpg)
Định Nghĩa
<style type="text/css">
#A, .B, INPUT, H2, #X H1
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #FF0000;
}
</style>
CSS-NHIỀU SELECTOR
#A: ID selector
.B: class selector
INPUT, H2: HTML selector
#X H1: khoanh vùng
![Page 22: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/22.jpg)
A
{
font-family: Arial
font-size: 16px;
color: #0000FF;
font-weight: bold;
font-style: italic;
}
A:link
{
text-decoration: none;
}
CSS-LIÊN KẾT
A:visited
{
text-decoration: none;
color: #000000;
}
A:hover
{
text-decoration: underline;
color: #FF0000;
}
A:active
{
text-decoration: none;
color: #00FF00;
}
A: chung
A:LINK: thường
A:VISITED: đã xem
A:HOVER: có chuột
A:ACTIVE: đang chọn
![Page 23: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/23.jpg)
CSS Box-Model
![Page 24: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/24.jpg)
Box-Model
![Page 25: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/25.jpg)
Bo góc
Bo cả 4 gócBorder-radius: 10px;
Bo từng gócBorder-top-left-radius: 10px;
Border-top-right-radius: 10px;
Border-bottom-left-radius: 10px;
Border-bottom-right-radius: 10px;
![Page 26: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/26.jpg)
CSS nền
![Page 27: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/27.jpg)
Định vị
left0,0
top
position:absolute
position:relative
![Page 28: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/28.jpg)
Định vị
position:absoluteposition:absolute
position:relative position:absolute
![Page 29: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/29.jpg)
Thuộc tính CSS định vị
![Page 30: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/30.jpg)
CSS Layout
![Page 31: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/31.jpg)
BOOTSTRAP
![Page 32: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/32.jpg)
Giới thiệu
Bootstrap HTML + CSS + JavaScript (by
Twitter)
Hệ thống các class đáp ứng hầu hết yêu cầu
thiết kế web
Đơn giản dễ sử dụng
Tương thích nhiều loại thiết bị
Phổ biến, rộng rãi -> dễ được support, hội
nhập cao
![Page 33: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/33.jpg)
Nội dung
CSS
GridSystem
Form
Button
Table
Component
Icons
Button Dropdown
Tab
Navbar
Alert
List group
Panel
![Page 34: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/34.jpg)
Grid System
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
![Page 35: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/35.jpg)
Button
<button class="btn btn-default">Default</button>
![Page 36: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/36.jpg)
Form
![Page 37: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/37.jpg)
Table
<table class="table table-hover">…</table>
Classtable
table
table
table
table-bordered: có kẻ
table-striped: thay đổi màu theo hàng
table-condensed: cắt bỏ cellpading
table-hover: highlight hàng có chuột
![Page 38: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/38.jpg)
Icon
<span class="glyphicon glyphicon-asterisk"></span>
![Page 39: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/39.jpg)
DropDown Button
<div class="btn-group"><button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
Action
<li><a<li><a<li><a
href="#">Action</a></li>href="#">Another action</a></li>href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
![Page 40: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/40.jpg)
Tab
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-
toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-
toggle="tab">Messages</a></li>
</ul><div class="tab-content">
<div class="tab-pane active" id="home">...</div><div class="tab-pane" id="profile">...</div><div class="tab-pane" id="messages">...</div>
</div>
![Page 41: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/41.jpg)
NavBar
![Page 42: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/42.jpg)
NavBar
![Page 43: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/43.jpg)
Alert
![Page 44: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/44.jpg)
Panel
![Page 45: ÔN TẬP HTML & CSSeasycsharp.weebly.com/uploads/1/6/9/3/16936172/html_css.pdf · DIV và P. FieldSet. Symentic ... position:absolute position:absolute position:relative position:absolute](https://reader033.vdocuments.pub/reader033/viewer/2022042307/5ed3ec63b385103868573826/html5/thumbnails/45.jpg)
List Group
<div class="list-group"><a
<a
<a
<a
<a
href="#"
href="#"
href="#"
href="#"
href="#"
class="list-group-item active"> Cras justo odio </a>
class="list-group-item">Dapibus ac facilisis in</a>
class="list-group-item">Morbi leo risus</a>
class="list-group-item">Porta ac consectetur ac</a>
class="list-group-item">Vestibulum at eros</a>
</div>