HTML表单

今天使用表单＜form＞写了注册页面。

表单标签＜form＞

＜input＞

 - text
 - password
 - radio ——单选
 - checkbox——多选
 - hidden——隐藏字段
 - submit
 - file
 - reset
 - button

＜select＞

 - option

＜textarea

表单标签：＜form＞

action属性：请求路径，服务器地址
method属性：请求方式，get 提交的数据追加在请求路径上， post 不追加不显示。

输入域标签：＜input＞

name属性
value属性
size属性
readonly属性
maxlength属性

下拉列表标签：＜select＞

name
multiple属性：多选，默认单选
option子标签
- selected：勾选当前选项
- value：发送给服务器的选项值

文本域标签：＜textarea＞

cols属性
rows属性

<body>
    <form action="#" method="get">
        隐藏字段：<input type="hidden" name="id" /><br />
        用户名：<input type="text" name="username" size="40px" maxlength="5" readonly="readonly" placeholder="请输入用户名"/><br />
        密码： <input type="password" name="password" /><br />
        确认密码：<input type="password" name="repassword" /><br />
        性别：<input type="radio" name="sex" value="男" />男
             <input type="radio" name="sex" value="女" checked="checked" />女<br />
        爱好：<input type="checkbox" name="hobby" value="钓鱼" />钓鱼 
             <input type="checkbox" name="hobby" value="打电动" />打电动
             <input type="checkbox" name="hobby" value="写代码" checked="checked" />写代码<br />
        头像：<input type="file" name="file" /><br />
        籍贯：<select name="province">
                <option>---请选择---</option>
                <option value="北京" selected="selected">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
              </select><br />
        自我介绍：<textarea name="zwjs"></textarea><br />
        提交按钮：<input type="submit" /><br />
        普通按钮：<input type="button" value="注册" /><br />
        重置按钮：<input type="reset" value="重置" /><br />
    </form>

</body>

DIV+CSS重写网站首页

css的引入

行内引入
内部引入
外部引入：＜link rel=“stylesheet” type=“text/css” href = “ ”

css的选择器

ID选择器：#id属性名{} id保证唯一
类选择器：.类名{}
元素选择器：元素名{}
层级选择器：一层层的标签，空格隔开{}
属性选择器：标签名[标签属性 = ‘标签属性值’] {}

div+css布局

第一步：先定义个大的 div，然后嵌套 8 个小的 div。
第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div
第三步：(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)
第四步：(第三行)在小 div 里面放置一张图片
第五步：(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div，最后一在右
边的 div 里面嵌套 10 个 div)
第六步：(第五行)在小 div 里面放置一张广告图片
第七步：(第六行)复制第四行的代码
第八步：(第七行)在小 div 里面放置一张广告图片
第九步：(第八行) 在小 div 里面放置超链接和文字内容。

<style>
    #father{
        border:0px solid red;
        width:1300px;
        height:2170px;
        margin:auto;

    }
    #logo{
        border:0px solid black;
        width:1300px;
        height:50px;
        }
    .top{
        border:0px solid blue;
        width:33.2%;
        height:50px;
        float:left; 
    }
    #top{
        padding-top:15px;
        height:35px;
        }
    #menu{
        border:0px solid red;
        width:1300px;
        height:50px;
        background-color:black;     
        }
    ul li{
        display:inline;
        color:white;

        }
    #product{
        border:0px solid red;
        width:1300px;
        height:566px;

        }   
    #product_top{
        border:0px solid blue;
        width:100%;
        height:45px;
        padding-top:8px;

        }   
    #product_bottom{
        border:0px solid green;
        width:100%;
        height:510px; 
        }
    #product_bottom_left{
        border:0px solid red;
        width:200px;
        height:510px;
        float:left;}
    #product_bottom_right{
        border:0px solid blue;
        height:510px;
        width:1096px;
        float:left;}
    #big{
        border:0px solid red;
        width:546px;
        height:253px;
        float:left;}
    .small{
        border:0px solid blue;
        width:181px;
        height:253px;
        float:left;
        text-align:center;} 
    #bottom{
        text-align:center;} 

    a{
        text-decoration:none;}      

</style>
</head>

<body>
    <div id="father">
          <!--logo部分-->
          <div id="logo">
              <div class="top">
                <img src="img/logo2.png" height="46px" />
              </div>
              <div class="top">
                <img src="img/header.png" height="46px"/>
              </div>
              <div class="top" id="top">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
              </div>
          </div>
         <!-- 导航栏部分-->
          <div id="menu">
              <ul>
                <a href="#"><li style="font-size:18px">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>奢侈品</li></a>
              </ul>
          </div>
         <!-- 轮播图片-->
          <div id="">
              <img src="img/1.jpg" width="100%" />
          </div>
          <!--最新商品-->
          <div id="product">
              <div id="product_top">
              &nbsp;&nbsp;&nbsp;
                <span style="font-size:25px;">最新商品</span>&nbsp;&nbsp;&nbsp;
                <img src="img/title2.jpg" />
              </div>
               <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="img/big01.jpg" width="100%" height="100%" />
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="img/middle01.jpg" width="100%" height="100%"></a>
                        </div>
                        <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>

                    </div>

              </div>
          </div>
          <!--广告图片-->
          <div id="">
              <img src="img/ad.jpg" width="100%" />
          </div>
          <!--热门商品-->
          <div id="product">
              <div id="product_top">
              &nbsp;&nbsp;&nbsp;
                <span style="font-size:25px;">热门商品</span>&nbsp;&nbsp;&nbsp;
                <img src="img/title2.jpg" />
              </div>
               <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="img/big01.jpg" width="100%" height="100%" />
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="img/middle01.jpg" width="100%" height="100%"></a>
                        </div>
                        <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>
                          <div class="small">
                            <img src="img/small03.jpg" />
                            <a href="#"><p style="color:gray;">电炖锅</p></a>
                            <p style="color:red;">��399</p>
                        </div>

                    </div>

              </div>
          </div>
           <!--广告图片-->
          <div id="">
              <img src="img/footer.jpg" width="100%" />
          </div>
          <!--友情链接-->
          <div id="bottom">
              <a href="#">关于我们 </a>
              <a href="#">联系我们</a>
              <a href="#">招贤纳士</a>
              <a href="#">法律声明</a>
              <a href="#">友情链接</a>
              <a href="#">支付方式</a>
              <a href="#">配送方式</a>
              <a href="#">服务声明</a>
              <a href="#">广告声明</a>
              <p>
                Copyright @ 2005-2016 传智商城 版权所有
              </p>   
          </div>
    </div>
</body>

昨天的table的嵌套分割布局有局限性，不如div+css更灵活，div+css应用的更灵活广泛，它可以浮动，更加合理方便的划分整体的布局。

表单andDIV+CSS