码迷,mamicode.com
首页 > 其他好文 > 详细

小白简单留言板-(1)

时间:2019-10-17 23:59:25      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:class   font   bsp   ima   图片   小白   color   inf   enter   

本文为板式设置,简单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>

 

小白简单留言板-(1)

标签:class   font   bsp   ima   图片   小白   color   inf   enter   

原文地址:https://www.cnblogs.com/first-bloodlalala/p/11695716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!