码迷,mamicode.com
首页 > 其他好文 > 详细

经验集锦(不定时更新)

时间:2016-09-14 16:32:39      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

一般页面头部的导航用<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);*/

经验集锦(不定时更新)

标签:

原文地址:http://www.cnblogs.com/junsoo-jun/p/5872475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!