美文网首页
CSS入门5(0724)

CSS入门5(0724)

作者: LAYoung_f1b8 | 来源:发表于2019-07-29 15:10 被阅读0次

    07-24

    1.用户界面属性

    /*

                resize调整元素宽高

                none: 不允许用户调整元素大小。

                both: 用户可以调节元素的宽度和高度。

                horizontal: 用户可以调节元素的宽度

                vertical: 用户可以调节元素的高度

            */

    div{

    width:100px;

    height:100px;

    background:green;

    margin:0auto;

    /*resize只适用于具有overflow属性且属性值不为visible*/

    overflow:hidden;

    resize:both;

            }

    /*

    zoom 等比例缩放元素

    */

    div:hover{

    zoom:1.2;

            }

    textarea{

    resize:none;

            }

    2.文字超出

    /*

                white-space强制不换行(强制文本在同一行显示)

                text-overflow文本超出的显示方式

                    clip将溢出容器的内容直接裁剪

                    ellipsis将溢出容器的内容以小圆点表示

                注意:text-overflow必须配合overflow属性和white-space使用

            */

    p{

    width:400px;

    height:42px;

    background: lightblue;

    line-height:42px;

    /*强制不换行*/

    white-space:nowrap;

    overflow:hidden;

    /*文字超出设置*/

    text-overflow:ellipsis;

    }

    3.不透明度

    /*

                opacity不透明度

                取值为数字,取值范围为0~1

                越接近1越不透明,越接近于0,越透明

            */

    div{

    width:480px;

    height:417px;

    background:black;

    overflow:hidden;

    }

    img{

    width:500px;

    height:500px;

    transition:all1slinear;

    }

    div:hover>img{

    /*透明度*/

    opacity:0.6;

    margin-left:-20px;

    }

    4.颜色的取值

    /*

                颜色取值:

                    1、英文

                    2、六位十六进制  00  00  00

                    rgb    r  red  g  green  b  blue  代表三原色  取值范围为0~255

                    rgba    r  red  g  green  b  blue  a alpha(透明度) 代表三原色  取值范围为0~255

                        a的取值范围0~1

                    hsl  h 色调(0-360)  s饱和度  l亮度  饱和度和亮度取值为百分比

                        0(或360)表示红色,120表示绿色,240表示蓝色

                    hsla  h 色调(0-360)  s饱和度  l亮度  饱和度和亮度取值为百分比

                        0(或360)表示红色,120表示绿色,240表示蓝色

                        a代表透明度 取值范围为0~1

            */

    div{

    width:300px;

    height:300px;

    border:1pxsolidblack;

    float:left;

    margin:10px;

    }

    div.d1{

    background:rgb(200,100,120);

    }

    div.d2{

    background:rgba(200,100,120,0.7);

    }

    div.d3{

    background:hsl(120,20%,50%);

    }

    div.d4{

    background:hsla(120,20%,50%,0.5);

    }

    5.网页标题图标

    <!-- 一般图标大小为16*16 或者24*24 -->

    <!-- 设置网页标题栏图标 -->

    6.雪碧图

    /*

                雪碧图  全称(css sprites)  精灵技术

                原理:CSS Sprites其实就是把网页中一些零星的图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置

            */

    div{

    width:100px;

    height:100px;

    border:1pxsolidred;

    background:url(icon.png)no-repeat-1050px-200px;

    }

    相关文章

      网友评论

          本文标题:CSS入门5(0724)

          本文链接:https://www.haomeiwen.com/subject/wlpbrctx.html