《HTML5实战》Lesson03

Week03     2016/09/28上午1-4节

一、复习上节课内容：

二、自己完成登陆明细部分P43：代码清单2-3

1，<fieldset>、<legend>

2，<ul>、，<li>、<lable>、<div>、<input> required

3，代码如下：放在P42代码2-2<fieldse>的下面

 <fieldset>
         <legend>Login Details</legend>
            <ul>
             <li>
                 <label class="required">
                     <div>Password</div>
                        <input type="password" name="password" required>
                    </label>
                </li>
                <li>
                 <label class="required">
                     <div>Confirm Password</div>
                        <input type="password" name="confirm_password" required>
                    </label>
                </li>
            </ul>
        </fieldset>

4、效果如下：红色部分

三、订单明细部分P46：代码清单2-4

1，<fieldset>、<legend>

2，5行5列的表格

         <table>
             <thead>
                 <tr><th></th><th></th><th></th><th></th><th></th></tr>
                </thead>
                <tbody>
                 <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                </tbody>
                <tfoot>
                 <tr><td></td><td></td><td></td><td></td><td></td></tr>
                </tfoot>
            </table>

3，<output>、<input  type="hidden">、<input  type="number">

4，代码：放在P43代码2-3<fieldse>的下面

5，运行效果图：