从零开始学_JavaScript_系列(23)——css<5>滚动条,Tab,spellcheck,img放置

  1. 云栖社区>
  2. 博客>
  3. 正文

从零开始学_JavaScript_系列(23)——css<5>滚动条,Tab,spellcheck,img放置

零零水 2016-06-03 15:11:00 浏览1106

(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>