Практика_WEB_1_semestr
.pdf
3. |
|
|
( ü |
|
|
ükYV- |
|
ü |
|
|
IBI FmLe ( |
ü- |
ü - |
|||||||
|
|
|
( ++. ) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
4. |
) ü |
( ) |
( ) ü - BMFE/)+) ü - |
|
(++. ) |
|
|
|
|
|
||||||||||
5. |
) |
- "Web- |
ü 5 |
( |
|
|
|
|
( |
ü( ++. ) |
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
z |
t |
|
|
|
|
|
|
|
|
|
|
|
|
ü |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
aUf b%6 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
VcfXYf%6 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dUXXb%6 |
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
WcbhYbh%) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
|
|
( |
( |
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
||
|
|
|
|
ü |
|
ü |
|
( |
|
|
|
ü |
|
|
ü ) |
ü |
|
|||
|
|
|
|
|
|
) |
|
|
|
|
|
ü |
|
|
) |
|
- |
|
||
|
|
ü |
|
ü |
|
) |
|
|
|
|
üü |
ü |
) |
|
|
ü |
|
|
|
|
|
|
|
( |
( |
ü |
ü |
ü ) |
|
|
|
|
|
|
|
|
|
|
|||
|
|
ü |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
üü |
|
|
ü üü |
|
ü 5 ü |
( |
|
) |
|
|
|
|
|
|||
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
üü |
|
ü |
|
VcfXYf- |
kXh) |
ü |
ü |
|
ü |
|
|
|
|||
|
|
|
ü |
|
|
|
ü |
|
|
|
|
) |
|
ü |
ü |
( |
- |
|
||
|
üü(ü - |
( ü - |
|
) |
|
|
|
ü |
|
|
üüü( |
|
ü |
|
|
|
||||
|
|
|
ü |
) |
|
|
ü |
|
|
|
|
ü( |
|
ü |
|
|
|
) |
||
|
|
|
ü |
ü |
|
üü |
|
|
|
ü |
( |
|
|
ü |
|
|
|
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
VcfXYfkXh(üü |
|
|
|
|
( |
ü |
VcfXYftop - |
||||||||
|
kXh |
|
(VcfXYfright - kXh |
|
|
|
üü(VcfXYfbottom - kXh |
|
VcfXYf- |
|||||||||||
|
left |
- kXh |
|
) |
ü |
|
|
|
|
|
ü |
|
|
( |
ü ü |
|||||
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü ü ü |
- |
|
|
|
|
|
ü |
|
) |
|
|
|
|||
|
|
|
ü |
ü(ü |
|
|
ü |
ü |
|
|
|
( üü |
ü |
,Yl(ü |
|
|
|
|||
- 0 |
- |
5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
border - width: 1ex; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
border - left - width: 5px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
ü - |
üü |
|
|
|
, - |
(ü |
|
|
- ,} 5 |
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
border - width: 1.5pt 1mm; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
üü |
|
ü |
VcfXYfghmY( |
|
|
|
ü |
|
ü ü |
|||||||
|
|
|
|
) |
|
üü |
|
|
|
ü |
üü ü |
|
|
ü |
|
|
|
|
||
|
|
ü |
|
ü ( |
|
ü |
VcfXYfwidth. |
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
ü |
|
ü |
|
|
|
|
( |
|
üü |
|
|
(ü |
||||
|
|
ü |
|
( |
|
üü |
|
|
|
|
|
|
|
) |
|
ü ü |
||||
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
solid - |
ü |
ü) |
ü |
ü ü |
|
|
|
|
üü |
|
) |
|
|
|
|||
|
|
|
double - |
ü |
ü) |
ü |
ü ü |
|
|
|
|
( |
|
|
|
|
|
|||
|
|
|
|
ü |
ü |
|
|
|
) |
ü ü |
ü |
|
|
|
|
|
|
|||
|
|
|
ü |
ü |
|
VcfXYfkXh |
|
|
|
) |
|
|
|
|
|
|
|
|
||
|
|
|
dashed - |
ü |
ü) |
ü ü |
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
) ü |
|
ü |
F Wfcsoft Inter - bYh?ldcfYf0)+ |
ü (GYhscape Com - muni - |
||||||||||||
|
|
|
WUhcf(HdYfU/% |
ü ü |
ü |
|
|
|
|
) |
|
|
|
|
|
|
|
|
||
61
dotted - |
ü ü) |
ü |
ü ü |
|
|
|
|
|
) ü |
||
ü |
F Wfcsoft Inter - bYh?ldcfYf0)+ |
ü |
(GYhscape Com - muni - cator, Opera 4) |
||||||||
ü ü ü |
|
|
) |
|
|
|
|
|
|
|
|
outset - |
ü |
|
) |
ü |
|
- |
- |
|
) |
|
|
inset - |
|
|
) |
ü |
|
- |
- |
|
) |
|
|
ridge - |
ü |
ü ü |
) |
ü |
|
- |
- |
) |
|
|
|
groove - |
ü |
ü |
ü |
) |
ü |
|
- |
- |
) |
|
|
none - |
ü |
|
|
|
|
|
|
|
|
|
|
|
ü üü |
|
|
(ü |
|
- |
5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
border - style: solid double double; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
ü ü |
|
|
ü |
|
ü ü |
VcfXYftop - style, border - |
|||||
right - style, border - bottom - ghmY VcfXYfleft - ghmY |
|
( ü ( |
|
|
) |
||||||
|
üü |
ü |
|
VcfXYfWccf) |
ü |
|
ü |
ü |
|
|
|
|
|
( |
ü |
|
ü |
ü |
) |
üü |
ü |
||
üü ( |
- |
|
üü |
ü |
|
VcfXYfwidth. |
|
|
|
|
|
üVcfXYftop - color, border - right - color, border - bottom - Wccf VcfXYfleft - color
üü |
) |
|
ü ü( ü |
üüü ü ü |
- üü ü- |
üü5
border - left - color: red;
border - right - color: rgb(100%, 75%, 50%);
üü ü üü |
) |
<p style="border - width: 0.45ex; border - style: solid; border - color: rgb(25%, 50%, 75%);">
)
</p>
<p style="border - width: 9px; border - style: double; border - color: #ff8f00;">
)
</p>
<p style="border - width: 4px; border - style: groove; border - color: silver; background - color: #dddddd;">
)
</p>
<p style="border - width: 3.5pt; border - style: ridge; border - color: #8fcf8f;">
)
</p>
ü ü |
ü |
|
ü |
ü) |
|
üü |
|
ü üü |
ü |
VcfXYfü ü |
VcfXYftop, border - |
right, border - Vchca |
VcfXYfYZh |
) |
ü |
ü |
|
ü |
ü( |
|
üü |
) ü ü |
ü |
ü |
VcfXYf |
) |
|
|
|
ü |
ü |
ü ü |
5 |
|
|
<p style="border: 0.45ex solid rgb(25%, 50%, 75%);">
62
)
</p>
<p style="border: 9px double #ff8f00;">
)
</p>
<p style="border: 4px groove silver; background - color: #dddddd;">
)
</p>
<p style="border: 3.5pt ridge #8fcf8f;">
)
</p>
üü üü |
- |
5 |
<p style="border: 1ex solid #ff97bf; border - top - width: 3ex;">
)
</p>
padding |
|
|
|
|
|
|
ü |
ü ü |
ü |
ü |
) |
|
|
|
üü |
ü |
dUXXb) |
ü |
ü |
üüü ü |
ü |
ü ü |
|
( |
|
ü |
|
) |
ü |
ü( |
üü |
ü |
border - width. |
|
ü5 |
|
|
|
|
|
|
<p style="padding: 1ex; border: 0.45ex solid rgb(25%, 50%, 75%);">
)
</p>
<p style="padding: 12px; border: 9px double #ff8f00;">
)
</p>
<p style="padding: 8px; border: 4px groove silver; background - color: #dddddd;">
)7*d9
<p style="padding: 5pt; border: 3.5pt ridge #8fcf8f;">
)7*d9
<p style="padding: 3ex 1ex 1ex; border: 1ex solid #ff97bf; border - top - width: 3ex;">
)7*d9
ü |
( ü |
aUf b |
63
|
üü |
ü |
ü ) |
|
|
( |
ü |
) |
|
|
|
|
|
|
üü |
ü |
aUf b(aUf b- top, margin - right, margin - Vchca aUf b- left. |
|||
ü |
ü |
|
ü |
(üü |
|
) |
|
( ü |
|
(ü |
# ü |
) |
( |
( |
üü |
(ü # |
( ü |
ü |
|
) |
|
|
ü |
) |
|
|
|
ü5 |
|
|
|
|
|
|
<p style="margin: 1ex; padding: 1ex; border: 0.45ex solid rgb(25%, 50%, 75%);">
)
</p>
<p style="margin: 25pt 15pt; padding: 12px; border: 9px double #ff8f00;">
)
</p>
<p style="margin: 10px; margin - left: 50px; padding: 8px; border: 4px groove silver; background - color:
#dddddd;">
)
</p>
<p style="margin: 0; padding: 5pt; border: 3.5pt ridge #8fcf8f;">
)
</p>
<p style="margin: 0 10pt; padding: 3ex 1ex 1ex; border: 1ex solid #ff97bf; border - top - width: 3ex;">
)
</p>
|
|
artr |
tz |
r r z |
s z |
1. |
( |
ü |
ü |
BMFE |
( |
üVcfXYfwidth, border - style, border - color, padding, margin.
|
c |
zr |
1. |
ü ü ü ü |
5 |
border - width border - style border - color padding margin.
64
r üü |
|
|
r z r s r |
( u z z) |
|
ü |
|
|
|
e r |
ü |
ü |
ü |
ü ) |
sz
1.ü
2.ü ü ü
3. |
|
|
|
ü |
|
|
4. |
|
ü |
|
ü |
|
|
5. |
|
|
|
|
|
|
|
r r |
|
|
|
|
|
1. |
)) |
- |
ü |
BMFE( ü5 |
ü |
(++, (/4 ) |
2. |
) |
- "Web- |
ü 5 |
( |
( |
ü( ++. ) |
65
3. |
|
( ü |
|
|
ükYV- |
ü |
IBI FmLe ( ü- ü - |
|
|
( ++. ) |
|
|
|
|
|
4. |
) ü |
( ) |
( ) ü |
- |
BMFE/)+) ü - |
|
(++. ) |
5. |
) |
- "Web- |
ü 5 |
( |
( |
|
ü( ++. ) |
|
z |
t |
|
|
|
7>CO9 |
|
|
|
|
|
ü |
|
ü |
( |
( |
üü |
- ü (ü |
ü |
|
ü) |
|
|
|
ü ü ü |
ü 5 |
|
|
|
<div style='background - color: red;'>
Text
</div>
üfloat
ü |
ZcUh |
ü |
|
|
|
) |
ü |
ü |
>CO |
ü |
|
) |
( |
ü |
|
ü |
ü ü |
|
üü |
|
) |
|
|
ü ü |
( üü |
) |
|
|
ü |
( |
|
) |
üü |
,++! |
ü |
ü( |
|
- ,.+ |
) |
ü |
|
ü,++! |
ü ü |
) |
|
|
|
<div style='background - color: blue;
width: 130px;
height: 100%;
border - style: solid;
border - width: 2px;
border - color: red;'>
</div>
<div style='background - color: green;
width: 100%;
height: 100%;
border - style: solid;
border - width: 2px;
border - color: red;'>
</div>
|
ü |
|
ü |
ü ü |
ü |
( |
( |
|
,.+ |
( |
|
( |
|
|
ü |
ü) |
|
ü |
ü |
ZcUh |
ü ü |
ü |
|
) |
|
|
|
|
|
|
|
|
|
||
<div style='background - color: blue; |
|
|
|
|
|
|
||
|
|
width: 130px; |
|
|
|
|
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
border - style: solid; |
|
|
|
|
|
|
|
|
border - width: 2px; |
|
|
|
|
|
|
|
|
border - color: red; |
|
|
|
|
|
|
|
|
float: left;'> |
<!-- ü ü |
ü |
--> |
|
|
|
|
|
|
|
|
|
|
|
|
66
</div>
<div style='background - color: green;
width: 100%;
height: 100%;
border - style: solid;
border - width: 2px;
border - color: red;'>
</div>
|
|
|
|
|
|
|
|
|
|
ü |
ü |
|
) ü |
ZcUh ü |
ü ü |
5YZh f h) |
|
ü |
ü |
ü YZh |
ü |
ü |
|
ü) ü |
f h |
ü |
|
|
ü |
ü( |
ü |
|
) |
|
|
|
ü ü ü |
|
(ü |
|
( |
( |
ü |
|
|
üü |
ü |
. |
|
|
|
|
|
|
|
ü |
|
ü( |
ü |
ü |
|
ü ( |
|
|
üü |
ü |
ü |
ü) |
|
|
|
üjgV hm
|
ü |
jgV hm |
ü ü ü |
|
ü) ü |
ü |
|
ü ü |
5jgVY XXYb) |
ü jgVY |
|
ü |
(ü |
||
ü |
XXYb |
) |
ü ü ( |
ü |
jgV hm |
ü ü |
|
|
|
( |
ü ( |
|
ü |
ü |
|
|
ü ü |
) |
ü |
|
ü ) |
|
|
|
|
|
|
|
|
|
|
7,9 |
|
7*,9 |
|
|
|
|
|
< ,ghmY8#jgV hm5 XXYb6#9 |
7*,9 |
|
|
|
|
||
< ,9 |
|
7*,9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
ü ü (ü |
ü |
) |
|
|
|
|
ü |
XgdUm |
|
|
|
|
|
|
|
|
|
ü |
XgdUm ü ü |
ü |
|
ü ) ü ü(ü |
|||
|
|
ü |
XgdUm |
|
|
|
( |
|
|
|
|
(ü |
|
|
) |
|
üü |
||
|
ü |
|
ü ) |
|
|
|
|
|
|
|
ü |
ü |
XgdUm |
ü |
|
|
|
|
|
|
|
|
|
|
67 |
|
|
|
|
ü |
|
|
|
üü ü (ü |
ü ( |
ü ü |
( ü |
|
|
none |
|
|
||||
|
|
|
ü ü |
|
|
|
|
|
block |
|
|
|
|
|
|
|
inline |
|
ü ü |
|
|
|
|
|
|
|
|
|
|
||
|
|
ü |
bcbY ü |
ü 5 |
|
|
|
|
|
|
|
|
|
|
|
|
< ,9 |
|
7*,9 |
|
|
|
|
|
< ,ghmY8#XgdUm5bcbY6#9 |
7*,9 <!-- ü ü |
ü |
XdUm--> |
|
||
|
< ,9 |
|
7*,9 |
|
|
|
|
|
|
|
|
|
|
|
|
ü |
ü ü |
ü |
(ü |
) |
|
|
|
|
<html> |
|
|
<head> |
|
|
<style type='text/css'> |
|
|
a {display: block;} <!-- |
--> |
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<a href='#'>Link1</a> |
|
|
<a href='#'>Link2</a> |
|
|
<a href='#'>Link3</a> |
|
|
<a href='#'>Link4</a> |
|
|
<a href='#'>Link5</a> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
ü |
|
ü |
|
XgdUm |
|
|
|
|
) |
ü |
ü |
ü ü 5 |
|
ü ü |
ü |
( |
|
ü |
|
ü |
ü ü |
( |
ü |
) |
|
|
|
ü |
ü |
ü |
( |
|
ü |
(ü |
|
) |
|
|
ü |
|
5 |
|
|
|
ü ü |
ü |
üü |
ü) |
|
ü ü |
ü |
|
|
display. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<html> |
|
|
|
|
|
|
|
|
<head> |
|
|
|
|
|
|
|
|
<style type='text/css'> |
|
|
|
|
|
|
|
|
table {display: inline;} |
<!-- |
|
|
--> |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
|
|
|
|
|
<body>
<table>
<tr>
<td><img src='1.png'/></td> </tr>
<tr>
<hX9 ,7*hX9
</tr>
</table>
<table>
<tr>
<td><img src='./image/1.png'/></td> </tr>
<tr>
<hX9 |
7*hX9 |
</tr> |
|
</table> |
|
<table> |
|
|
|
<tr>
<td><img src='./image/1.png'/></td> <tr>
</tr> |
|
<hX9 |
.7*hX9 |
</tr> |
|
</table> |
|
|
|
<table>
<tr>
<td><img src='./image/1.png'/></td> </tr>
<tr>
<hX9 |
/7*hX9 |
</tr> |
|
</table> |
|
<table> |
|
|
|
<tr>
<td><img src='./image/1.png'/></td> </tr>
<tr>
<hX9 07*hX9
</tr>
</table>
ü |
ü |
|
ü |
|
) |
( |
|
ü ( |
( |
ü ü |
ü |
ü |
( |
|
( |
ü |
( |
ü |
ü |
|
( |
ü ü |
aYbi) |
|
|
|
|
|
|
69 |
|
|
|
|
<html>
<head>
<style type='text/css'>
a.menu {display: block; <!-- |
--> |
color: coral; |
|
width :100%; |
|
text - align: center; |
|
text - decoration: none; |
|
font - weight: 700; |
|
background - color: lightblue;} |
|
</style> |
|
</head> |
|
<body> |
|
<div style='background - color: blue; |
|
width: 130px; |
|
height: 100%; |
|
border - style: solid; |
|
border - width: 2px; |
|
border - color: red; |
|
float: left;'> <!-- ü ü |
ü --> |
<a class='menu' href='#'>Link1</a> |
|
<a class='menu' href='#'>Link2</a> |
|
<a class='menu' href='#'>Link3</a> |
|
<a class='menu' href='#'>Link4</a> |
|
<a class='menu' href='#'>Link5</a> |
|
</div> |
|
<div style='background - color: green; |
|
width: 100%; |
|
height: 100%; |
|
border - style: solid; |
|
border - width: 2px; |
|
border - color: red;'> |
|
</div></body></html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
ü |
( |
7;9 |
üü |
|
|
|
( |
|
|
ü ) üü |
ü |
- |
|
|
|
ü |
|
ü ü |
) |
ü |
|
|
ü |
aUf b |
7;9) |
|
|
|
|
|
|
|
|
|
|
|
|
|
<html> |
|
|
|
|
|
|
|
<head> |
|
|
|
|
|
|
|
<style type='text/css'> |
|
|
|
|
|
|
|
a.menu {display: block; |
<!-- |
|
--> |
|
|
|
|
|
color: coral; |
|
|
|
|
|
|
|
|
|
|
|
|
|
70