经验集锦（不定时更新）

Posted 2020-08-09

一般页面头部的导航用<ul><li></li></ul>,分隔符用图片

 

对于要在同一水平线的搜索框和搜索栏，可以加上属性vertical-align:middle

标题过长实现自动出现省略号：ul li p{
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}

在列表中的前面奇怪的符号（比如小圆点、小方点），可以将其作为li或a的背景图，文字内容放在p标签里，里面再嵌套a标签。

word-spacing对中文无效，但是在中文间加入空格就有效了。

placeholder的设置：
.form-item > .form-txt::-webkit-input-placeholder {color:#999;}
.form-item > .form-txt:-moz-placeholder {color:#999;}
.form-item > .form-txt::-moz-placeholder {color:#999;}
.form-item > .form-txt:-ms-input-placeholder {color:#999;}

overflow:hidden可以让左右浮动的元素将父元素撑起来
overflow:auto可以让超出的部分自动出现滚轮

ie7不支持margin为负值，所以可以给margin设置为负值的元素添加属性：*zoom:1;_position:relative;

ie7中，设置了overflow:hidden后还是溢出的解决方法为：给容器元素添加属性：position:relative;

对于单选、复选按钮，要保持按钮和文字的对齐，可以均设置属性：vertical-align:middle;

去掉浏览器自带的、当输入框输入数据时边框变蓝：outline:none;

禁止textarea拖拽改变大小：resize: none;

web开发中，由于checkbox比较小用户操作起来不是很方便，为了方便用户对checkbox操作我们可以让用户点击说明文字时即可实现
选择/勾选 checkbox ，实现代码：<input id="ck1" type="checkbox" />
<label for="ck1">点击我即可选择/取消勾选状态</label>

表单元素的一些属性：
<select class="select-short common-tyle l" name="education">
<option value="">请选择文化程度</option>
<option value="01">小学</option>
<option value="02">初中</option>
<option value="03">高中</option>
<option value="04">大学</option>
<option value="05">硕士</option>
<option value="09">其他</option>
</select>
<input id="work" type="radio" name="property" value=""/>
<input id="checkbox-fix" type="checkbox" name="character" value=""/>
<input type="text" class="input-short common-tyle l" placeholder="请填写姓名" name="name"/>

 

text-align:justify;实现兼容ie，还要加上属性：text-justify:inter-ideograph;

将背景图实现范围内拉伸：background: url("../images/advertis.jpg") no-repeat;
background-size: 100% 100%;

/*css实现单双行颜色*/
#mockpart:nth-child(even){
background-color: #f2f2f2;
}
#mockpart:nth-child(odd){
background-color: #fff;
}

 

外面套一个放背景(背景很大的时候加上属性min-width)。里面容器放主题内容，居中。

可以既设置背景色又设置背景图像

nodeType返回的值是大写的

z-index只能在position属性值为relative或absolute或fixed的元素上有效。

ie下的getElementsByName支持的是表单元素、a等特定的标签，这些特定的标签才能有name属性

<div>元素节点的内容</div> innerhtml
对于文本节点，其文本内容的获取是使用nodeValue

字体阴影：text-shadow: 4px 3px 5px #333;

/*background-color: rgba(0,0,0, .7);*/
/**filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#BF000000,endcolorstr=#BF000000);*/