【总结整理】前端学习-近期收获

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;
}

 

转载于:https://www.cnblogs.com/lianghong/p/8295481.html