人生就像骑单车。想保持平衡就得往前走。 ——爱因斯坦
1.更改input的placeholder中文字的样式
input::-webkit-input-placeholder { /* WebKit browsers */
color: #A1A1A1;
}
input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #A1A1A1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #A1A1A1;
}
input::-ms-input-placeholder { /* Internet Explorer 10+ */
color: #A1A1A1;
}
实践过程中发现没效果，可能是我哪里写错了吧，后来把input换成".类名"就有效果了！
2. 强制文字不换行
white-space:nowrap;
3. : before 选择器在被选元素的内容前面插入内容，使用 content 属性来指定要插入的内容
<style>
p:before
{
content:"台词：";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
结果就是在每个 <p> 元素的内容之前插入新内容
4. 清除浮动：父容器使用 overflow:auto; 使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏
5. 图片底部加一点渐变色：
background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))