表单布局和页面布局

    <style>
   //将浏览器默认的样式清零
        input {
            padding: 0;
            margin: 0;
            width: 20em;
        }
　　//由于input[type="text"]设置了宽度，所以不能给单选和复选等表单元素设置宽度
        input[type="radio"] {
            width: auto;
            margin: 0 1em 0 0;
        }

        input[type="checkbox"] {
            width: auto;
        }
//将label的display设置为block可以让表单元素和输入提示不在同一行

        label {
            display: block;
        }
//复选框分组
        .col {
            width: 50%;
            float: left;
        }
    style>
<fieldset>
    <div>
        <label>Name<em>(required):em>label>
        <input type="text"/>
        <span>incorrect name!span>
    div>
    <div>
        <label>Email Address:label>
        <input type="text"/>
    div>
    <div>
        <label>Web Address:label>
        <input type="text"/>
    div>

    <div class="col">
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
    div>
    <div class="col">
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
        <div>
            <label for=""><input type="checkbox"/>redlabel>
        div>
    div>
fieldset>