python之CSS(二)

1.position:(层级属性,多层应用)
    ***fiexd:固定在页面的某个位置(有top,bottom,left,right属性)
            如:(悬浮在浏览器的标签)
            <div style="width:50px;height:50px;background-color:black;color:red;
            position:fixed;bottom:20px;right:20px">返回顶部</div>
            如:(悬浮在浏览器顶部)                
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                        .pg-header{
                            height: 48px;
                            background-color: black;
                            color: #dddddd;
                            position: fixed;
                            top:0;
                            right: 0;
                            left: 0;
                        }
                        .pg-body{
                            background-color: #dddddd;
                            height: 5000px;
                            margin-top: 50px;
                        }
                    </style>
                </head>
                <body>
                    <div class="pg-header">头部</div>
                    <div class="pg-body">内容</div>
                </body>
                </html>
    
    margin:0  #自动取消页边距,必须放在body才有效果
    ***relative+absolute:
        <div style="position:relative;">
            <div style="position:absolute;top:0;left:0;"></div>
        </div>
        如:(父级与子级标签的位置关系)
            <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
            </div>
            <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
            </div>
            <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
            </div>
            
            
    ***多层标签
            (z-index属性决定div层级关系,值越大,层级数越高,即越位于最顶层)
            (opacity属性的值范围是0-1,越接近0透明度越高)
        示例:(下面例子的场景可以应用于弹出类似于登录窗口等的情景)    
              (display:none 属性意味默认是不展示,等应用到按钮使其修改不为none时这两个标签会展示出来)
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
                <div style="display:none;z-index:10; position: fixed;top: 50%;left:50%;
                margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">        <!--margin属性使其整体的div根据位置变换-->

                    <input type="text" />
                    <input type="text" />
                    <input type="text" />

                </div>

                <div style="display:none;z-index:9; position: fixed;background-color: black;
                top:0;
                bottom: 0;
                right: 0;
                left: 0;
                opacity: 0.5;
                "></div>

                <div style="height: 5000px;background-color: green;">
                    asdfasdf
                </div>
            </body>
            </html>

2.overflow:(假设标签中的图片大小大于标签原本的宽高,那莪可以增加这个属性使其图片大小不超过标签范围)
        hidden值:如果超过了,就隐藏超过的部分
        auto值:如果超过了,隐藏超过的部分,但带有滚动条可以查看隐藏的部分
        示例:(下面例子的场景可以应用于弹出类似于登录窗口等的情景)
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
                <div style="height: 200px;width: 300px;overflow: auto">
                    <img src="1.jpg">
                </div>

                <div style="height: 200px;width: 300px;overflow: hidden">
                    <img src="1.jpg">
                </div>
            </body>
            </html>
            
3.hover:(当鼠标移动到某位置时,其标签的样式会修改成hover定义中的样式)
        示例:
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
                <style>
                        .pg-header{
                            background-color:blue;
                            height:48px;
                            line-height: 48px;
                            position: fixed;                               /*窗口悬停*/
                            top:0;                                         /*取消页边距*/
                            right:0;
                            left:0;
                        }
                        .pg-body{
                            margin-top: 50px;                              /*pg-header标签的height是48px,下个标签起始内容如果不希望被覆盖到,其top值需要设置比它大*/
                            height:980px
                        }
                        .w{
                            width: 980px;
                            margin: 0 auto;
                        }
                        .pg-header .menu{                                   /*此样式使得每个a标签之间有距离,但是和父级之间的上下不存在距离,f12查看*/
                            display: inline-block;
                            padding: 0 10px 0 10px;                         /*分别是top,left,bottom,right*/
                            color: red;
                        }
                            /*当鼠标移动到当前标签上时,以下css属性才生效*/
                        .pg-header .menu:hover{                             /*hover:使得鼠标移动到相应的位置时,显示该样式*/
                        background-color: white;
                        }
                        /*假设menu下面有多个div*/    
                        .pg-header .menu:hover .b{
                        background-color:red;                                /*即当鼠标放到该menu标签时,整个是白色的,但是menu下class为b的标签背景为红色*/
                        }
                </style>
            </head>
            <body>
                <div class="pg-header">
                    <div class="w">
                        <a>LOGO</a>
                        <a class="menu">登录</a>
                        <a class="menu">查找</a>
                        <a class="menu">日志</a>
                    </div>
                </div>
                <div class="pg-body">
                    <div>这是下一个标签</div>
                </div>
            </body>
            </html>


4.background-image:(背景图)
    background-image:url('image/4.gif');    /*如果div大于图片,则图片会自动重复堆叠*/
    background-repeat:repeat-y;                /*只堆叠Y轴方向*/
    background-position-x:10px;                /*position属性可以选中图片中的某个部分,比如说一张图片里有很多小图标,可以根据像素大小单独选中,即所谓的抠图*/
    background-position-y:10px;
    background-position:10px 10px;
    
    
5.小图标的引入:
    下载font awesome后将整个文件夹放到相应的路径并在需要的网页制作中:
    1.引入:<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
---实例(输入框中添加小图标)(分层)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="height: 35px;width: 400px;position: relative;">                        <!--position是为了能够分层-->
        <input type="text" style="height: 35px;width: 400px;" />
        <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span>            <!--inline-block是为了让行内标签转为块级标签,否则宽高无法应用!-->
    </div>
</body>
</html>

 

posted @ 2019-09-22 23:11  LBC不认输  阅读(213)  评论(0编辑  收藏  举报