|-摘 transition属性-CSS3知识整理
div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safar...
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
注意:该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。
鼠标移动到 div 元素上,查看过渡效果。
.live > li::before{ position: absolute; content: '\2022'; font-family: Arial; color: #eee; top: 0; left: 0; text-align: center; font-size: 2em; opacity: .8; line-height: 1em; -webkit-transition: .5s; transition: .5s; } .live > li:hover::before{ -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 1; text-shadow: 0 0 4px; -webkit-transition: .1s; transition: .1s; }
鼠标放上去变化遮罩程度和scale,演示效果 ...
|-摘 Bootstrap-排版
不知道这样用的好处到底有多少?待了解。20180205排版通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。 @font-fa...
不知道这样用的好处到底有多少?待了解。20180205
排版
通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
图标
以下两个变量用于设置图标文件的位置和文件名。 ...
|-摘 Bootstrap-响应式工具
响应式工具为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏...
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在不同设备上提供不同的展现形式。
可用的类
通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
---|---|---|---|---|
.visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
从 v3.2.0 版本起,形如 .visible-*-*
的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display
属性,列表如下:...
|-转 CSS3的rem详解及使用方法 - CSS3知识整理
好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法首先,先说一个常识,浏览器的默认字体高都是16px。步入正题-----〉兼容性:目前,IE9+,Firefox、Chr...
好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法
首先,先说一个常识,浏览器的默认字体高都是16px。步入正题-----〉
- 兼容性:
目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
- 使用%单位方便使用
- 使用方法
注意,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;
例子:
1 /*16px * 312.5% = 50px;*/ 2 html{font-size: 312.5%;}
1 /*50px * 0.5 = 25px;*/ 2 body{ 3 font-size: 0.5rem; 4 font-size\0:25px; 5 }
一般情况下,是这样子使用的...