html图型操作

最新推荐文章于 2023-04-17 10:22:48 发布

Tw368WJZ

最新推荐文章于 2023-04-17 10:22:48 发布

阅读量143

点赞数

分类专栏： html 布局调试设置

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79476742

版权

html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

布局

5 篇文章 0 订阅

订阅专栏

调试设置

3 篇文章 0 订阅

订阅专栏

html图型操作

七拼八凑

补充:
1.群组选择器对所有样式都生效.redDiv, .blueDiv
2.行标签  inline
不能设置宽-高  宽高内容撑开
可以同行显示
3.块标签  block
设置宽和高。 
默认：宽度继承父级。高度由内容撑开
独占一行
4.文档流：标签在浏览器里面按照特性，从上到下，从左向右排列的一个顺序。 
脱离文档流：让元素在文档流里面飞起来。不再占用原来

1.position定位类型

定位类型:
1.定位默认值是不定位static
2.相对定位:属性值relative
相对于自身的位置去定位
3.绝对定位:
属性值:absolute 
相对对于父级的位置定位,如果父级没有postion属性
会相对于父父级,实在找不到相对目标就会相对对窗口定位;
4.固定定位:
属性值fixed;
相对于窗口固定位置始终不变,会脱离文档流
4.z-index:值为z轴数值,正数覆盖页面离用户近,
负数被页面覆盖离用户远,只有定位的元素才可以使用
5.inherit:规定继承父类元素position属性值
6.z-index > float浮动 > 正常的块级元素

1.z-index使用

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

2.相对定位relative

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

3.绝对定位absolute

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

4.固定定位fix

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>

</body>
</html>

2.过渡transition

1.过渡时间:
transition-duration: 2s;
2.过渡速度:
transition-property: all;
    linear    匀速
    ease                     
    ease-in  变快
    ease-out  变慢
    ease-in-out 先快再慢
注释:希望那些样式变化的时候有过渡效果。多个属性用逗号隔开默认是all
3.过渡延时:
transition-delay: 1s;
    /*复合写法*/
    /*兼容性*/
    /*谷歌 - webkit内核*/
    /*-webkit-transition: all 1s 2s linear;*/
    /*火狐*/
    /*-moz-transition: all 1s 2s linear;*/
    /*IE*/
    /*-ms-transition: all 1s 2s linear;*/
    /*欧朋*/
    /*-o-transition: all 1s 2s linear;*/
    /*transition: all 1s 2s linear;*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .redDiv{
            margin:100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
            /*过渡时间*/
            transition-duration: 2s;
            /*希望那些样式变化的时候有过渡效果.多个属性用逗号隔开 默认是all*/
            transition-property: height, background-color;
            /*transition-timing-function: ease;*/
            /*linear 匀速*/
            /*ease-in 变快*/
            /*ease-out 变慢*/
            /*ease-in-out 先快再慢*/
            /*过渡延迟*/
            /*transition-delay: 5s;*/
            /*复合写法*/
            transition: all 5s -1s linear;
            /*兼容性*/
            /*-moz-transition: all 5s 1s linear;
            -webkit-transition: all 5s 1s linear;
            -ms-transition: all 5s 1s linear;
            -o-transition: all 5s 1s linear;*/
        }
        .redDiv:hover{

            height: 600px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <div class="redDiv"></div>
</div>
</body>
</html>

3.2D形变

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 200px;
        font-size: 30px;
        margin-left: 100px;
        float: left;
        transition: 3s linear;

    }
    .rotate{
        /*旋转*/
        transform: rotate(20deg);

    }
    .rotate:hover{
        transform: rotate(760deg);
        border: 1px red solid;
        border-radius: 50%;
    }
    /*.translate{
        transform: translate(50px,-50px);
    }*/
    .translate:hover{
        transform: translate(50px,-50px);
    }
    .scale:hover{
        transform: scale(2);
        transform: scale(0.5,2);
    }
    .skew:hover{
        transform: skewX(50deg) rotate(360deg) ;
    }
    </style>
</head>
<body>

    <div class="rotate">旋转</div>
    <div class="translate">平移</div>
    <div class="scale">缩放</div>
    <div class="skew">倾斜</div>

</body>
</html>

4.三列中间自适应

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>双飞翼/圣杯</title>
        <style type="text/css">
            .box{
                padding: 0px 150px;
                background-color: gray;
                height: 260px;
                min-width: 500px;
            }
            .left, .right{
                width: 150px;
                height: 260px;
                background-color: red;
            }
            .left{
                float: left;
                margin-left: -150px;
            }
            .right{
                float: right;
                margin-right: -150px;
            }
            .purple{
                width: 300px;
                height: 100px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="purple"></div>
        </div>
    </body>
</html>

5.点指向时出现隐藏内容

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 80px;
                background-color: gray;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
                display: none;
            }
            .box:hover .red{
                display: none;
            }
            .box:hover .blue{
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="red">
                <!-- <img src="" alt="" /> -->
                <!-- <span></span> -->
                <!-- <div></div> -->
            </div>
            <div class="blue">
                <span>你妹见过的XX</span>
                <span>世说新语</span>
            </div>
        </div>


    </body>
</html>

Tw368WJZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html图型操作

html图型操作七拼八凑补充:1.群组选择器对所有样式都生效.redDiv, .blueDiv2.行标签 inline不能设置宽-高宽高内容撑开可以同行显示3.块标签 block设置宽和高。默认：宽度继承父级。高度由内容撑开独占一行4.文档流：标签在浏览器里面按照特性，从上到下，从左向右排列的一个顺序。脱离文档流：让元素在文档流里面飞起来。不再占用原...
复制链接

扫一扫