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

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.完整代码

留言墙
输入内容后，点击提交即可
谁：对谁：说：提交撤销

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！