网站地图    收藏   

主页 > 前端 > css教程 >

chrome滚动条 - html/css语言栏目:html.css - 自学php

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。 在Chrome中,应该是这样,在style中加入一些代码即可,你也可以修改Chrome的custom.css文件,从而使所有页面的滚动条都有...

 有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。
  在Chrome中,应该是这样,在style中加入一些代码即可,你也可以修改Chrome的custom.css文件,从而使所有页面的滚动条都有修改。
Html代码 
<html
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Chrome scroll</title> 
     <style type="text/css" media="screen"> 
        ::-webkit-scrollbar-track-piece{ 
            background-color:#fff; 
            -webkit-border-radius:3; 
        } 
        ::-webkit-scrollbar{ 
            width:15px; 
            height:8px; 
        } 
        ::-webkit-scrollbar-thumb{ 
            height:30px; 
            background-color:#999; 
            -webkit-border-radius:7px; 
            outline:2px solid #fff; 
            outline-offset:-2px; 
            border: 2px solid #fff; 
        } 
        ::-webkit-scrollbar-thumb:hover{ 
            height:30px; 
            background-color:#9f9f9f; 
            -webkit-border-radius:8px; 
        } 
        ul {margin:0px; padding:0px; width:100px; height:200px; overflow-x:hidden; overflow-y:auto;} 
     </style> 
</head> 
<body> 
    <ul> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
        <li>ffffffffffffff</li> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>aaaaaaaaaaaaaa</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
        <li>bbbbbbbbbbbbbb</li> 
        <li>cccccccccccccc</li> 
        <li>dddddddddddddd</li> 
        <li>eeeeeeeeeeeeee</li> 
</body> 
</html> 

作者“python”

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论