zoukankan      html  css  js  c++  java
  • 前端css自定义滚动条样式

    前端css自定义滚动条样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: mediumpurple;
                 800px;
                height: 400px;
                border: 2px solid whitesmoke;
                overflow-x: scroll;
                overflow-y: scroll;
            }
    
            /* 设置滚动条的整体样式 */
            ::-webkit-scrollbar {
                 7px; /*高宽分别对应横竖滚动条的尺寸 */
                height: 7px;
                background-color: grey;
            }
    
            /* 滚动槽的轨道 */
            ::-webkit-scrollbar-track {
                border-radius: 30px;
            }
    
            /* 滚动条的小滑块 */
            ::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: lightskyblue;
            }
    
        </style>
    </head>
    <body>
    
    <div id="div1">
        布兰登 • 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。
    
        一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
    
        同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript
    
        2003年之前,JavaScript被认为“牛皮鲜”,用来制作页面上的广告,弹窗、漂浮的广告。什么东西让人烦,什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
    
        2004年,JavaScript命运开始改变,那一年,谷歌公司开始带头使用Ajax技术,Ajax技术就是JavaScript的一个应用。并且,那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如,当我们在百度搜索框搜文字时,输入框下方的智能提示,可以通过Ajax实现。比如,当我们注册网易邮箱时,能够及时发现用户名是否被占用,而不用调到另外一个页面。
    
        2007年乔布斯发布了第一款iPhone,这一年开始,用户就多了上网的途径,就是用移动设备上网。
        JavaScript在移动页面中,也是不可或缺的。并且这一年,互联网开始标准化,按照W3C规则三层分离,JavaScript越来越被重视。
    
        2010年,人们更加了解HTML5技术,HTML5推出了一个东西叫做Canvas(画布),工程师可以在Canvas上进行游戏制作,利用的就是JavaScript。
    
        2011年,Node.js诞生,使JavaScript能够开发服务器程序了。
    
        如今,WebApp已经非常流行,就是用网页技术开发手机应用。手机系统有iOS、安卓。比如公司要开发一个“携程网”App,就需要招聘三队人马,比如iOS工程师10人,安卓工程师10人,前端工程师10人。共30人,开发成本大;而且如果要改版,要改3个版本。现在,假设公司都用web技术,用html+css+javascript技术就可以开发App。也易于迭代(网页一改变,所有的终端都变了)。
    
        虽然目前WebApp在功能和性能上的体验远不如Native App,但是“WebApp慢慢取代Native App”很有可能是未来的趋势。
    
        Web前端有三层:
    
            HTML:从语义的角度,描述页面结构
    
            CSS:从审美的角度,描述样式(美化页面)
    
            JavaScript:从交互的角度,描述行为(提升用户体验)
    
            其中JavaScript基础又分为三个部分:
    
            ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
    
            DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
    
            BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。
    </div>
    
    </body>
    </html>
    

    效果如下:

  • 相关阅读:
    2020.10.23 19级training 补题报告
    2020.10.17 天梯赛练习 补题报告
    2020.10.16 19级training 补题报告
    2020.10.9 19级training 补题报告
    2020.10.10 天梯赛练习 补题报告
    2020.10.3 天梯赛练习 补题报告
    2020.10.2 19级training 补题报告
    第十届山东省ACM省赛复现补题报告
    VVDI Key Tool Plus Adds VW Passat 2015 Key via OBD
    Xhorse VVDI Prog Software V5.0.3 Adds Many MCUs
  • 原文地址:https://www.cnblogs.com/maqian/p/13391865.html
Copyright © 2011-2022 走看看