小白简单留言板（1）-页面设置等

本文为板式设置，简单HTML与CSS

视频：

注意点:

       1.<form action=”php文件地址”  method=”post”>   以post方法将表格提交的数据传向该php文件,处理表格文件必须要外加form标签。

       2.textarea中的autofocus 进入后自动把焦点放在该表格， placeholder:提示内容，输入内容后将消失。

　　3.表格中的name在php处理数据时会使用。

 

 

CSS：

<style type="text/css">
    .head {text-align:center;color:#FAA261;}
    .wrap {
        width:600px;
        margin:0px auto;
        //background:#390;
    }
    .input .content{
        margin-bottom:5px;
        width:594px;
        height:150px;
    }
    .input .submit{float:right;}
    .output {margin-top:5px;background:#CCC;padding:3px;margin-top:20px;}
    .output .user{color:#95F;}
    .output .time{float:right;color:#6C0;}
</style>

 

HTML：

<div class="wrap">
        <h1 class="head">留言板</h1>
        <!--输入板块 -->
        <div class="input">
            <form action="save.php" method="post">
                <textarea class="content" autofocus="autofocus" placeholder="请输入留言内容：" name="content"></textarea><br/>
                <label for="text">用户名：</label>
                <input type="text" class="user" name="user"/>
                <input type="submit" class="submit" value="提交留言"/>
            </form>
        </div>
        <!--输出板块-->
        <div class="output">
            <span class="user">用户名</span>
            <span class="time">时间</span>
            <div class="content">
                我是内容哦
            </div>
        </div>
         <div class="output">
            <span class="user">用户名</span>
            <span class="time">时间</span>
            <div class="content">
                我是内容哦
            </div>
        </div>
         <div class="output">
            <span class="user">用户名</span>
            <span class="time">时间</span>
            <div class="content">
                我是内容哦
            </div>
        </div>
    </div>