css-homework1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lists, Tables and Forms</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                /* border: 1px solid #000000; */
            }
            body{
                background-color: #F8F8F8;
                margin-left: 10px;
            }
            p{
                margin-top: 20px;
                margin-bottom: 20px;
            }
            ul{
                list-style-image: url(img/icon-plus.png);
                margin-top: 15px;
                margin-bottom: 15px;
                margin-left: 45px;
            }
            table{
                
                border-collapse: separate;
            }
            th,td{
                border: 0px solid gray;
            }
            .head{
                background-color: #90B4D6;
                
            }
            .head>th:first-child{
                border-radius: 5px 0px 0px 0px;
            }
            
            .head>th:last-child{
                border-radius: 0px 5px 0px 0px;
            }
            .head>th{
                color: #fff;
                background: #90b4d6;
                border-bottom: 2px solid #547ca0;
                border-right: 1px solid #749abe;
                border-top: 1px solid #90b4d6;
                text-align: center;
                text-shadow: -1px -1px 1px #666;
                letter-spacing: 0.15em;
            }
            .one{
                background-color: #E0E9F0;
            }
            .one>th{
                text-align: left;
            }
            .even{
                background-color: #D0E2F0;
            }
            .even>th{
                text-align: left;
            }
            fieldset{
                width: 500px;
                margin-top: 20px;
                border: 1px solid #d6d6d6;
                background-color: #fff;
                line-height: 1.6em;
                margin-left: 20px;
            }
            fieldset>legend,fieldset>p,fieldset>span{
                margin-left: 10px;
            }
            input[type=text]{
                width: 125px;
                height: 20px;
                border: 1px solid #d6d6d6;
                margin-left: 120px;
                margin-top: 7px;
            }
            input[value=yes]{
                margin-left: 53px ;
            }
            option[value]{
                margin-left: 120px;
            }
            input[type=submit]{
                border: 1px solid #063;
                margin-left: 420px;
                margin-top: 10px;
                width: 70px;
                height: 35px;
                background-color: #063;
                border-radius: 8px 8px 8px 8px;
                
            }
            select{
                margin-left: 60px;
            }
        </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>
            <li>A Poetic Perspective</li>
            <li>Walt Whitman at War</li>
            <li>Found Poems and Outsider Poetry</li>
        </ul>
        
        <table>
            <tr class="head">
                <th></th>
                <th>New York</th>
                <th>Chicago</th>
                <th>San Francisco</th>
            </tr>
            <tr class="one">
                <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="one">
                <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="http://www.example.com/form.php" method="get">
            <fieldset>
                <legend>Register your interest</legend>
                <p><label class="title" for="name">Your name:</label>
                     <input type="text" name="name" id="name"><br />
                     <label class="title" for="email">Your email:</label>
                     <input type="text" name="email" id="email"></p>
                <p><label for="location" class="title">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>
                <span class="title">Are you a member?</span>
                <label><input type="radio" name="member" value="yes" /> Yes</label>
                <label><input type="radio" name="member" value="no" /> No</label>
            </fieldset>
        <div class="submit"><input type="submit" value="Register" /></div>
        </form>
        
    </body>
</html>
css-homework1

推荐阅读更多精彩内容
