前端开发笔记_aria-expanded

aria-expanded=“false”

• aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

aria-hidden字符串

• 可选值为true和false，true表示元素隐藏(不可见)，false表示元素可见

快捷键

• Ctrl + Enter 光标不在末尾回车
• Ctrl + Backspace 删除一个词
• Ctrl + -> 以词为单位后移

col-xs-n中放图片不生效

img {
   
  display: block;
  max-width: 100%;
}
1
2
3
4
5

display

• block 默认，此元素将显示为块级元素，此元素前后会带有换行符
• inline 此元素会被显示为内联元素，元素前后没有换行符
• inline-block 行内块元素

使用col就要在母元素上清除浮动，因为col栅格也是浮动的

使用flag覆盖叠加新的属性

• css中使用.side-bar-card.flag {}来调用
• html中用<div class="side-bar-card flag clearfix">

a标签链接不带下划线，并列换行写

a,
a:hover,
a:visited,
a:link,
a:active {
   
  text-decoration: none;
}
1
2
3
4
5
6
7
8

line-heigh不要写px

表格居中

<table align="center">
1

bootstrap响应式表格

<div class="table-responsive">
1

表格内容水平垂直居中

<!-- 水平居中 -->
<th style='text-align: center;'>host</th>
<!-- 垂直居中 -->
<td rowspan=$row_host1 style='vertical-align: middle;'>host1</td>
<!-- 既水平又垂直居中 -->
<td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>hello</td>
1
2
3
4
5
6

图片撑满

background-size: cover;
1

input/select/textarea/… + .form-control

.form-group

• 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列

响应式表格

• 将任何.table元素包裹在<div class="table-responsive">元素内

垂直方向的内容截断

• 响应式表格使用了overflow-y: hidden属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件

.form-inline

• 输入框和单选/多选框控件默认被设置为width: 100%;。在内联表单，我们将这些元素的宽度设置为width: auto;，因此，多个控件可以排列在同一行。根据布局需求，手动设置宽度
• 一定要添加label标签，对于内联表单，可以通过为label设置.sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby或title属性

.form-horizontal

• 无需再添加.row了

margin对span无效

display: block;
line-height: 1.5;
1
2

button后退

<button class="btn btn-danger ycx" onclick="javascript :history.back(-1);">返回</button>
1

居中

• 文本内容居中：text-center
• 图片居中：center-block
• 其他类型元素居中：col-md-offset-X

在form标签上加novalidate属性，可以禁用h5默认的表单验证效果

div置顶的方法

position: relative;
z-index: 99999;
1
2

margin:auto实现绝对定位元素的居中

.element {
   
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11

ajax中dataType为预期服务器返回的数据类型，不写有默认值，开发过程中不要写

服务器只返回单个String类型数据，则一定要写dataType: 'text'

ajax表单序列化传输

$("#submit").on('touchstart', function