【总结整理】前端学习-近期收获
1.input 的 text 输入框中灰色的提示输入内容,输入正式内容就会自己消失(是一个属性placeholder)
样例效果图片:
样例效果代码:
<input id="txtSubmit" type="text" placeholder="输入内容可以提交">
2.按钮可以用div来写,圆角设置,并使鼠标覆盖上去时显示为手
样例效果图片:
样例效果代码:
border-radius: 10px;
cursor: pointer; <div class="button1"> 搜索 </div>
3.首行缩进效果
样例效果代码:
text-indent: 4px;
4.新闻列表显示不完全,控制其显示的统一长度,以及不显示的样式
样例效果图片:
样例效果代码:
ul li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 250px; /*white-space: nowrap;text-overflow: ellipsis;text-decoration: none;*/ /*这三句话必须连着使用, * clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。 * ellipsis: 当对象内文本溢出时显示省略标记(...)。*/ color: #666; }
5.行竖直居中,加入div盒子高度为60px,就把要显示的行设置行高line-height: 60px;
样例效果代码:
ul li { height: 60px; line-height: 60px; padding-left: 20px; }