Собираем Web_страницу
Обобщаем все, что узнали о правилах верстки CSS, и соберем WEB-страницу, оформив ее с помощью div блоков. Так выглядел шаблон страницы, которую мы собрали в разделе HTML при помощи таблиц.
Сравним его с тем, что получилось у нас сейчас. Смотрим и изучаем код:
<html><head>
<style type="text/css">
html, body, div {
margin: 0px;
padding: 0px;
border: 0px
}
body {
background:#000000;
color: #ffffff
}
#header, #menu {
text-align: center;
font-family: Tahoma, Veranda, Arial
}
h1 {
color:#ff0000;
font: bold 300%
}
#header, #footer {
margin: 0px;
padding: 10px 20px
}
#menu {
font-size: 80%;
color:#00ff00;
padding: 0px 20px
}
a {
color: #00ff00;
text-decoration: none;
padding: 0px 10px
}
a:hover {
color: #f00
}
#content {
text-align: justify;
padding: 40px 30px;
height:70%
}
#footer {
text-align: right;
font-size: 70%
}
</style>
</head>
<body>
<div id="header">
<img src="image/04_gif.gif" alt="logo">
<h1>HOT TIME</h1>
<font size=-1>Жизнь - это движение: одни шевелят извилинами, другие хлопают ушами</font>
<hr size=2 color=#ff0000 width=80%>
</div>
<div id="menu"> <a href="#.html">link 1</a> | <a href="#.html">link 2</a>| <a href="#.html">link 3</a> | <a href= "mailto:address@mail.ru?subject=Hi!">contact</a></div>
<div id="content">
Папа поучает сына:
- Запомни, сынок, умный человек всегда во всем сомневается. Только дурак может быть полностью уверен в чем-то.
- Ты уверен в этом, папа?
- Абсолютно.
</div>
<div id="footer">© </div>
</body>
</html>
