CSS样式和表单提交学习

一周一回顾，分享一周中学习到的新知识点和难题解决方案

1.一些好用但是之前不知道的CSS样式

（1）修改input标签的placeholder样式

<input type="text" placeholder="请输入内容...">

input::-webkit-input-placeholder {
      color: cornflowerblue;
      font-weight: bold;
      opacity: .5;
}

对比图

（2）禁止网页中的文字被选中

<p>
  许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过。偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容?，如莲花般开落”的凄惨，总有伤感于那句“我不是归人，是个过客”的颓废。<br>

  风住尘香花已尽，物是人非频回首。
</p>

body {
      user-select: none;
}

（3）文字超出部分显示为…

<div>
许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过，偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容?
</div>
<div>
许多的美丽总是在不经意间从我的指缝中滑落，依稀耳边响起的总是聆听不断的丁零。没法在花开花落时不伤感难过，偶尔轻轻走来的依然婆娑婀娜，难得感觉“那等在季节里的容?
</div>

div {
  width: 300px;
  margin: 10px 20px;
  white-space: nowrap;
  overflow: hidden;
}

div:nth-child(1){
  color: cornflowerblue;
  text-overflow: ellipsis;
}

修改前后对比图

2.表单按钮与Ajax

form表单中的button按钮，如果不设置type类型，会默认为type=“submit”
当点击按钮的时候，表单则会自动提交
若form表单有action属性，那么则会提交到action所指定的位置
若form表单没有action属性，则会提交给当前页面

解决方案一

修改form表单的属性

<form action="" οnsubmit="return false;">
        <button οnclick="send()">提交</button>
</form>

解决方案二

修改button的type属性

<button  type="button" οnclick="send();">提交</button>

关于表单input、button、submit的具体区别请参考此文档

https://blog.csdn.net/weixin_30376163/article/details/99247775?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

参考文档1
https://blog.csdn.net/qq_38809741/article/details/88841003?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
参考文档2
https://blog.csdn.net/sayoko06/article/details/82421639?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

来源：CSDN

作者：小敏同学

链接：https://blog.csdn.net/girl_Xiaomin/article/details/104893463

标签

csdn

css样式

css