html例子

最新推荐文章于 2025-05-21 14:08:49 发布

qq_36106235

最新推荐文章于 2025-05-21 14:08:49 发布

阅读量831

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_36106235/article/details/53561356

html 专栏收录该内容

3 篇文章

订阅专栏

三角形旋转
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css3 通过transform属性实现DIV元素的旋转</title>
<style type="text/css">
    #Arrow{
        display:inline-block;
        width: 0;
        height: 0;
        margin-left: 50px;
        border-top: 50px solid #a9a9a9;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        transition: 0.3s;
    }
    #Arrow:hover {
        transform:rotateZ(180deg);
    }
</style>
</head>

<body>

<div id="Arrow"></div>

</body>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>

        .div1{
            width: 0px;/* 把div1变成由三角形组成 只需要把宽和高设置成0 变成圆形把圆角边框设置成50%*/
            height: 0px;
            border-top:100px solid #ccc;
            border-right:100px solid #ccc;
            border-bottom:100px solid transparent;
            border-left:100px solid #ccc;
            border-radius:50%;
        }



        .div2{
            width: 100px;
            height: 100px;
            background:red;
            /* border:1px solid yellow; */ /* 子盒子的margin会穿透父盒子 解决办法一 给父盒子设置边框 */
            /* overflow:hidden; */ /* 解决办法2  给父盒子溢出隐藏 */
            padding-top:30px;  /* 第三种解决办法 给父级padding-top */
        }
        .div3{
            width: 50px;
            height: 50px;
            background:green;
            margin-top:30px;
        }


      /* 利用浮动的原理做一个文字环绕的效果  */

      /* 利用定位可以把盒子按照 left right top bottom 设置位置 */
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2">
        <div class="div3"></div>
    </div>
    <div class="div4"></div>
    <!-- 字体可以在ps里面 快捷键T获取 -->
    <!-- font: 斜体 加粗 大小/行高 字体 -->
    <!-- 字体大小 字体 颜色 下划线 会继承 -->
    <!-- dd兼容性不好 -->
    <!-- 块盒子默认是父级100%的宽 -->
    <!-- 图片的alt属性一定要写 低版本浏览器默认有边框-->
    <!-- 子盒子设置浮动后会脱离文档流 父盒子包不住子盒子高度就会为0  只要把父盒子设置overflow:hidden就可以了 -->
    <!-- 清理浮动 子盒子浮动后 给父盒子display:inline-block 然后给父盒子的父盒子加text-align:center -->
    <!-- 父盒子设置宽度 不设置高度以备扩展性 子盒子不用设置宽高 内容撑起来 -->
    <!-- 用一个空盒子clear:both 不推荐-->
    <!-- 用伪类
        :after {
            content: "";display:block;clear:both;
        }
        clear{
            zoom:1;
        }
     -->
    <!-- 如果绝对定位的子集有浮动 就可以省略清除浮动的操作 -->
    <!-- 盒模型计算清楚 否则IE6会乱排版 -->
    <!-- IE6中元素浮动 如果内容由子元素撑起来,也需要给子元素设置浮动 -->
    <!-- P标签不能包含块级元素 否则P标签会变成两个P标签 -->
    <!-- 在IE6下如果元素的最小高度不足19px 那么浏览器就会自动给元素设置19px 解决办法:给元素设置overflow:hidden -->
    <!-- 在IE6下不支持1像素的边框点线 解决办法：设置2px的点线 -->
    <!-- haslayout属性是IE6以下导致子元素的margin失效的原因 解决办法：设置父元素zoom:1 -->
    <!-- IE6以下如果子元素有浮动和margin-lef或者margin-right的的话margin的值会扩大2倍 解决办法：把子元素变成内联元素display:inline;并且给父元素设置overflow：hidden;
    1.并且如果 父元素设置浮动的话，正常浏览器就可以撑开父元素，可是IE不行，
    2.那么就需要给父元素设置所有子元素盒子模型的宽度总和，盒子模型一定要算清楚，多3px都会导致margin失效
    3.如果子元素排成两行后 第二行如果少一个或者几个的话 margin又会失效-->
    <!-- IE6以下如果li本身没有浮动，那么li的内容有浮动的情况下，li之间就会出现间隙，解决办法：1.给li加浮动 2.设置vertical-align:top;
    并且如果元素的高度没有19px的话浏览器也会把元素改为19px并且li之间的间隙也会出来，这两种情况如果同时存在的话那么就必须使用！！浮动！！和！！溢出隐藏！！ -->
    <!-- IE6下的文字溢出bug
    子元素的宽度如果和父元素的宽度小于3px 那么这两个浮动的子元素中间的注释或者内联元素就会导致这两个子元素的文字溢出，内联元素越多溢出的就越多 解决办法：用块级元素把内联元素包起来！！！ -->
    <!-- 在IE6下当绝对定位与浮动元素是兄弟关系的时候 绝对定位会失效 解决办法 ：用DIV或者其他标签把a标签包起来 -->
    <!-- 在IE6下当父级是overflow:auto的时候 子级元素是相对定位 则父级元素包不住 子级元素 解决办法:给父级元素也加相对定位  -->
    <!-- 在IE6下 如果父级元素的宽高是奇数的时候 设置了绝对定位的子级元素的 top与buttom会有1px的偏差 除了设置偶数 没办法处理 -->
    <!-- 在IE6下设置了固定定位了元素 失效 解决办法：用js的dom对象 -->
    <!-- 在IE6下设置透明度 filter:alpha(opacity=50) -->
    <!-- 在IE6下 输入型的表单会有1px的偏差 解决办法 ：给input加浮动 -->
    <!-- 在IE6下不兼容png格式的图片 解决办法 引入js文件 然后script 里面 调用函数 -->
    <!-- 在网上下载VIC 视频转码工具 或者格式工厂 -->
</body>
</html>

图片底部遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .div1{
            width: 400px;
            height: 400px;
            border:1px solid red;
            background:yellow;
            position:relative;
            overflow:hidden;
        }
        .span{
            width: 400px;
            height: 100px;
            background:red;
            position:absolute;
            top:400px;
            transition:0.7s;
        }
        .div1:hover .span{
            top:300px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span class="span"></span>
    </div>
</body>
</html>