zoukankan      html  css  js  c++  java
  • 223 前端之CSS: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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .img1 {
     8               position:absolute;
     9               left:0;
    10               top:0;
    11               z-index:-10;
    12               }
    13         .img2 {
    14               position:absolute;
    15               left:0;
    16               top:0;
    17               z-index:-3; //越大越往前排,离你越近
    18               }
    19         .img3 {
    20               position:absolute;
    21               left:0;
    22               top:0;
    23               z-index:-5;
    24               }
    25     </style>
    26 </head>
    27 <body>
    28 <div class="img3"><img src="作业/1.jpg" alt=""></div>
    29 <div class="img2"><img src="作业/2.jpg" alt=""></div>
    30 <div class="img1"><img src="作业/3.jpg" alt=""></div>
    31 </body>
    32 </html>
    测试z-index

    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已经为真了那么就不会去判断后面了

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         *{
     8             padding:0;
     9             margin: 0;
    10         }
    11         .outer{
    12             width:790px;
    13             height: 340px;
    14             border: solid 1px red;
    15             margin: 0 auto;
    16             margin-top: 40px;
    17             position: relative;
    18         }
    19         ul{
    20             list-style: none;
    21             position: absolute;
    22             top: 0;
    23             left:0;
    24         }
    25         .com{
    26             position: absolute;
    27             display: none;
    28             /*visibility: hidden;*/
    29         }
    30         .num{
    31             position: absolute;
    32             top: 300px;
    33             left: 330px;
    34         }
    35         .num li{
    36             display: inline-block;
    37             width: 20px;
    38             height: 20px;
    39             color: black;
    40             background-color: white;
    41             border-radius: 50%; //边框弧度
    42             line-height: 20px;
    43             text-align: center;
    44         }
    45         .btn{
    46             position: absolute;
    47             width: 40px;
    48             height: 60px;
    49             background-color: grey;
    50             opacity: 0.5; //透明度
    51             color: black;
    52             font-weight: 900;  //加粗
    53             text-align: center;
    54             line-height: 60px;
    55             top:50%;
    56             margin-top: -30px;
    57         }
    58         .leftbtn{
    59             left:0;
    60         }
    61          .rightbtn{
    62              right:0;
    63 
    64         }
    65     </style>
    66 </head>
    67 <body>
    68 <div class="outer">
    69     <ul class="img">
    70         <li><a href=""><img src="1.jpg" alt=""></a></li>
    71         <li class="com"><a href=""><img src="2.jpg" alt=""></a></li>
    72         <li class="com"><a href=""><img src="3.jpg" alt=""></a></li>
    73         <li class="com"><a href=""><img src="4.jpg" alt=""></a></li>
    74         <li class="com"><a href=""><img src="5.jpg" alt=""></a></li>
    75         <li class="com"><a href=""><img src="6.jpg" alt=""></a></li>
    76     </ul>
    77     <ul class="num">
    78         <li></li>
    79         <li></li>
    80         <li></li>
    81         <li></li>
    82         <li></li>
    83     </ul>
    84     <div class="leftbtn btn"> < </div>
    85     <div class="rightbtn btn"> > </div>
    86 
    87 </div>
    88 
    89 </body>
    90 </html>
    实现图片切换的效果
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>后台管理布局</title>
      6     <style>
      7         *{
      8             margin: 0;
      9         }
     10         a{
     11             text-decoration: none;
     12         }
     13         .header{
     14             width: 100%;
     15             height: 44px;
     16             background-color: #2459a2;
     17         }
     18         .title li{
     19             width: 100px;
     20             height: 80px;
     21             list-style: none;
     22             text-align: center;
     23             line-height: 80px;
     24             margin-top: 20px;
     25             padding: 50px;
     26             background-color: blue;
     27         }
     28         .leftmenu .title a{
     29             font-size: 18px;
     30             color: white;
     31         }
     32         .leftmenu{
     33             width: 300px;
     34             background-color: grey;
     35             position: fixed;
     36             top: 44px;
     37             left:0;
     38             bottom: 0;
     39         }
     40         .con{
     41             position: fixed;
     42             top: 44px;
     43             left: 300px;
     44             right:0;
     45             bottom: 0;
     46             background-color: darksalmon;
     47             overflow: scroll;
     48         }
     49 
     50     </style>
     51 </head>
     52 <body>
     53 <div class="header"></div>
     54 <div class="content">
     55     <div class="leftmenu">
     56         <ul class="title">
     57             <li><a href="">菜单一</a></li>
     58             <li><a href="">菜单二</a></li>
     59             <li><a href="">菜单三</a></li>
     60         </ul>
     61     </div>
     62     <div class="con">
     63         <h1>海燕啊</h1>
     64         <h1>海燕啊</h1>
     65         <h1>海燕啊</h1>
     66         <h1>海燕啊</h1>
     67         <h1>海燕啊</h1>
     68         <h1>海燕啊</h1>
     69         <h1>海燕啊</h1>
     70         <h1>海燕啊</h1>
     71         <h1>海燕啊</h1>
     72         <h1>海燕啊</h1>
     73         <h1>海燕啊</h1>
     74         <h1>海燕啊</h1>
     75         <h1>海燕啊</h1>
     76         <h1>海燕啊</h1>
     77         <h1>海燕啊</h1>
     78         <h1>海燕啊</h1>
     79         <h1>海燕啊</h1>
     80         <h1>海燕啊</h1>
     81         <h1>海燕啊</h1>
     82         <h1>海燕啊</h1>
     83         <h1>海燕啊</h1>
     84         <h1>海燕啊</h1>
     85         <h1>海燕啊</h1>
     86         <h1>海燕啊</h1>
     87         <h1>海燕啊</h1>
     88         <h1>海燕啊</h1>
     89         <h1>海燕啊</h1>
     90         <h1>海燕啊</h1>
     91         <h1>海燕啊</h1>
     92         <h1>海燕啊</h1>
     93         <h1>海燕啊</h1>
     94         <h1>海燕啊</h1>
     95         <h1>海燕啊</h1>
     96         <h1>海燕啊</h1>
     97         <h1>海燕啊</h1>
     98         <h1>海燕啊</h1>
     99         <h1>海燕啊</h1>
    100         <h1>海燕啊</h1>
    101         <h1>海燕啊</h1>
    102         <h1>海燕啊</h1>
    103         <h1>海燕啊</h1>
    104         <h1>海燕啊</h1>
    105         <h1>海燕啊</h1>
    106         <h1>海燕啊</h1>
    107         <h1>海燕啊</h1>
    108         <h1>海燕啊</h1>
    109         <h1>海燕啊</h1>
    110         <h1>海燕啊</h1>
    111         <h1>海燕啊</h1>
    112         <h1>海燕啊</h1>
    113         <h1>海燕啊</h1>
    114         <h1>海燕啊</h1>
    115         <h1>海燕啊</h1>
    116         <h1>海燕啊</h1>
    117         <h1>海燕啊</h1>
    118     </div>
    119 </div>
    120 </body>
    121 </html>
    后台管理布局
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>遮罩层</title>
     6     <style>
     7         .backgroup{
     8             width: 100%;
     9             height: 2000px;
    10         }
    11         .zzc{
    12             position: fixed;
    13             bottom: 0;
    14             top:0;
    15             left:0;
    16             right:0;
    17             background-color: grey;
    18             opacity: 0.4;
    19         }
    20     </style>
    21 </head>
    22 <body>
    23 <div class="backgroup">
    24     <p>haiyan</p>
    25     <p>haiyan</p>
    26     <p>haiyan</p>
    27     <p>haiyan</p>
    28     <p>haiyan</p>
    29     <p>haiyan</p>
    30     <p>haiyan</p>
    31     <p>haiyan</p>
    32     <p>haiyan</p>
    33     <p>haiyan</p>
    34     <p>haiyan</p>
    35     <p>haiyan</p>
    36     <p>haiyan</p>
    37 </div>
    38 <div class="zzc"></div>
    39 </body>
    40 </html>
    遮盖层











  • 相关阅读:
    Android开发 使用 adb logcat 显示 Android 日志
    【嵌入式开发】向开发板中烧写Linux系统-型号S3C6410
    C语言 结构体相关 函数 指针 数组
    C语言 命令行参数 函数指针 gdb调试
    C语言 指针数组 多维数组
    Ubuntu 基础操作 基础命令 热键 man手册使用 关机 重启等命令使用
    C语言 内存分配 地址 指针 数组 参数 实例解析
    CRT 环境变量注意事项
    hadoop 输出文件 key val 分隔符
    com.mysql.jdbc.exceptions.MySQLNonTransientConnectionException: Too many connections
  • 原文地址:https://www.cnblogs.com/abdm-989/p/12066593.html
Copyright © 2011-2022 走看看