html样式：三角形(透明色)，鼠标样式，图片表单文本对齐，z-index堆叠属性

Red youth

已于 2022-09-13 20:47:16 修改

阅读量342

点赞数 1

分类专栏：入门基础 html 文章标签： html css 前端

于 2022-09-13 20:28:40 首次发布

本文链接：https://blog.csdn.net/NNNNNNI/article/details/126840952

版权

入门同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

基础

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

1.三角形

用html css展现三角形

三角形利用的是边框:把盒子宽高设置为零，留下边框，这时候边框有四个三角形形成，利用transparent（透明色）隐藏掉整个边框，利用border给一边（top，bottom ，left right）上色。

<style>
    div {
        width: 0;
        height: 0;
        /* transparent 透明色 */
        border: 10px solid transparent;
        border-top-color: red;
    }
</style>

<body>
    <div>
    </div>
</body>

2.鼠标样式

鼠标停留文本，鼠标样式

<style>  
    li{
        /*取消无序列表样式*/
        list-style: none;
    }
</style>
<body>
    <ul>
        <li style = "cursor: default">鼠标默认样式</li>
        <li style = "cursor: pointer">鼠标小手样式</li>
        <li style = "cursor: mobe">鼠标移动样式</li>
        <li style = "cursor: text">鼠标文本样式</li>
        <li style = "cursor: no-allowed">鼠标禁止样式</li>
    </ul>
</body>

3.图片，表单，文本对齐

1.顶线对齐

2.中间对齐

3.底线对齐

<style>
    tp1{
        /*顶线对齐*/
        vertical-align: top;
    }
    tp2{
        /*中间对齐*/
        vertical-align: middle;
    }
    tp3{
        /*底线对齐*/
        vertical-align: bottom;
    }
</style>
<body>
    <div>
        <img class = "tp1"src ="图片"alt = "">
        <span>文本</span>
    </div>
     <div>
        <img class = "tp2"src ="图片"alt = "">
        <span>文本</span>
    </div>
     <div>
        <img class = "tp3"src ="图片"alt = "">
        <span>文本</span>
    </div>
</body>

4.z-index属性

z-inder 属性：指定一个元素的堆叠顺序。
拥有最高堆叠顺序的元素总是出于堆叠顺序较低的元素的前面，元素可以拥有负的z-indx属性值。
z-index仅能在定位元素上奏效。

<style>
        img {
            width: 200px;
            height: 150px;
            position: absolute;
            z-index: 49;
        }
        h1 {
            position: absolute;
            z-index: 50;
        }
       
    </style>
<body>
    
    <h1>This is a heading</h1>
    <img src="图片"
        alt="">
    <p>该吃饭了</p>
</body>