星巴克咖啡

最新推荐文章于 2022-06-11 11:51:27 发布

苗苗

最新推荐文章于 2022-06-11 11:51:27 发布

阅读量462

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_43689820/article/details/87942574

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

关键：表单的应用

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

<textarea name="liuyan" id="liu" cols="30" rows="4"></textarea>

代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="top"></div>
    <header>
        <img src="./images/星巴克表单_07.jpg" alt="">
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">咖啡及文化</a></li>
            <li><a href="#">饮品及美食</a></li>
            <li><a href="#">星享俱乐部</a></li>
            <li><a href="#">在线订购</a></li>
        </ul>
    </header>
    <div class="main">
        <h4>订购星巴克咖啡豆</h4>
        <form action="#" method="POST">
            <div class="left">
                <label for="pz">你喜欢的咖啡豆品种：</label><br>
                <label for="kind">品种：</label><br><br>
                <label for="num">数量（袋）：</label><br>
                <label for="date">希望送货日期：</label><br>
                <label for="ff">附加服务：</label><br><br>
                <p>邮寄地址</p>
                <label for="na">姓名：</label><br>
                <label for="ad">详细地址：</label><br>
                <label for="you">邮编：</label><br>
                <label for="tel">联系电话：</label><br>
                <label for="liu">留言：</label>
            </div>
            <div class="right">
                <input type="text" id="pz"><br>
                <input type="radio" id="kind">咖啡豆<br>
                <input type="radio" id="kind">咖啡粉<br>
                <input type="number" id="num" min="0"> <br>
                <input type="date" id="date"> <br>
                <input type="checkbox" id="ff">礼品包装 <br>
                <input type="checkbox" id="ff">商品目录 <br><br>   
                <input type="text" id="na" placeholder="请输入收货人姓名"> <br>
                <input type="text" id="ad" placeholder="请输入详细收货地址"> <br>
                <input type="text" id="you" placeholder="请输入邮编"> <br>
                <input type="text" id="tel" placeholder="请输入收货人手机号"> <br>
                <textarea name="liuyan" id="liu" cols="30" rows="4"></textarea> <br>
                <input type="submit">
            </div>
        </form>
    </div>
</body>
</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;
}

苗苗

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
星巴克咖啡

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

扫一扫