«

表单、搜索页面

MitSeek 发布于 阅读：28 HTML 

表单form
    action 表单提交的地址进行处理
    name用于给表单命名
标签input
    type  text文本
          password密码
          hidden隐藏域
          radio单选按钮
          checkbox复选框
标注label
按钮button
        name 名称
        type 类型button sumit reset
        value初始值
        disabled是否禁用此按钮
select 表单控件，多选菜单
        option下拉菜单内容
fieldset表单内的相关元素分组
    legend用于定义fieldset标题
textarea标签用于定义多行文本域
output用于计算结果输出
meter标签用于定义度量衡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                background-image: url("02.jpg");
                background-size:cover;/* 满屏 */
                }
            ul{
                list-style: none;
                position: absolute; /* '绝对定位' */
                right: 0;
                top: 15px;
            }
            ul li{
                float: left;
                margin-right: 15px;
            }
            ul li a{
                color: white;
            }
            .title{
                width: 400px;
                margin: auto;
            }
            .title div{
                float: left;
                border: 1px solid red;
                font-size: 30px;
                padding: 5px 15px;
                margin-left:30px;
                border-radius:20px;
            }
            .box{
                width: 800px;
                margin: 200px auto;
            }
            .search1{
                width: 500px;
                height: 40px;
                line-height: 36px;
                background: rgba(255, 255, 255,0.5);
                font-size: 16px;
                color: blue;
                margin-left: 80px;
            }
            .search2{
                font-size: 16px;
                width: 104px;
                height: 45px;
                background: #38f;
                color: #fff;
                line-height: 40px;
                border: none;
            }
            .search2:hover{
                background: #969922;
            }
        </style>
    </head>
    <body>
        <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>
            <li><a href=""></a>登录</li>
            <li><a href=""></a>注册</li>
        </ul>
        <div class="title">
            <div>搜</div>
            <div>搜</div>
            <div>搜</div>
        </div>

        <div class="box">
            <input type="text" class="search1" /><input type="button" value="搜搜搜" class="search2" />
        </div>
    </body>
</html>

HTML