从零开始学_JavaScript_系列（23）——css<5>滚动条，Tab，spellcheck，img放置

（21）滚动条的美化

for chrome内核：

/* 有这行才有效，滚动条的宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 滚动条的背景 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 06px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 06px rgba(0,0,0,0.5);
}
/*貌似是切换窗口时显示的颜色*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}

更详细的说明：

http://blog.csdn.net/sweetsuzyhyf/article/details/8089158

 

for IE：

html {
       overflow: auto;
       SCROLLBAR-FACE-COLOR:#BED8EB;
       SCROLLBAR-SHADOW-COLOR:#DDF8FF;
       SCROLLBAR-HIGHLIGHT-COLOR:#92C0D1;
       SCROLLBAR-3DLIGHT-COLOR:#DDF8FF;
       SCROLLBAR-DARKSHADOW-COLOR:#92C0D1;
       SCROLLBAR-TRACK-COLOR:#BED8EB;
       SCROLLBAR-ARROW-COLOR:#92C0D1
}

 

for firefox：

firefox的需要使用插件。

这里放一个我copy到的内容，需要的时候找吧

<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js">
</script>
<script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js">
</script>
<script>
    if (!$.browser.webkit) {
        $.mCustomScrollbar.defaults.scrollButtons.enable = true; //enable scrolling buttons by default
        $.mCustomScrollbar.defaults.axis = "yx"; //enable 2 axis scrollbars by default
        $(".container").mCustomScrollbar({theme: "dark"});
    }

 

 

 

 

（22）Tab标签的内容区，高度自适应父容器

假设：父div高度大小不确定，子div分为多层，一层需要自适应，其他固定高度

类似：

<div class="parent">
    <div class="child">
        <div class="tab">

        </div>
        <div class="content">
            
        </div>
    </div>
</div>

父容器的高度不确定，并且是可变的；

我们需要child能填满父容器，并且tab的高度定高，content的高度不定高，content里面的内容可能较多，需要滚动条。

那么这么设置：

<style>
    .child{
        height:100%;
        width:100%;
        padding-top:20px;
    }
    .tab{
        margin-top:-20px;
        height:20px;
        width:100%;
    }
    .content{
        height:100%;
        width:100%;
    }
</style>

是可以达到我们的要求的。

 

另外，只要child里还可以添加更多的定高标签，只要只有一个要求自适应即可，方法依然是调整父容器的padding属性，和其他定高/定宽标签的margin属性

 

 

（23）textarea的拼写检查

默认是有的，对拼写不正确的单词下面添加红色波浪线；

属性设置方法：

<标签名 spellcheck=true|false>

如果值是true，则检查（有红色波浪线）；

如果是false，则不检查。

例子：

<textarea spellcheck=false></textarea>

 

 

（24）chrome开启账号密码自动填充后，背景色为黄色的问题

http://www.tuicool.com/articles/EZ777

 

 

（25）关于图片

有时候会遇见这样的事情：

我们需要一个图片，他平常假设是20px大小，当我们鼠标移动上去之后，他的大小变为30px，且是以图片中心放大的。

 

实现方法是这样：

.img {
    height: 20px;
    width: 20px;
    position: relative;
}
.img:hover {
    height: 30px;
    width: 30px;
    top: -5px;
    left: -5px;
}

 

其关键是让图片的position属性变为relative，于是，图片首先没有脱离文档流，不存在其他dom结点占用了文档流的位置，又或者是图片的变大，把其他图片遮挡住了；

然后设置其变大后的宽高，并且向左移动增加宽度的一半，向上移动增加高度的一半，以确保结果是以图片原中心为中心变化的；

而:hover表示只有鼠标移动上去之后才会这样，鼠标没有移动上去的时候是保持原样的。

 

 

另外一个问题是，我们如何让图片出现在我们指定的位置，并且大小为我们指定的大小。

解决办法是，设置一个div，用这个div的contentbox区域来确定图片所在的位置，然后该div内只设置这一个图片，以避免不同图片在同一个div容易导致的冲突（比如位置不好确定）。

然后让图片填充满contentbox的区域；

注意：这个div的主要目的是为了定位图片的位置，之所以是contentbox区域，是因为避免和相邻div，或者其他什么东西所导致的冲突，而这些冲突有时候在遇见之前有时候是无法预料到的（虽然我一时也想不起来有什么，但是以一个良好的习惯来避免麻烦的发生，是一种明智的抉择）；

html代码大概是这样：

<div class="parent">
    <div class="icon">
        <img class="img" src="1.png">
    </div>
    <div class="icon">
        <img class="img" src="2.png">
    </div>
    <div class="icon">
        <img class="img" src="3.png">
    </div>
</div>