• css


    1.css引入

    直接在块里定义style,如<div style="color:red;"></div>;仅影响这一个块儿。
    
    在head里面引入,会影响整个html,如: 
    <style>
       div {
           color:red;
    }
    </style>
    
    在head里引入外部css文件,只要引入了就作用于html,
    <link rel="stylesheet" href="css1.css" />
    css1.css里的内容:
       div {
           color:red;
    }

    管的范围越小优先级越高。

    2.css选择器

    2.1 标签选择器

    在head里定义一个
    
    <style>
       div {
           color:red;
    }
    </style>
    ,这个是把当前html的所有div标签都使用该样式。

    2.2 id选择器

    <style>
       #i1 {
           color:red;
    }
    </style>
    将id="i1"的标签使用该样式

    2.3 类选择器

    <style>
       .c1 {
           color:red;
    }
    </style>
    
    将class="c1"的标签使用该样式

    2.4 层级选择器

    <style>
       .c2 div p .c1 {
           color:red;
    }
    </style>
    
    将class="c2"的标签下面的div标签下面的p标签下面的class="c1"的标签使用该样式

    2.5 多类选择器

    <style>
       .c3 .c4 .c5 {
           color:red;
    }
    </style>
    
    将class="c3、c4、c5"的标签应用该样式

    2.6 属性选择器

    <head>
        <style>
            .c1[xing="zhang"]{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="c1" xing="zhang">1</div>
            <div class="c1">1</div>
            <div class="c1" xing="li">1</div>
            <div class="c1" xing="zhang">1</div>
        </div>
    </body>

    3.css基本样式

    <head>
        <title>test2</title>
        <!--link rel="stylesheet" href="css1.css" /-->
        <style>
            .c1{
                # 颜色可以用编码或者数字或者字母形式。
                background-color:red;
                color:#FFB6C1;
                #background-color:rgb(25,180,10);
                font-size:55px;
                # 高度只能指定像素;宽度可以指定像素或者百分比。
                height:100px
                100px;
                # 必须有宽度和高度,才能显示图片内容;默认会用图片将指定区域填满,使用了no-repeat参数后,就只显示一张图片。
                background-image:url('image/1.gif');
                background-repeat:no-repeat;
            }
            .img{
                height:100px;
                100px;
                background-image:url('image/1.gif');
                #background-position的作用就是抠图,把一个大图扣的只显示一小块儿图。
                background-position:50px -58px;
                
            }
        </style>
    </head>
    
    
    <body>
        <div class="c1">张</div>
        # 百分比是受限于父模块的总宽度的,比如父模块总宽度是500px那子1的宽度是100px,子2的宽度是400px。float的作用是让子1和子2拼接成一行,不然子1和子2会显示为两行,试试效果。
        <div style="500px">
            <div style="20%;background-color:green;float:left">子1</div>
            <div style="80%;background-color:yellow;float:left">子2</div>
        </div>
        <div class="img">
            
        </div>
        
        # 只写一个border就是四周都有框;solid是实心的,dashed是虚线的;必须得有高度,不然就是一条线;
        # border-top就是只有上面有框;border-left就是只有左边有框。
        <div style="border:1px solid red; height:10px"></div>
        <div style="border:1px dashed red; height:10px"></div>
        <div style="border-top:5px dashed red;"></div>
        
        #display:none ,将标签内容和标签占用的位置都隐藏了
        <div style="display:none;background-color:red;">content</div>
        
        # 将块级标签转化为内联标签
        <div style="display:inline;background-color:red;">content</div>
        
        # 将内联标签变成块级标签
        <span style="display:clock;background-color:red;">content</span>
        
        #将标签的内容隐藏,位置还在页面显示,空白。 
        <div style="visibility:hidden;background-color:red;">content</div>
        
        <br/>
        # 内联标签是无法用height和width改变高度和宽度的
        <span style="background-color:red;height:500px;200px;">span-test</span>
        <br/>
        # display:inline-block,使其既具有内联标签的属性(自己的字符占多少位置,样式就占多少位置),又具有块级标签的属性(可以定义高度、宽度等。)
        <span style="display:inline-block;background-color:red;height:500px;200px;">span-test</span>
    </body>

    cursor:设置鼠标样式,鼠标放到超链接上变成小手,放到文本上变成竖杠等。

     4.边距

    默认的话,组件与组件之间是没有距离的,一直堆叠和拼接,需要用边距来调整。

    画红线的这些就是用边距实现的,不然会紧贴着。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
    </head>
    
    <body>
        <div style="height:70px;border:1px solid red;">
                    # 内边距,调整自己标签的位置
            <div style="padding:30px;height:35px;background-color:green;">
                
            </div>
        </div>
        
        <div style="height:100px;background-color:green;border:1px solid red;">
                    # 外边距,调整自己与父标签的相对位置
            <div style="margin-top:30px;">
                
                <input />
                <input />
                <input />
            </div>
        </div>
    </body>
    </html>

     5. 漂浮

    # 20%和30%会分为两行显示
    <div style="500px;background-color:red;">
            <div style="20%;background-color:green">fdsf</div>
            <div style="30%;background-color:blue">dfdf</div>
        </div>
        
        <br/>
        <br/>
        <br/>
    # 因为使用了float,所以20%和30%会拼接到一行上,而且父标签的样式会消失。
        <div style="500px;background-color:red;">
            <div style="20%;background-color:green;float:left;">fdsf</div>
            <div style="30%;background-color:blue;float:left;">dfdf</div>
        </div>
        
        
        <br/>
        <br/>
        <br/>
    # 使用了clear:both,20%和30%不仅会显示到一行上,而且父标签的样式还在。clear:both要加在所有漂浮标签的后面,这是一种low的方法,但是可以解决问题。
        <div style="500px;background-color:red;">
            <div style="20%;background-color:green;float:left;">fdsf</div>
            <div style="30%;background-color:blue;float:left;">dfdf</div>
            <div style="clear:both;"></div>
        </div>

     6. 位置

    <body>
        <div style="height:5000px;background-color:green"></div>
        
        # position:fixed,固定标签在屏幕的固定位置,top、bottom、left、right,用像素来指定位置,如果是负值就会出区域;指定该标签显示在屏幕的固定位置,屏幕滚动,标签也跟着滚动。
        <a href="https://www.baidu.com" style="position:fixed;right:100px;bottom:100px;">返回顶部</a>
        
        # 将标签固定到一个位置,如果滚动屏幕,标签不跟着屏幕走。
        <a href="https://www.baidu.com" style="position:absolute;right:100px;bottom:100px;">绝对返回顶部</a>
        
        #这样做不能把gogogo放到边框的右下角,而是放到了屏幕的右下角;
        <div style="height:300px;300px;border:1px solid red;">
            <div style="position:absolute;right:0;bottom:0;">gogogo</div>
        </div>
        
        # 因为第一个div里有position:relative,所以gogogo会放在边框里的右下角;如果在第二个div里也加上position:relative,那gogogo就会放到第二个div的右下角。
        <div style="height:300px;300px;border:1px solid red;position:relative">
            <div style="height:100px;100px;background-color:black;">
                <div style="position:absolute;right:0;bottom:0;color:red">gogogo</div>
            </div>        
        </div>
    </body>

     7. 将对话框放到屏幕中间、背景透明度、组件优先级

    <head>
        <title>fazhan</title>
        
        # 目的:让屏幕中间显示一个可以输入的文本框。
        # top:50%;left:50%;使该标签的左上角位于屏幕的正中间位置。
        # margin-left:-150px;margin-top:-200px; 如果想让标签框位于屏幕的正中间,需要先让标签的左上角位于屏幕正中间,然后向左移动一半宽的距离,向上移动一半高的距离。
        # opacity设置透明度,1是不透明;
        # z-index,设置组件优先级,优先级高的会覆盖优先级低的组件。
        <style>
            .model{
                height:400px;
                300px;
                background-color:green;
                position:fixed;
                top:50%;
                left:50%;
                margin-left:-150px;
                margin-top:-200px;
                z-index:10;
            }
            
            .shadow1{
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                background-color:black;
                opacity:0.4;
                z-index:9;
            }
        </style>
    </head>
        
    <body>
        <input type="botton" value="按钮" />
        
        <div class="shadow1"></div>
        <div class="model">
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </div>
    </body>

     8. 网站头设计

    8.1 

     篮框与浏览器上左右没有间距,标题一、二、三在稍微居中的位置展示。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <!-- body ,margin:0表示body里的所有组件的边距是0,不然组件的上下左右默认是有一个边距的。-->
        <style>
        
            body{
                margin:0;
            }
            .pg-header{
                    height: 44px;
                    background-color: #2459a2;
            }
            .w{
                980px;
                margin:0 auto;    
            }
        </style>
    </head>
    
    <body>
        <div class="pg-header">
            <div class="w">
            <!-- 标题一到三默认是在屏幕的最左端显示,如果想让他们居中显示,可以先建立一个980像素宽的div,然后把
             标题一到三加到这个980像素宽的div上,然后让这个980像素宽的div居中,使用margin:0 auto就可以让div居中-->
                <a>标题一</a>
                <a>标题二</a>
                <a>标题三</a>
            </div>
            
        </div>
        <div class="pg-body"></div>
        <div class="pg-footer"></div>
    </body>
    </html>

     8.2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <style>
        <!-- line-height: 44px,将文字置于44px高的居中位置;list-style-type:none,取消列表前面的小黑点;padding:0 10px 0 10px,将本组件移动,位置分别为上、右、下、左;cursor:pointer,使鼠标变成小手;
        ul li:hover,鼠标移动上去后,显示代码里的效果。
        -->
            body{
                margin:0;
            }
            .pg-header{
                    height: 44px;
                    background-color: #2459a2;
                    line-height: 44px;
            }
            .w{
                980px;
                margin:0 auto;    
            }
            ul{
                margin:0;
                list-style-type:none;
            }
            ul li{
                float:left;
                padding:0 10px 0 10px;
                color: white;
                cursor:pointer;
            }
            ul li:hover{
                background-color:green;
            }
        </style>
    </head>
    
    <body>
        <div class="pg-header">
            <div class="w">
                <ul>
                    <li>菜单一</li>
                    <li>菜单二</li>
                    <li>菜单三</li>
                </ul>
            </div>
            
        </div>
        <div class="pg-body"></div>
            <img src="2.jpg" style="height:500px;100px;">
        <div class="pg-footer"></div>
        
    </body>
    </html>

     9. 写出加减商品的框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- 使框里的文本左右方向居中,高低居中需要用line-height:npx; -->
        <!-- 内联标签不能设置宽高,为了高度居中,需要设置高度,所以将内联标签改为块级标签-->
        <!-- margin:0、padding:0使组件的内外边框都为0,适合组件堆叠-->
        <!-- 使用了display:inline-block的组件,默认会增加3px的宽度,所以如果想让组件与组件之间无缝结合的话,需要去掉3px,float:left。-->
        <!-- img标签默认是有边框的,只不过默认不显示;当把img放到a标签内,chrome和firefox依然会自动将边框去掉了,如果用IE打开,可能就会出现边框,所以为了保险起见,对所有的a标签都要使用style{ border:0;}-->
        <!-- a标签内的文字默认是蓝色的,点击后变成蓝色的。-->
        <title>fazhan</title>
        <style>
            .inp{
                border:0;
                border-left:1px solid #dddddd;
                border-right:1px solid #dddddd;
                height:25px;
                20px;
                margin:0;
                padding:0;
                float:left;
            }
            .sp{
                
                display:inline-block;
                text-align:center;
                margin-left:-3px;
                float:left;
                height:25px;
                25px;
                line-height:25px;
            }
        </style>
    </head>
    
    <body>
        <div style="border:1px solid #dddddd;display:inline-block;">
            <span class="sp">-</span>
            <input class="inp" type="text" />
            <span class="sp">+</span>
        </div>
    </body>
    </html>

     10.网页标题一直置顶

    <!DOCTYPE html>
    <html lang="en">
        <head>
            .pg-header{
                48px;
                position:fixed;
                top:0;
                left:0;
                right:0;
                background-color:red;
            }
            
            .pg-body{
                height:2000px;
    #margin-top,为了防止body的内容被header挡住。 margin
    -top:48px; } </head> <body> <div class="pg-header">fdsafdsf</div> <div class="pg-body">fdafsdfd</div> </body> </html>

     11.文本框的特效

    左边有个小头像和小锁子

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                .icon-name{
                    background-image:url('jdxiaotu.png');
                    background-position:590px 339px;
                    height:16px;
                    16px;
                    display:inline-block;
                }
            </style>
            
            
        </head>
        <body>
            <div style="200px;position:relative;">
                            # padding的部分不能输入了
                <input style="180px;padding-right:20px;" />
                <span class="icon-name" style="position:absolute;top:2px;right:0;"></span>
            </div>
        </body>
    </html>

     12. font awesome

    <!DOCTYPE html>
    <html lang="en">
        <head>
            # 下载了font awesome,解压到一个目录,然后在html的head里引用css样式。
            # font-awesome.css与font-awesome-min.css它俩的内容一样,只不过前者将代码分行了,更清晰,后者把代码写成了一行,
            # 占用字节小。所以开发时选择前者,方便查看,上线时用后者,更轻便。
            <link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css">
        </head>
        <body>
            # 到http://fontawesome.io/icon找到需要的图标,然后直接将代码添加到html里就行了,如果想改变颜色,可以加
            # style="color:red"等。
            <i class="fa fa-address-book" aria-hidden="true"></i>
        </body>
    </html>

     13. 关于伪类的补充

    13.1 .c1:hover

    13.2 .c2:before

    # 在块儿的内容前加上666
    .c2:before{
                content:'666';
            }

    13.3 .c2:after

    # 在块儿的内容后加上777
    .c2:after{
                content:'777';
            }

    13.4 伪类after的主要应用

    前面讲到过,如果div使用了float:left使组件漂浮了,则父div的样式都会消失,除非新加一个<div style="clear:both;"></div>。
    页面的元素很多,如果每个float:left都对应着一个clear:both的div,那就太费劲了,所以需要定义一个样式类,这个样式类就用到了after,等于是在每个div后面加上一个“clear:both”。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <style>
            .left{
                float:left;
            }        
            .clearfix:after{
                content:'.';
                visibility:hidden;
            }
        </style>
    </head>
        
    <body>
        <div class="clearfix" style="background-color:red;">
            <div class="left">1</div>
            <div class="left">2</div>
            <!--div style="clear:both"></div-->
        </div>
    </body>
    </html>

    上面的代码实现了既让父div拥有样式,又实现了让子div漂浮,但是如果子div设置了高度,父div不会跟着增高,试试下面代码的效果,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <style>
            .left{
                float:left;
            }        
            .clearfix:after{
                content:'.';
                visibility:hidden;
            }
        </style>
    </head>
        
    <body>
        <div class="clearfix" style="background-color:red;">
            <div class="left" style="height:100px;background-color:green;">1</div>
            <div class="left">2</div>
            <!--div style="clear:both"></div-->
        </div>
    </body>
    </html>

    页面效果:

    ,子div的绿色背景凸出来了,父div的高度没有跟着变化。所以需要继续调整代码,往下看,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <style>
            .left{
                float:left;
            }        
            .clearfix:after{
                content:'.';
                clear:both;
                visibility:hidden;
                display:block;
                height:0;
            }
        </style>
    </head>
        
    <body>
        <div class="clearfix" style="background-color:red;">
            <div class="left" style="height:100px;background-color:green;">1</div>
            <div class="left">2</div>
            <!--div style="clear:both"></div-->
        </div>
    </body>
    </html>

    页面效果:

    ,如此就达到目的了,这个效果可以作为网站页面的背景,给网站的主页面加一个背景色,然后只要添加组件就撑大背景。注:一般都习惯把这个伪类起名为“clear:fix”。

     14. css总结

    CSS
        存在形式:
            直接放到标签里;优先级最高;只作用于此标签。
            在head的style里定义;优先级居中;作用于整个html。
            css文件导入;优先级最低;作用于所有导入了的html。
            同样优先级的样式,后面的样式会覆盖前面的样式;用chrome调试模式查看时,有些样式代码中间划着一个横线,这就是被覆盖了。
            最牛的,color:red !important;任谁也覆盖不了的样式,一般用在display:none这类的样式上,需要隐藏的时候,无论如何都能做到隐藏。
            
        选择器:
            标签选择器
            class选择器
            ID选择器
            层级选择器
            组合选择器
            属性选择器
        
        样式:
            color,width,height
            需要注意一点,如果要用width的百分比,一定要在它的上层加一个div,并且给上层div指定一个宽度(居中的话就是margin:0 auto;)
            如果不这样做,当浏览器缩小的比内容页还小时,不会出现滚动条,而是把多余的东西显示到屏幕外面去了。正确使用如下例:
            <div class="main" style="980px;margin:0 auto;">
                <div style="20%;float:left;backgroud-color:red;">fdfsdfdfdfdfdasfdsfdsfdasf</divd>
                <div style="80%;float:left;backgroud-color:green;">fdfsdfdfadsfasfdasf</divd>
            </div>
            
            cursor
            
            backgroud-color
            
            opacity,透明度,值为1是不透明
            
            position:
                fixed
                absolute
                relative && absolute
            
            z-index
            
            padding补充:
                input标签padding出去的部分是不可写的。
                
            伪类:
                hover
                before
                after

     15. 使用css的border做出小三角

    <html lang="en">
    <head>
        <title>fazhan</title>
        <style>
        
            .clearfix{
                display:inline-block;
                border-top:15px solid red;
                            # transparent是透明色。
                border-right:15px solid transparent;
                border-bottom:15px solid transparent;
                border-left:15px solid transparent;
            }
        </style>
    </head>
        
    <body>
        <div class="clearfix">
            
        </div>
    </body>
    </html>

     16. 做出阴影效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <meta charset="UTF-8" />
        <style>
            body{
                margin:0;
            }
            .clearfix{
                display:inline-block;
                border-top:8px solid gray;
                border-right:25px solid transparent;
                border-bottom:8px solid transparent;
                border-left:25px solid transparent;
                position:absolute;
                top:170px;
                margin-left:-25px;
                
            }
            .main{
                background-color:gray;
                height:2000px;
                1200px;
                margin:0 auto;
    
                
            }
            .tiaoxing{
                background-color:black;
                height:50px;
                1200px;
                margin-left:-25px;
                position:absolute;
                top:120px;
    
            }
        </style>
    </head>
        
    <body>
        <div class="main">
            <div class="tiaoxing">
                <span style="color:red;position:absolute;top:20%;left:10%">我的指甲</span>
            </div>
            <div class="clearfix">
            
            </div>
        </div>
        
    </body>
    </html>

     17.后台管理布局

    不同于网站前端主页面(中间是内容,两边是空白),后台管理界面一般是这种上面一个菜单、左边一个菜单、右边是内容的布局。

    后台布局的主要展示如上图,有两种不同的左侧菜单显示,一种是滑动滚轮时上面和左侧菜单跟着移动,一种是滑动滚轮时上面和左侧菜单固定不动。

    17.1 滚轮滚动时,上面和左侧的菜单栏也跟着移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <meta charset="UTF-8" />
        <style>
            body{
                margin:0;
            }
            .pg-header{
                height:48px;
                background-color:yellow;
            }
            .pg-body .pg-main-menu{
                200px;
                position:absolute;
                top:48px;
                bottom:0;
                background-color:red;
            }
            .pg-body .pg-main-content{
                position:absolute;
                top:48px;
                left:210px;
                right: 0;
    #没有指定bottom:0,则页面内容占多少,就显示多少,页面没有内容,则显示空白(也没有背景色:绿。)
                background-color:green;
            }
        </style>
    </head>
        
    <body>
        <div class="pg-header">
            
        </div>
        <div class="pg-body">
            <div class="pg-main-menu">
        
            </div>
        
            <div class="pg-main-content">
    
    #页面内容很多,超过了单页高度,所以会自动出现滚动条,滑动滚轮的时候,左侧的菜单也跟着移动,随着滚轮往下走,左侧菜单会消失。            fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
            </div>
        </div>
        
        
    </body>
    </html>

    17.2 滚轮滚动时,上面和左侧的菜单栏固定不动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>fazhan</title>
        <meta charset="UTF-8" />
        <style>
            body{
                margin:0;
            }
            .pg-header{
                height:48px;
                background-color:yellow;
            }
            .pg-body .pg-main-menu{
                200px;
                position:absolute;
                top:48px;
                bottom:0;
                background-color:red;
            }
            .pg-body .pg-main-content{
                position:absolute;
                top:48px;
                left:210px;
                right: 0;
    # 对比上面的代码,加了bottom和overflow;
    # overflow:auto,当页面内容超过单屏时,在右侧出现滚轮,滑动滚轮只会影响当前div,所以上面和左侧的菜单是固定的。
                bottom:0;
                overflow:auto;
                background-color:green;
            }
        </style>
    </head>
        
    <body>
        <div class="pg-header">
            
        </div>
        <div class="pg-body">
            <div class="pg-main-menu">
        
            </div>
        
            <div class="pg-main-content">
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
                fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>fdsafdfdasfdasfdasfdasfds<br>
            </div>
        </div>
        
        
    </body>
    </html>
  • 相关阅读:
    判断DataSet为空
    msxml3.dll 错误 '800c0008'
    google Map api地理位置坐标转换
    C# .net中cookie值为中文时的乱码解决方法
    windows pear 安装
    smarty2 设置、变量、函数
    简单模板类
    mysql 1366 插入错误
    Oracle修改账户口令
    C# Winform验证码
  • 原文地址:https://www.cnblogs.com/fuckily/p/6085423.html
Copyright © 2020-2023  润新知