<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form,table,list</title>
<link rel="stylesheet" href="css style.css" />
</head>
<body>
<h1>Поэтические чтения</h1>
<p>Мы проведем ряд встреч и симпозиумов в течении года.</p>
<p>Вход на следующие мероприятия для участников свободный:</p>
<ul>
<li>Поэтическая перспектива</li>
<li>Вечер поэзии в честь Д.Р. Пушкина А.С.</li>
<li>Поэзия и поэты серебрянного века</li>
</ul>
<table class="head">
<tr class="body">
<th></th>
<th>Москва</th>
<th>Санкт-Петербург</th>
<th>Екатеринбург</th>
</tr>
<tr class="neven">
<td>Поэтическая перспектива</td>
<td>Сб.,4 февраля 2012 <br />11:00 - 14:00</td>
<td>Сб.,3 марта 2012 <br />11:00 - 14:00</td>
<td>Сб.,17 марта 2012 <br />11:00 - 14:00</td>
</tr>
<tr class="even">
<td>Вечер поэзии в честь Д.Р Пушкина А.С.</td>
<td>Сб.,7 апреля 2012 <br />11:00 - 13:00</td>
<td>Сб.,5 мая 2012 <br />11:00 - 13:00</td>
<td>Сб.,19 мая 2012 <br />11:00 - 13:00</td>
</tr>
<tr class="neven">
<td>Поэзия и поэты серебрянного века</td>
<td>Сб.,9 июня 2012 <br />11:00 - 14:00</td>
<td>Сб.,7 июля 2012 <br />11:00 - 14:00</td>
<td>Сб.,21 июля 2012 <br />11:00 - 14:00</td>
</tr>
<tr class="even">
<td>Поэты 21 века</td>
<td>Сб.,4 августа 2012 <br />11:00 - 16:00</td>
<td>Сб.,8 сениября 2012 <br />11:00 - 16:00</td>
<td>Сб.,15 сентября 2012 <br />11:00 - 16:00</td>
</tr>
</table>
<form action="http://www.exampl.com/profile.php">
<fieldset>
<legend>Зарегистрируйтесь</legend>
<p>
<label class="title" for="name">
Ваше имя:
<input type="text" name="name" id="name" />
</label>
<label class="title" for="email"
><br />
Ваш email:
<input type="text" name="email" id="email" />
</label>
</p>
<p>
<label class="title" for="location"> Ближайший центр: </label>
<select name="location" id="location">
<option value="ma">Москва</option>
<option value="sp">Санкт-Петербург</option>
<option value="eg">Екатеринбург</option>
</select>
</p>
<p>
<span>Являетесь ли вы участником?</span>
<label> <input type="radio" name="member" value="yes" /> Да </label>
<label> <input type="radio" name="member" value="no" /> Нет </label>
</p>
</fieldset>
<div class="submit"><input type="submit" value="Регистрация" /></div>
</form>
</body>
</html>
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
color: #666;
background-color: beige;
}
li {
line-height: 1.6em;
}
ul {
list-style-image: url("star.png");
}
table {
border-spacing: 0px;
}
th {
background-color: rgb(45, 181, 219);
text-transform: uppercase;
padding: 4px 4px 4px 4px;
color: rgb(255, 255, 255);
outline: 2px solid rgb(black, black, black);
border-bottom: 2px solid #52565d;
border-right: 1px solid #749abe;
}
tr.body th:first-child {
border-top-left-radius: 5px;
}
tr.body th:last-child {
border-top-right-radius: 5px;
}
tr.neven td {
background-color: #bfcdd9;
border-bottom: 1px solid #bbbdc1;
border-right: 1px solid #bbbdc1;
}
tr.even td {
background-color: aqua;
border-bottom: 1px solid #bbbdc1;
border-right: 1px solid #bbbdc1;
}
.head {
font-size: 90%;
}
fieldset {
width: 310px;
padding: auto;
margin-top: 20px;
border: 1px solid #d6d6d6;
background-color: rgb(240, 233, 233);
line-height: 1.6em;
}
legend {
font-style: italic;
color: #666;
}
input[type="text"] {
width: 120px;
border: 1px solid #d6d6d6;
padding: 2px;
outline: 0;
}
input[type="text"]:focus,
input[type="text"]:hover {
/* cursor:text */
background-color: #d0e2f0;
border: 1px solid #999;
}
input[type="submit"] {
border: 1px solid #006333;
width: 100px;
margin-left: 2px;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
}
input[type="submit"]:hover {
border: 2px solid #343735;
background-color: #00cc33;
color: #ffffff;
cursor: pointer;
}
.title {
float: left;
width: 190px;
clear: right;
}
.submit {
width: 310px;
text-align: right;
}
Простой
