左上三角标和导航文字右上方图标定位

最新推荐文章于 2023-06-09 09:35:42 发布

YLSkye

最新推荐文章于 2023-06-09 09:35:42 发布

阅读量352

点赞数

分类专栏：前端重学之路---CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_22113627/article/details/107484279

版权

本文主要介绍了如何使用CSS来实现左上角小三角标以及导航文字右上方的图标定位，包括实现效果图和完整的代码示例。

摘要由CSDN通过智能技术生成

具有相对特性的无依赖absolute绝对定位——各类图标定位

- 1.左上角小三角标
- 2.导航文字右上方

1.左上角小三角标

1.1 实现效果图:
在这里插入图片描述

1.2 完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左上角小三角标定位</title>
    <style>
        .demo{
    
            width: 50em;
            height: 20em;
            margin: auto;
            text-align: center;
        }
        .top1{
    
            position:absolute;
        }
        .cat{
    
            width: 25em;
        }
    </style>