星巴克咖啡

关键：表单的应用

1.表单的对齐问题
方法：在表单外套一个div，并对div用text-align，即可左右居中对齐。
2.用lable实现提示语和输入框的串联（for=“xx”,id="xx"一定要一样）
3.form的action是提交信息的网址，method（POST，GET）是学习提交方法。
4.textarea

代码：
index.html

    
    
    
    
    


    

    

        
        

            
主页
            
咖啡及文化
            
饮品及美食
            
星享俱乐部
            
在线订购
        
    
    

        
订购星巴克咖啡豆
        

            

                你喜欢的咖啡豆品种：

                品种：


                数量（袋）：

                希望送货日期：

                附加服务：


                
邮寄地址
                姓名：

                详细地址：

                邮编：

                联系电话：

                留言：
            
            

                

                咖啡豆

                咖啡粉

                 

                 

                礼品包装 

                商品目录 

   
                 

                 

                 

                 

                 

                
            
        
    


            

style.css

* {
    margin: 0;
    padding: 0;
}
.top {
    height: 7px;
    margin-top: 1px;
    background-color: #006f47;
}
header {
    margin: 0 auto;
    width: 860px;
    height: 125px;
}
header img {
    float: left;
    margin: 10px 0 0 40px;
}
header ul li {
    float: left;
    list-style: none;
}
header ul li a {
    display: block;
    color: #006f47;
    text-decoration: none;
    padding: 6px;
    margin: 69px 0px 0 23px;
    background-color: #efe5d0;
}
header ul li a:hover {
    cursor: pointer;
    background-color: #c8b99c;
}
.main {
    width: 861px;
    height: 422px;
    margin: 20px auto;
    background: url(./images/background.gif) repeat-x;
}
.main h4 {
    font-weight: normal;
    color: #576f47;
    margin: 22px 0;
    text-align: center;
}
.main p {
    font-weight: bold;
    padding-bottom: 5px;
}
.main  .left {
    float: left;
    width: 228px;
    height: 350px;
    text-align: right;
}
.main .right {
    float: left;
    width: 360px;
    height: 350px;
    text-align: left;
    margin-left: 10px;
}