【简单的留言墙】HTML+CSS+JavaScript

                                                           目标：做一个简单的留言墙

                                        

1.首先我们用HTML的一些标签，初步构造区域 样式。

3.文字已经居中，但是下面的输入框，按钮等还没居中，由于他们都被设置在div标签中，接下来可以对所有在div标签中的属性使用弹性布局。设置这些元素的水平排列方式。

 

4.位置居中问题已经解决，但是会发现输入框及文字排列还并不整齐。这是因为我们并未对span标签里的文字及input标签设置各自宽度及高度，一旦设置就会各自居左排布。

      

5. 设置button按钮的宽度，文字颜色，按钮颜色

       

 6.基本布局已经完成，但还存在几个问题

6.1 点击按钮无反应，使用伪类选择器进行设置

6.2.输入框有黑边框问题 还有光标显示位置太靠左。

以下代码有所省略，突出了重点，还是利用CSS选择器设置属性。

input {
            /* 宽度 */
            width: 200px;
            /* 设置高度 */
            height: 25px;
            /* 消除输入框黑框 */
            outline: none;
            /* 光标位置 */
            padding-left: 5px ;
        }

6.3.通过网页中的检查查看发现我们所设置的输入框元素的宽度应该是30px,而这里却显示29.91px,显然有问题。原因是与浏览器的自动设置有关，为防止这些细节出错，最好再加上一段代码。

/* *通配符 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

 最终宽度成功设置为25。

6.4.设置高度，使整体高居中度。

        h1 {
            /* 使h1标签中的文字样式居中 */
            text-align: center;
            /* 设置外边框 上为100高度 下为20高度 左右自适应 */
            margin: 100px 20px auto;
        }

        p {
            /* 使p标签中的文字样式居中 */
            text-align: center;
            color: darkgray;
            /* 设置外边框 */
            /* 设置外边框 上为20高度 下为20高度 左右自适应 */
            margin: 20px 20px auto;
        }

6.5.设置背景图片，及整体高度 宽度 100% 即跟随浏览器大小的变化而变化。

html body {
            width: 100%;
            background-image: url("背景.png");
            /* 图片全覆盖且不重复 */
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
        }

7. 接下来用到 JavaScript 进行行为交互。

8.完整代码

    
    
    



    
留言墙
    
输入内容后，点击提交即可

    

        谁：
        
    
    

        对谁：
        
    
    

        说：
        
    
    

        提交
    
    

        撤销