White Simple Message Board - (1)

This article is a plate set, simple HTML and CSS

important point:

       1. <form action = "php file address" method = "post"> to pass to the post method php files, spreadsheet files must be applied to the processing form tags

       After 2.autofocus enter the auto focus on the table, placeholder: prompt content, will enter disappears

 

 

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="请输入留言内容："></textarea><br/>
                <label for="text">用户名：</label>
                <input type="text" class="user"/>
                <input type="submit" class="submit" value="提交留言"/>
            </form>
        </div>
        <!--输出板块-->
        <class = div "the Output">                 I was oh content            <div class = "Content">            <span class = "Time"> Time </ span>
            <span class = "the User"> username </ span>



            </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>