Lab 02 Coban Css

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript
Lab 02.
THIT K WEB C BN VI NGN NG CSS

Mc tiu:
Hiu, bit v p dng ngn ng CSS trong thit k Web
Xy dng cc trang Web n gin s dng ngn ng HTML kt hp CSS
Bi tp 01: To trang m hnh v nh dng vn bn: nh ngha th tiu h1, h2 v
th p ty v p dng vo 3 dng u. Dng th Span thc to im nhn: T sng
nn, ch m p dng vo dng th 4.
<html>
<head>
<style type="text/css">
h1 {
color: #00ff00
}
h2 {
color: #dda0dd
}
p { color: rgb(0,0,255) }
span{
background-color:yellow;
font-weight:bold
}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
<p><span class="highlight">This is a text.</span> This is a text. This is a text. This
is a text.This is a text. This is a text. <span>This is a text.</span></p>
</body>
</html>
Bi tp 02 : To trang m hnh v to gc gp cho khung vn bn: Khung c rng
300px, c khung vin kt hp gp gc di phi.(gp gc l 1 nh do gio vin cung
cp. p dng vo theo hnh mu
<html>
<head>
<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(brcorner.gif) bottom right no-repeat;
http://www.thayphet.net

padding: 1px 4px 15px 5px;
}
</style>
</head>
<body>
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />Some text here.Some text here. Some text here.<br
/>Some text here.Some text here. Some text here.<br />Some text here.Some
text here. Some text here.<br />Some text here.Some text here.
</div>
</div>
</body>
</html>
Bi tp 03 : M hnh vn chn hnh nh v ph theo hnh mu: Hnh nh tri v
bn phi, trong mt khong trng bng khong 20% rng ca cc on xung
quanh, c ng vin, vn bn ph in nghing, canh gia, c nh.
File css
.figure {
float: right;
width: 20%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
text-align: center;
}
.fifure img{
width: 136px;
height: 200px;
}
.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
File HTML
<html>
<head> <title>Hinh Anh Va Phu De</title>
<link rel="stylesheet" type="text/css" href="hinhanh.css" />
</head>
<body>
<div class="figure">
<p><img src="ThapEiffel.bmp" alt="Eiffel tower">
<p>Scale model of the Eiffel tower in Parc Mini-France
</div>
<p align=justify> Hnh nh v ph . . . . .</p>
</body> </html>

Bi tp 04 : To menu 1 tng dc nh hnh di, hnh nn menu cho gio vin cung
cp
<style>
#menu{
width:200px;
}
#menu a{
display:block;
height:32px;
background-image:url(../Images/button.gif);
background-repeat:no-repeat;
padding-top:8px;
padding-left:35px;
text-decoration:none;
color:#FFF;
font-weight:bold;
}
#menu a:hover{
background-image:url(../Images/button-hover.gif);
}
</style>
<body>
<div id="menu">
<a href="#">Trang chu</a>
<a href="#">San pham</a>
<a href="#">Dich vu</a>
<a href="#">Lien he</a>
<a href="#">Dang ky</a>
<a href="#">Dang nhap</a>
</div>
</body>
Bi tp 05 : M hnh nh dng bng n gin dng CSS: nh dng Font ch, c ch
khong cc l, c vin, mu nn cho dng tiu . .. . theo hnh mu
File css
.tablelist {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #EBDDBC;
}
.tablelist th {
margin: 0;
padding: 4px 6px;
background-color: #F1EFD8;

}
.tablelist td {
margin: 0;
padding: 4px;
}
File HTML
<html>
<head> <title>Table</title>
<link rel="stylesheet" type="text/css" href="Table.css" />
</head>
<body>
<H3> DANH SCH NHN VIN </H3>
<table class="tablelist">
<tr>
<th>S th t</th>
<th>H v tn</th>
<th>Gii tnh</th>
</tr>
<tr>
<td>1</td>
<td>Nguyn Quang Th</td>
<td>Nam</td>
</tr>
<tr>
<td>2</td>
<td>Trn Mai Dung</td>
<td>N</td>
</tr>
</table>
</body>
</html>
Bi tp 06 : Thit k menu ngang 1 cp
<style>
#menu{
width:900px;
height:35px;
background-color:#0FF;
}
#menu a{
display:block;
height:30px;
padding-top:5px;
width:120px;
float:left;
text-align:center;
text-decoration:none;
}
#menu a:hover{
background-color:#00F;
color:#FFF;
font-weight:bold;
}
</style>

<body>
<div id="menu">
<a href="#">Trang ch</a>
<a href="#">Gii thiu</a>
<a href="#">Bn </a>
<a href="#">Lin h</a>
<a href="#">Sn phm</a>
</div>
</body>
Bi tp 07 : Thit k website m bu theo mu sau, hnh nh do gio vin cung cp.
------------Ht------

Lab 02 Coban Css

Uploaded by

Document Information

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

Lab 02 Coban Css

Uploaded by

Copyright:

Available Formats

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript

THIT K WEB C BN VI NGN NG CSS

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript

Bi Tp Thc Hnh Thit K Web Vi Ngn Ng Html, Css, Javascript

You might also like