首页 > 代码库 > 经验集锦(不定时更新)
经验集锦(不定时更新)
一般页面头部的导航用<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="http://www.mamicode.com/01">小学</option>
<option value="http://www.mamicode.com/02">初中</option>
<option value="http://www.mamicode.com/03">高中</option>
<option value="http://www.mamicode.com/04">大学</option>
<option value="http://www.mamicode.com/05">硕士</option>
<option value="http://www.mamicode.com/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);*/
经验集锦(不定时更新)