• web前端【补充】CSS补充


    css常用的一些属性:

    1.去掉下划线 :text-decoration:none ;
    2.加上下划线: text-decoration: underline;

    3.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px;

    没设置之前:

    设置之后:

    3.外边距:margin
    4.内边距:padding
    5.居中;margin 0 auto;(只是针对盒子居中)

    6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了display标签。。
      1.将内联标签转换成块级标签:display:block;
      2.将块级标签转换成内联标签:display:inline;
      3.块级内联标签:display;inline-block;
       块级内联标签可以像块级一样可设长宽,也可像内联一样在一行显示
    6.隐藏的两个方法:display:none; #隐藏了会顶上去
             visibility :hidden; #隐藏了不会顶上去
    7.隐藏溢出的两个方法:overflow :auto;
               overflow :scoll;  #带滚动条
    8.文本水平居中:text-align:center;
       文本垂直居中:line-height;
    9.伪类;
      1.没访问之前: a:link{color:red;} 
      2.鼠标悬浮时: a:hover{color:green;}
      3.访问过后: a:visited{color:yellow;}
      4.鼠标点击时 a:active{color:blue;}
      5.在p标签属性为c2的后面加上内容
      p.c2:after{
        content:'hello';
        color:red;
      }
    6.在p标签属性为c2的钱面加上内容
      p.c2:before{
        content:'啦啦啦';
        color:red;
      }
    10.position的四种属性
      1.static:默认位置
      2.fixed:完全脱离文档流,固定定位(以可视窗口为参照物)
      3.relative:相对定位(参照的是自己本身的位置),没有脱离文档流,没有顶上去,会保持自己的位置不动。可以使用top left进行定位
      4.absolute:绝对定位:脱离了文档流(参照的是按已定位的父级标签定位,如果找不到会按body的去找)
    注意!!:将定位标签设置为absolute,将他的父级标签设置为定位标签 (relative)

    11.float和position的区别
      float:半脱离文档流
      position:全脱离文档流
    12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    //测试z-index
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .img1 {
                  position:absolute;
                  left:0;
                  top:0;
                  z-index:-10;
                  }
            .img2 {
                  position:absolute;
                  left:0;
                  top:0;
                  z-index:-3; //越大越往前排,离你越近
                  }
            .img3 {
                  position:absolute;
                  left:0;
                  top:0;
                  z-index:-5;
                  }
        </style>
    </head>
    <body>
    <div class="img3"><img src="作业/1.jpg" alt=""></div>
    <div class="img2"><img src="作业/2.jpg" alt=""></div>
    <div class="img1"><img src="作业/3.jpg" alt=""></div>
    </body>
    </html>
    

      

    13.透明度:opacity:0.4;
    14.边框弧度:border-radius: 50%;
    15.去除列表前面的标志:list-style:none;
    16.对齐上面和左边最顶部:padding:0; margin:0;
    17.字体加粗样式: font-weight: 900; 
    18.需要注意的几个逻辑表达式的问题,下面的这个和js的&&,||用法是一样的
      print(3 and 5) #两个为真才为真
      print(0 and 3) #0是假就不判断后面了,直接成假了
      print(0 or 3) #有一个为真就为真
      print(2 or 3) #2已经为真了那么就不会去判断后面了

    //实现图片切换的效果
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding:0;
                margin: 0;
            }
            .outer{
                790px;
                height: 340px;
                border: solid 1px red;
                margin: 0 auto;
                margin-top: 40px;
                position: relative;
            }
            ul{
                list-style: none;
                position: absolute;
                top: 0;
                left:0;
            }
            .com{
                position: absolute;
                display: none;
                /*visibility: hidden;*/
            }
            .num{
                position: absolute;
                top: 300px;
                left: 330px;
            }
            .num li{
                display: inline-block;
                 20px;
                height: 20px;
                color: black;
                background-color: white;
                border-radius: 50%; //边框弧度
                line-height: 20px;
                text-align: center;
            }
            .btn{
                position: absolute;
                 40px;
                height: 60px;
                background-color: grey;
                opacity: 0.5; //透明度
                color: black;
                font-weight: 900;  //加粗
                text-align: center;
                line-height: 60px;
                top:50%;
                margin-top: -30px;
            }
            .leftbtn{
                left:0;
            }
             .rightbtn{
                 right:0;
    
            }
        </style>
    </head>
    <body>
    <div class="outer">
        <ul class="img">
            <li><a href=""><img src="1.jpg" alt=""></a></li>
            <li class="com"><a href=""><img src="2.jpg" alt=""></a></li>
            <li class="com"><a href=""><img src="3.jpg" alt=""></a></li>
            <li class="com"><a href=""><img src="4.jpg" alt=""></a></li>
            <li class="com"><a href=""><img src="5.jpg" alt=""></a></li>
            <li class="com"><a href=""><img src="6.jpg" alt=""></a></li>
        </ul>
        <ul class="num">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="leftbtn btn"> < </div>
        <div class="rightbtn btn"> > </div>
    
    </div>
    
    </body>
    </html>
    

      

    //后台管理布局
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台管理布局</title>
        <style>
            *{
                margin: 0;
            }
            a{
                text-decoration: none;
            }
            .header{
                 100%;
                height: 44px;
                background-color: #2459a2;
            }
            .title li{
                 100px;
                height: 80px;
                list-style: none;
                text-align: center;
                line-height: 80px;
                margin-top: 20px;
                padding: 50px;
                background-color: blue;
            }
            .leftmenu .title a{
                font-size: 18px;
                color: white;
            }
            .leftmenu{
                 300px;
                background-color: grey;
                position: fixed;
                top: 44px;
                left:0;
                bottom: 0;
            }
            .con{
                position: fixed;
                top: 44px;
                left: 300px;
                right:0;
                bottom: 0;
                background-color: darksalmon;
                overflow: scroll;
            }
    
        </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="content">
        <div class="leftmenu">
            <ul class="title">
                <li><a href="">菜单一</a></li>
                <li><a href="">菜单二</a></li>
                <li><a href="">菜单三</a></li>
            </ul>
        </div>
        <div class="con">
            <h1>hellp</h1>
            <h1>hello</h1>
            <h1>hello</h1>
        </div>
    </div>
    </body>
    </html>
    

      

    //遮盖层
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>遮罩层</title>
        <style>
            .backgroup{
                 100%;
                height: 2000px;
            }
            .zzc{
                position: fixed;
                bottom: 0;
                top:0;
                left:0;
                right:0;
                background-color: grey;
                opacity: 0.4;
            }
        </style>
    </head>
    <body>
    <div class="backgroup">
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
        <p>haiyan</p>
    </div>
    <div class="zzc"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    调用webservice接口报错
    Java设计模式之使用反序列化的方式实现单例模式
    Java设计模式之使用枚举类的方式创建单例
    使用饿汉模式创建单例模式
    Java 查看运行生成的字节码文件 反汇编
    Java设计模式之--单例模式-使用懒汉模式创建
    git无法 cherry pick到其他分支
    Android之Handler用法总结
    Java之观察者模式
    Android之Activity与Service通信
  • 原文地址:https://www.cnblogs.com/xiaohema/p/8455449.html
Copyright © 2020-2023  润新知