python/Day21-30/code/new/web1901/css_practice_2.html
2024-12-04 00:04:56 +08:00

102 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Lists, Tables and Forms</title>
<style>
.books>li {
list-style-image: url(images/icon-plus.png);
}
.schedule {
border-spacing: 0;
}
.header {
background-color: rgb(126, 164, 204);
}
.header>th:first-child {
border-top-left-radius: 5px;
}
.header>th:last-child {
border-top-right-radius: 5px;
}
.schedule td, .schedule th {
border: 1px solid lightgray;
}
.header th {
border-bottom: 2px solid rgb(68, 104, 142);
}
label {
display: inline-block;
width: 160px;
text-align: right;
}
</style>
</head>
<body>
<h1>Poetry Workshops</h1>
<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<ul class="books">
<li>A Poetic Perspective</li>
<li>Walt Whitman at War</li>
<li>Found Poems and Outsider Poetry</li>
</ul>
<table class="schedule">
<tr class="header">
<th></th>
<th>New York</th>
<th>Chicago</th>
<th>San Francisco</th>
</tr>
<tr class="odd">
<th>A Poetic Perspective</th>
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Walt Whitman at War</th>
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
<td>Sat, 5 May 2012<br />11am - 1pm</td>
<td>Sat, 19 May 2012<br />11am - 1pm</td>
</tr>
<tr class="odd">
<th>Found Poems &amp; Outsider Poetry</th>
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Natural Death: An Exploration</th>
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
</tr>
</table>
<form action="" method="post">
<fieldset>
<legend>Register your interest</legend>
<p>
<label for="name">Your name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Your email:</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="location">Your closest center:</label>
<select name="location" id="location">
<option value="ny">New York</option>
<option value="il">Chicago</option>
<option value="ca">San Francisco</option>
</select>
</p>
<label>Are you a member?</label>
<input type="radio" name="member" value="yes"> Yes
<input type="radio" name="member" value="no"> No
</fieldset>
<div>
<input type="submit" value="Register" />
</div>
</form>
</body>
</html>