CSS---常用属性总结

css常用的一些属性：

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

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

没设置之前：

CSS---常用属性总结

设置之后：

CSS---常用属性总结

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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

<!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>

测试z-index

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .outer{
            width: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;
            width: 20px;
            height: 20px;
            color: black;
            background-color: white;
            border-radius: 50%; //边框弧度
            line-height: 20px;
            text-align: center;
        }
        .btn{
            position: absolute;
            width: 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{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
        }
        .title li{
            width: 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{
            width: 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>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
        <h1>海燕啊</h1>
    </div>
</div>
</body>
</html>

后台管理布局

后台管理布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层</title>
    <style>
        .backgroup{
            width: 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>

遮盖层

覆盖层

CSS---常用属性总结

相关推荐