CSS 渐变色

2016-11-19, 星期六 |
秘诀前端样式

在 webkit 内核的浏览器中使用线性渐变色。

-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fd7139), color-stop(0.5, #f04603), color-stop(1, #fd7139) );

表示线性的,以坐标(0 0)为起点,坐标(0 100%)为终点,在0.5中间位置使用颜色#f04603,在0开始位置1末尾位置使用颜色#fd7139的渐变色。即从水平中间向上下渐变的渐变色。

用 CSS 渐变色做的动作按钮

.bonusAction{
    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fd7139), color-stop(0.5, #f04603), color-stop(1, #fd7139) );
    border: none;
    text-align: center;
    color: #fcc0a8;
    font-size: 1rem;
    display: inline-

关于移动端适配 iphone5 iphone6

2016-11-19, 星期六 |
秘诀前端样式

在 iphone6 中的文字能够刚好排满一行的话,到了 iphone5 可能会容易就变成了 两行。应使屏幕分辨率变小时,调小文字的字体。

// _auto_adjust.scss
@media screen and (min-width: 320px){
    html{
        font-size: 12px;
    }
}
@media screen and (min-width: 375px){
    html{
        font-size: 14px;
    }
}

然后在 css 中使用 rem 作为字体大小的单位。

让低版本浏览器兼容 HTML5 的方法

2016-11-15, 星期二 |
秘诀解决方案前端

引用Google的html5.js文件到head部分

<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

并在css里面加上这段

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

如果用到 jQuery ,可能高版本的 jQuery 不能支持低版本的 ie, 需要用到低版本的 jQuery1.9.1。

HTML 中 table 嵌套时边框出现分离

2016-11-11, 星期五 |
短说前端样式

table 嵌套使用时边框会出现分离,让他们重合的办法是

为 table 添加 CSS 样式

border-spacing: 0;

或者为 table 添加属性

cellspacing="0"

另外为 table添加属性

cellpadding="0"

会将td之间的间距设为0,适用于将table放在td中的情况。

一条 CSS class 命名的经验

2016-11-10, 星期四 |
秘诀前端样式

现在不少浏览器都装有去广告插件adblock,因此有时候将Class命名为ad-*,在网页上打开这个页面时,该部分就会被隐藏,有时候很难找到原因。

例如Class名advantage如果写作ad-1,很遗憾,这个部分很可能就会看不见了,因此还是不要触碰这条禁忌的为好。