HTML & CSS – 言告言归

2017年08月12日2017年08月12日

通过CSS改变文本框placeholder占位符默认颜色

HTML代码：

<input placeholder="welcome dustit.me!">

1	<input placeholder="welcome dustit.me!">

CSS样式：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */

color: #909;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #909;

opacity: 1;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #909;

opacity: 1;

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */

color: #909;

}

::-ms-input-placeholder { /* Microsoft Edge */

color: #909;

}

将样式添加到你的代码刷新页面看看是不是文本框默认文本内容已经变了。

2017年08月11日2017年08月13日

Local Storage与Cookies对比

使用localStorage，Web应用程序可以在用户的浏览器中本地存储数据。

在HTML5之前，应用程序数据必须存储在Cookie中，包含在每个服务器请求中。

比起cookies来讲localStorage更安全，大量数据可以在本地存储，而不影响网站性能。虽然localStorage更现代化，但这两种技术都有一些利弊。继续阅读“Local Storage与Cookies对比”

2017年07月29日2017年07月30日

html5 localstorage能存多少数据

根据 WHATWG 规范描述如下：

A mostly arbitrary limit of five megabytes per origin is recommended. Implementation feedback is welcome and will be used to update this suggestion in the future.

规范建议的本地数据存储不超过5M,同时大多数浏览器默认的localstorage存储大小也是5M限制。

localstorage大小限制可以通过以下面的代码进行测试：继续阅读“html5 localstorage能存多少数据”

2017年07月1日2017年07月31日

Textarea 固定大小禁止拉伸

下面的CSS样式禁用对页面上所有的textarea元素进行拉伸调整大小：

textarea {
    resize: none;
}

textarea {

resize: none;

}

继续阅读“Textarea 固定大小禁止拉伸”

2017年06月20日2017年06月20日

2017年：最佳20款迷你CSS框架

无处不在的极简主义。如果你也喜欢极简风格，那么下面的这些CSS框架，可以帮助你节省大量时间，避免从头开始重建基本的网站。

Spectre

轻量级和响应式和现代CSS框架，用于更快和可扩展的开发。它为排版和元素，基于Flexbox的响应布局系统，CSS组件和实用程序提供基本样式，具有最佳编码风格和一致的设计语言。

继续阅读“2017年：最佳20款迷你CSS框架”

2017年04月21日2017年08月8日

XML中 CDATA 的含义和作用

术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据（Unparsed Character Data）。

在 XML 元素中，”<” 和 “&” 是非法的。

“<” 会产生错误，因为解析器会把该字符解释为新元素的开始。

“&” 也会产生错误，因为解析器会把该字符解释为字符实体的开始。

某些文本，比如 JavaScript 代码，包含大量 “<” 或 “&” 字符。为了避免错误，可以将脚本代码定义为 CDATA。继续阅读“XML中 CDATA 的含义和作用”

2016年06月29日2017年07月29日

CSS常用选择器-持续更新中

HTML代码

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

<p>First paragraph...</p>

<p>Lorem ipsum...</p>

<p>Dolor sit amet...</p>

<p>Consectetur adipisicing...</p>

</article>

CSS选择第一个子元素：

article > p:first-child {
  background:red;
}

article > p:first-child {

background:red;

}

CSS选择第二个子元素：

article > p:nth-child(2)
{
  background:red;
}

article > p:nth-child(2)

{

background:red;

}

CSS选择最后一个子元素：

article > p:last-child {
  background:red;
}

article > p:last-child {

background:red;

}

css选择器奇数偶数：

article > p:nth-child(odd)  #CSS选择奇数行
{
  background:red;
}
article > p:nth-child(even) #CSS选择偶数行
{
  background:green;
}

article > p:nth-child(odd) #CSS选择奇数行

{

background:red;

}

article > p:nth-child(even) #CSS选择偶数行

{

background:green;

}

注意：如需选择DIV中的元素将article更改为div 例：div > p:first-child同样适用于:first-child :last-child :nth-child，如需选择非段落P的元素更改为相应的元素标签即可。

2014年11月16日2017年08月17日

HTML 事件属性

全局事件属性

HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

如需学习更多有关事件编程的知识，请访问我们的 JavaScript 教程。

下面列出了添加到 HTML 元素以定义事件动作的全局事件属性。继续阅读“HTML 事件属性”