«Мои фото»
<html>
<head>
<title>Домашняя страничка</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
.style1 {font-size: 2em}
-->
</style>
</head>
<body>
<div id="holder">
<div id="header">
<p><a href="index.html"><img src="Logo.gif" alt="logo" width="120" height="121" border="0"></a><img src="text.gif" alt="text" width="369" height="78"></p>
</div>
<div id="menu"> <a href="index.html">Главная</a> <a href="1.html">Обо мне</a> <a href="2.html">Мои фото</a> </div>
<div id="undermenu"></div>
<div id="content">
<h1>Мои фото</h1>
<h2>Здесь выложены парочка моих фотографий</h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2 align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="257" height="56" align="bottom" title="Pause">
<param name="movie" value="Баннер.swf">
<param name="quality" value="high">
<embed src="Баннер.swf" width="257" height="56" align="bottom" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</h2>
<h3 class="noindent"><img src="images/7.jpg" alt="Это я" width="235" height="392"><img src="images/8.jpg" alt="Снова я" width="257" height="406"></h3>
<blockquote>
<blockquote> </blockquote>
</blockquote>
<blockquote>
<blockquote> </blockquote>
</blockquote>
<p class="noindent"><img src="images/10.jpg" alt="10" width="244" height="548"> <img src="images/11.jpg" alt="11" width="349" height="426"></p>
<p class="noindent"> </p>
</div>
</div>
</body>
</html>
CSS
/* Styles the body. */
body{
background: #777675 url(bg.png) repeat-x;
color: #006666;
margin: 0;
padding: 0;
margin-bottom: 50px;
font-family: arial, sans-serif;
font-size: 12px;
}
/* The design-holder. */
#holder{
position: relative;
left: 50%; top: 0;
width: 750px; height: auto;
margin-left: -375px; margin-bottom: 50px;
padding-bottom: 25px;
background-color: #F5F7F9;
border-left: 2px #436C78 solid; border-right: 2px #436C78 solid; border-bottom: 2px #436C78 solid;
}
/* Gives all the below id's the same values. */
#header, #menu, #undermenu, #content, #footer{
position: relative;
left: 0; top: 0;
width: 100%;
}
/* The header (with homepage name..). */
#header{
height: 160px;
background: url(menu-top-bg.png) repeat-x;
}
/* "Homepage name..." text above (bright coloured). */
#header h1{
position: absolute;
left: 20px; bottom: 19px;
margin: 0;
font: 1.4em georgia, serif;
color: #fff;
z-index: 1;
}
/* "Homepage name..." text below (dark coloured). */
#header h2{
position: absolute;
left: 21px; bottom: 19px;
margin: 0;
font: 1.4em georgia, serif;
color: #3E515E;
z-index: 0;
}
/* The menu. */
#menu{
height: 18px;
padding-top: 2px;
text-align: right;
font: 1em arial, sans-serif;
}
/* Fixes the links colours and such in the menu. */
#menu a{ color:#7A96A7; text-decoration:none; font-weight:bold; margin-left:10px; margin-right: 10px; }
#menu a:hover{ color:#000; text-decoration:none; margin-left:10px; margin-right: 10px; }
/* The fade-thingie below the menu. */
#undermenu{
height: 24px;
background: url(menu-bottom-bg.png) repeat-x;
}
/* The content holder */
#content{
height: auto;
background-color: transparent;
}
/* Styles the 'p'-tag. */
p{
margin: 25px 30px 10px 30px;
padding: 0;
text-align: justify;
text-indent: 15px;
font: 1em arial, sans-serif;
line-height: 1.5em;
color: #3E515E;
}
/* Use this (with the 'h4'-tag as header) if you want to quote something. */
.quote{
margin: 0 30px 10px 50px;
font: italic 0.8em verdana, sans-serif;
background-color: #fff;
padding: 5px;
text-indent: 0;
border: 1px #aaa dotted;
}
/* Use this if you don't want first lines on all paragraph to be moved 15px inn */
.noindent{
text-indent: 0;
}
/* The biggest font. */
h1{
font: 2em "times new roman", serif;
margin: 25px 0 0 30px;
padding: 0;
color: #3E515E;
}
/* The font below the biggest font. */
h2{
font: 0.8em georgia, serif;
margin: -3px 0 0 35px;
padding: 0;
color: #aaa;
}
/* Use this for paragraph titles. */
h3{
font: 1.4em verdana, serif;
text-decoration: underline;
margin: 20px 0 0 30px;
padding: 0;
color: #3E515E;
}
/* Use this on all paragraphs (but not #quote) wich are part of the article/documentation/etc.. */
.text{
margin: 15px 30px 10px 30px;
}
/* The title to be used when displaying a quote with '#quote'. */
h4{
font: 1.2em georgia, serif;
margin: 0 0 0 50px;
padding: 0;
color: #3E515E;
}
/* Italic text. */
i{
font: 1em arial, sans-serif;
font-style: italic;
color: #000;
}
/* Bold text. */
b{
font-weight: bold;
color: #3E515E;
}
/* The list ('li') holder. */
ul{
background-color: #fff;
}
/* Lists. */
li{
margin: 0 0 0 5px;
padding: 0;
}
/* Styles all links on the page (without the menu, wich allready have been styled). */
a{
color: #000;
font-weight: bold;
text-decoration: underline;
}
/* Same as above, exept this is the hover (mouse-over) effect. */
a:hover{
color: #3E515E;
text-decoration: none;
}