LƯU CÔNG THỨC BÀI TẬP

BÀI TẬP KẺ KHUNG
HTML CSS
<!doctype html> @charset "utf-8";
<html> /* CSS Document */
<head> .container
<meta charset="utf-8"> {
<title>BUOI 2 - BT 01</title> width: 1140px;
<link rel="stylesheet" href="css/Style-3.css"> margin: 0 auto;
</head> }
<body> .logo
<div class="container"> {
<div class="logo"><div>LOGO</div></div> width:350px;
<div class="slogan"><div>SLOGAN</div></div> margin: 0 15px;
<div class="clear"></div> height: 100px;
<div class="nav"><div>NAV</div></div> background-color:aquamarine;
<div class="slider"><div>SLIDER</div></div> float: left;
<div class="item"><div>ITEM</div></div> }
<div class="item"><div>ITEM</div></div> .logo > div {
<div class="item"><div>ITEM</div></div> text-align:left;
<div class="item"><div>ITEM</div></div> color: black;
<div class="item"><div>ITEM</div></div> font-family: arial;
<div class="item"><div>ITEM</div></div> padding: 50px 40px;
<div class="item"><div>ITEM</div></div> font-size: 25px;
<div class="item"><div>ITEM</div></div> }
<div class="clear"></div> .slogan
<div class="footer"><div>FOOTER</div></div> {
</div> width:730px;
</body> float: left;
</html> height: 100px;
background-color:greenyellow;
margin: 0 15px;
}
.slogan > div {
text-align:right;
color: black;
font-family: arial;
padding: 50px 70px;
font-size: 25px;
}
.nav
{
width:1110px;
height: 50px;
background-color:darksalmon;
margin: 15px;
}
.nav > div {
text-align:center;
color: black;
font-family: arial;
padding: 20px 0;
font-size: 25px;
}
.clear
{
clear:both;
}
.slider
{
width:1110px;
height: 300px;
background-color:greenyellow;
margin: 15px;
}
.slider > div {
text-align:center;
color: black;
font-family: arial;
padding: 120px 0;
font-size: 25px;
}
.item
{
width:255px;
height: 170px;
margin: 15px;
float: left;
background-color:coral;
}
.item > div {
text-align:center;
color: black;
font-family: arial;
padding: 75px 0;
font-size: 25px;
}
.footer
{
width: 1110px;
height: 100px;
margin: 15px;
background-color:gold;
}
.footer > div {
text-align:center;
color: black;
font-family: arial;
padding: 40px 0;
font-size: 25px;
}
BÀI TẬP CHÈN ẢNH VÀ HEADING
HTML CSS
<html> /* CSS Document */
<head> .container
<meta charset="utf-8"> {
<title>BT 02</title> width: 287px;
<link rel="stylesheet" href="css/style-4.css"> margin: 0 auto;
</head> float:left;
<body> }
<div class="container"> .anh
<div class="anh"></div> {
<div class="title">ANH NGỮ MẪU GIÁO SMARTKIDS</div> width: 253px;
<div class="content">Dành cho học viên trẻ em từ 4 đến 6 height: 179px;
tuổi</div> margin-top: 14px;
</div> margin-left: 19px;
</body> margin-right: 17px;
</html> background-image: url("chuong_trinh_2.png")
}
.title
{
width: 253px;
height: 10px;
margin-left: 19px;
margin-top: 5px;
margin-right: 14px;
color: red;
font-size: 13px;
font-family: Arial;
font-weight: bold;
}
.content
{
width: 253px;
height: 10px;
margin-left: 19px;
margin-top: 8px;
margin-right: 14px;
color: blue;
font-size: 12px;
font-family: Arial;
font-weight: bold;
}
TRANG WEB TU THIET KE
HTML
<html><head> /* CSS Document */
<meta charset="utf-8"> .container
<title>BUOI 2 - BT 01</title> {
<link rel="stylesheet" href="CSS/web1.css"> width: 1000px;
</head> margin: 0 auto;
<body> }
<div class="container"> .clear
<div class="clear"></div> {
<div class="biglogo"><a clear:both;
href="https://www.ajinomoto.com/vi/brands/yumyum"></a><img }
src="IMAGE/logo menu.jpg"></div> .biglogo
<div class="main_menu"> {
<ul> width: 220px;
<li><a href="....">HOME</a></li> height: 120px;
<li><a href="....">ABOUT US</a></li> margin-top: 0;
<li><a href="....">BRANDS</a></li> margin-bottom: 5px;
<li><a href="....">PROMOTION</a></li> margin-left: 20px;
<li><a href="....">CONTACT US</a> margin-right: 0px;
</li> float: left;
</ul> }
</div> img
<div class="anhbia"><img src="IMAGE/anhbia.png"></div> {
<div class="clear"></div> width: 100%;
<div class="gioithieu"><div>GIOI THIEU</div></div> height: 100%;
<div class="sp1"><img src="IMAGE/sp1.png" }
height="123%"></div> .main_menu
<div class="sp1"><img src="IMAGE/sp2.png" height="123%"></div> {
<div class="sp2"> width: 740px;
<div>MENU</div> height: 120px;
<div><ul> margin-top: 0;
<li>Coffee: 10$</li> margin-bottom: 0px;
<li>Orange Juice: 20$</li> margin-left: 0px;
<li>Smoothie strawberry: 30$</li> margin-right: 20px;
<li>Coca cola: 10$</li> float: left;
background-color: darkorange;
</ul></div> }
.main_menu li {
</div> display: inline;
padding: 30px 30px;
<div class="sp2"> font-size: 15px;
<div>MENU</div> font-family: arial;
<div><ul> line-height: 80px;
<li>Coffee: 10$</li> margin-top: 40px;
<li>Orange juice: 20$</li> }
<li>Smoothie strawberry: 30$</li> .main_menu li a:hover {
<li>Coca cola: 10$</li> color: black;
}
</ul></div> .anhbia
</div> {
<div class="clear"></div> width: 960px;
<div class="line1"><div class="logo"><img float: left;
src="IMAGE/logo.png"></div></div> height: 560px;
<div class="line2"><div><a margin: 0 20px;
href="https://www.yeos.com.sg/">COME TO US TO CHOOSE background-color:greenyellow;
HEALTHY PRODUCTS!</a></div></div> }
<div class="clear"></div> img
<div class="footer"><div><marquee {
direction="right">THANK YOU!</marquee></div></div> width: 100%;
</div> height: 100%;
</body> }
</html> .gioithieu
{
width: 960px;
height: 500px;
margin: 20px;
background-color:darksalmon;
}
.gioithieu > div {
text-align:center;
color: black;
font-family: arial;
padding: 20px 0;
font-size: 25px;
}
.sp1
{
width: 460px;
height: 150px;
margin: 0 20px;
float: left;
}
img
{
width: 100%;
height: 100%;
}
.sp2
{
width: 460px;
height: 260px;
margin: 0 20px;
float: left;
background-color: antiquewhite;
}
.sp2 > div {
text-align:center;
color: black;
padding: 10px;
font-size: 30px;
font-family: arial;
}
ul {
text-align:justify;
font-size: 20px;
line-height: 1.6;
font-family: arial;
}
.clear
{
clear:both;
}
.line1
{
width: 360px;
height: 100px;
margin-top: 0;
margin-bottom: 5px;
margin-left: 20px;
margin-right: 0px;
background-color:red;
float: left;
}
.logo {
width: 160px;
height: 80px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 140px;
margin-right: 700px;
}
img {
width: 100%;
height: 100%;
}
.line2
{
width: 600px;
height: 100px;
margin-top: 0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color:red;
float: left;
}
.line2 > div {

color: white;
font-family: arial;
padding: 40px 0;
font-size: 20px;
float: left;
}
.line2:hover > div {
background: grey;
}
.clear
{
clear:both;}
.footer
{
width: 960px;
height: 100px;
margin: 0 20px;
background-color:gold;
}
.footer > div {
text-align:center;
color: black;
font-family: arial;
padding: 40px 0;
font-size: 25px;
}
a{
text-decoration: none;
color: white;
}
LIST
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BAI TAP 02</title>
<style>
body {background-color:orange}
ul{
color:blue;
font-size:20px;
list-style-type: disc;
font-family:verdana;
line-height:2.0;}
ol{
color:green;
font-size:15px;
list-style-type: number;
font-family: arial;
line-height:1.6;}
</style>
</head>
<body>
<ul>
<li>Thiết kế Đồ hoạ 2D</li>
<li>Thiết kế Đồ hoạ 3D</li>
<li>Thiết kế website</li>
</ul>
<br>
<ol>
<li>Thiết kế Layout Web</li>
<li>Thiết kế Web HTML - CSS - JQUERY</li>
<li>Thiết kế Web Responsive - BOOTSTRAP</li>
</ol>
</body>
</html>
KINH NGHIEM THUC TE
HTM
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BAI TAP TREN LOP - 31.10.2022</title>
<style>
div {
border: 2px solid #000000;
margin-top: 40px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 200px;
background-color:aliceblue
}
body {background-color:hotpink;}
h1 {text-align: center;
font-family: courier;
font-size: 40px;
color: darkgreen;
}
p {margin-right: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<img src="image 03.png" align="left" width="190px" title="Kỷ năng
Thiết kế" style="margin-top:85px; margin-bottom:15px"/>
<h1> KỸ NĂNG THỰC TẾ</h1>
<div align="justify">
<B>
<p style="font-family:arial; font-size:20px;
color:brown">Không thể phủ nhận “Thiết kế Đồ họa” hiện đang là 1
trong 10 ngành HOT nhất hiện nay. Tuy nhiên, rất nhiều “Nhà thiết
kế” khi ra ngoài thực tế đã gặp phải những khó khăn trong việc liên
kết các công cụ với nhau để làm nên sản phẩm Đồ họa và hoàn thành
nó đúng tiến độ hay loay hoay với việc diễn đạt ý tưởng của mình do
không đủ kiến thức sử dụng một công cụ phần mềm nào đó. Nguyên
nhân chính ở đây là do thiếu sự chủ động, kinh nghiệm thực tế và kỹ
năng chuyên môn khi hoạt động trong lĩnh vực này. </p>
</B>
<I>
<p style="font-family:arial; font-size:20px;
color:darkgreen"> Với phương châm <span style="color:#F01365;
font-family:Times">“Học thực tế - Tự tin làm thực tế”</span>,
<a
href="https://uni.fpt.edu.vn/tuyen-sinh-nganh-hoc/nganh-thiet-ke-
do-hoa">Ngành Đồ họa Đại học FPT</a> sẽ mang đến cho bạn một
không gian lớp học như một phòng thiết kế, người học sẽ hóa thân
thành một nhà thiết kế dưới sự hướng dẫn tận tình của giáo viên
đứng lớp trong vai trò “sếp”. Ngoài phương thức dạy và học hoàn
toàn mới thông qua những sản phẩm thực tế sinh động và trực quan,
người học sẽ được tham gia thực hiện một “Đồ án thực tế” để thông
qua đó đánh giá năng lực học viên cũng như tạo môi trường làm việc
thực tế giúp các bạn tự tin hơn khi bước ra ngoài xã hội.</p>
</I>
</div>
</body>
</html>

LƯU CÔNG THỨC BÀI TẬP

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LƯU CÔNG THỨC BÀI TẬP

Uploaded by

Copyright:

Available Formats

BÀI TẬP KẺ KHUNG

.line2 > div {

You might also like