<body>
, <body>. ( ):
<body>
</body>
</html>
. index.html. index? , www.piggs.ru . . , .
CSS
. ( - ) . , , .
:
p {color: #000;}
, . , , . color , . , . , . , ( )? 00 00 00, 000. .
, , . :
1. .
2. .
, IE Firefox , Opera, , .
:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}
:
1. , . . . :
- 0,
- 0,
- 0.
, , , , . , IE (Internet Explorer) , . . , . , .
2. : 2%, , . , , 2% . .
|
|
4 . . , , , ( , : , , ).
( , ), 2% 0 0. , : 15px 0 0. . , .
:
) 5px 10px 15px 20px; 5 , 10, 15, 20.
) 5px 10px 15px; 5, 10, 15.
) 5px 10px; 5, 10.
) 5px; 5.
), ) ) . , .
: , - (#333 , #333333), . : , . :
" Times New Roman"
3. - container (#). . div .
? , . : , auto. , . 760 .
: body -? , (body) - . , - body, 760 , . . .
, ( , , ), : . -, . - 22 , - 14. , , . ?
-, , , , 1 2. , - . , .
|
|
. , , . . , , ( h, ul, ol, a). , - .
( , ), , , , ( , 835 ) .
7 . , . : , . , . , . , Images, Articles .. . .
(header):
#header {
background: url(header.jpg) no-repeat;
width: 760px;
height: 158px;
}
, - 760158 ( ). url(header.jpg) . (!) ? , , . . , :
url(http://www.-.ru/header.jpg)
no-repeat , . - . . . , ( ), no-repeat repeat-x, , repeat-y.
, . , , .css style.css
. <body></body> :
<div id="container">
<div id="header">
</div>
</div>
. . , . , . <div id="container"> <div id="header">, </div>, </div>. . , div .
div id , id . .
. :
#nav {
background: url(nav-bg.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
|
|
}
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
, ( ). .
, , (, , .)
HTML ul. ( ) li. :
<ul>
<li> .</li>
<li> .</li>
<li> .</li>
</ul>
, , li ul.
. nav. : nav-bg.jpg 835 . . , repeat-x, , ( ).
- #f00 . , ( ). : , , ( em, . 1.8em , 1.8 ), .
, . none. , , ?
- . , , display: inline;
: , 8 .
, . , . ? , a. .
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
, , .
:
a {
text-decoration: none;
}
. , . , . , , .
. :
<div id="header">
</div>
:
<div id="nav">
<ul>
<li></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#">-</a></li>
<li><a href="#"></a></li>
</ul>
</div>
: , , , . (#), .
|
|
. 4- #nav, , ul, li : nav ul, ul li. ( , 760 ). .
, , - , ( 兔). , :
1. ( .)
2. .
, . , , , . :
<li><a href="#">-</a></li>
<li><a href="#"></a></li>
</ul>
</div>
:
<div id="text">
<img class="img1" src="pig1.jpg" alt=" " />
<p> ! ! , - !</p>
<p> -. . , , . ! .</p>
<p> , -. , +</p>
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt=" " />
</div>
, , . . , . , , .
div text , . , , ( img).
: , , ; , , , ..
class. , ( id). , class div! . .
:
:
<img src="___/picture.jpg" alt="" />
:
<img class="img1" src="___/picture.jpg" alt="" />
class img1, . . , , div, , -.
. . . text.
CSS:
#text {
width: 545px;
font-size:.8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}
, 545 . 0.8em ( ,.8em ). 10 , . , . float . . : . ! . . , : left , . , right , .
|
|
? ( ) , , , . , right float.
. justify . , . , . . . ! .
indent . .
. , , (dotted) 1 .
. :
.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float:right;
}
.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.venzel {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;}
. img1, img2, venzel, . . , , , , . , . -10px. , .
. , , .
. , #, . , id, class.
, . , - - .
. - php-, , . , . ol.
:
..
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt=" " />
:
<div id="members">
<h2> :</h2>
<ol>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"> </a></li>
<li><a href="#"></a></li>
</ol>
<ol>
<li><a href="#"></a></li>
<l><a href="#"></a></li>
<li><a href="#"> </a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />
? members. . h2 . , , .
. ? . , , , , . :
1 2
3 4
5 6
.
. . .
, .
#members {
width: 300px;
height: 190px;
float: right;
}
#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 304px;
height: 13px;
float: right;
}
. . , . ? , , , , , . , . . , .
. .
ol . (, ) , -.
( ). , . - , ! - text .
. , , .
index.html. :
.
<li><a href="#"></a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />
:
</div>
<div id="news">
<h3> :</h3>
<ul>
<li> , . , , . !</li>
<li> . . .</li>
<li> ! , . . .</li>
</ul>
</div>
<div class="clearfloat"></div>
? -, </div>, , . 3- (h3).
clearfloat ( , ). ? . . - ( , IE - ). Opera Firefox . IE . . .
:
#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
list-style: url(marker.jpg) inside;
}
#news li {
font-size: 75%;
padding: 5px 10px;
}
, . , . . , , 2- ( ), 120%.
- . , 3- 2-. ! , , 0.8em.
. - . , , , . . 1417 url(marker.jpg). inside. ? - . , . . inside, .
, , , . , . : . , , . . .
, , . , .
:
..