python之CSS（二）

1.position:（层级属性，多层应用）
    ***fiexd:固定在页面的某个位置（有top,bottom,left,right属性）
            如：（悬浮在浏览器的标签）
            
"width:50px;height:50px;background-color:black;color:red;
            position:fixed;bottom:20px;right:20px">返回顶部
            如：（悬浮在浏览器顶部）                
                
                "en">
                
                    "UTF-8">
                    
                    
                
                
                    
class="pg-header">头部
                    
class="pg-body">内容
                
                
    
    margin:0  #自动取消页边距，必须放在body才有效果
    ***relative+absolute:
        
"position:relative;">
            
"position:absolute;top:0;left:0;">
        

        如：（父级与子级标签的位置关系）
            
"position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                
"position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;">
            
            
"position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                
"position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;">
            
            
"position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
                
"position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;">
            
            
            
    ***多层标签
            （z-index属性决定div层级关系，值越大，层级数越高，即越位于最顶层）
            （opacity属性的值范围是0-1，越接近0透明度越高）
        示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景）    
              （display:none 属性意味默认是不展示，等应用到按钮使其修改不为none时这两个标签会展示出来）
            
            "en">
            
                "UTF-8">
                
            
            
                
"display:none;z-index:10; position: fixed;top: 50%;left:50%;
                margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">        

                    "text" />
                    "text" />
                    "text" />

                

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

                
"height: 5000px;background-color: green;">
                    asdfasdf
                
            
            

2.overflow:（假设标签中的图片大小大于标签原本的宽高，那莪可以增加这个属性使其图片大小不超过标签范围）
        hidden值：如果超过了，就隐藏超过的部分
        auto值：如果超过了，隐藏超过的部分，但带有滚动条可以查看隐藏的部分
        示例：（下面例子的场景可以应用于弹出类似于登录窗口等的情景）
            
            "en">
            
                "UTF-8">
                
            
            
                
"height: 200px;width: 300px;overflow: auto">
                    "1.jpg">
                

                
"height: 200px;width: 300px;overflow: hidden">
                    "1.jpg">
                
            
            
            
3.hover：（当鼠标移动到某位置时，其标签的样式会修改成hover定义中的样式）
        示例：
            
            "en">
            
                "UTF-8">
                
                
            
            
                
class="pg-header">
                    
class="w">
                        LOGO
                        class="menu">登录
                        class="menu">查找
                        class="menu">日志
                    
                
                
class="pg-body">
                    
这是下一个标签
                
            
            


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.引入："stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
---实例（输入框中添加小图标）（分层）

"en">

    "UTF-8">
    



    
"height: 35px;width: 400px;position: relative;">                        
        "text" style="height: 35px;width: 400px;" />
        "position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;">            
    

 

转载于:https://www.cnblogs.com/god-for-speed/p/11569895.html