CSS样式

最新推荐文章于 2025-06-03 10:45:27 发布

ddydyt

最新推荐文章于 2025-06-03 10:45:27 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏：啊哦额

本文链接：https://blog.csdn.net/qq_39088411/article/details/103082125

啊哦额专栏收录该内容

25 篇文章

订阅专栏

首字母样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p {
        font-size: 14px;
        line-height: 1.5em;
    }
    
    p::first-line {
        background: rgba(0, 0, 0, .1);
    }
    
    /* 为类选择器选中 第一个字符； */
    p::first-letter {
        color: #B76E2D;
        float: left;
        font-size: 60px;
        font-weight: bold;
        line-height: 1;
        margin-right: 12px;
        text-shadow: 3px 5px 0 #232839;
        transform: rotate(-2deg);
    }
    </style>
</head>

<body>
    <p>HTML-Hyper Text Markup Language超文本标记语言，利用标记来呈现网页内容。W3c组织负责制定网页相关标准，目前HTML的最新版本为html5，新增了很多语义化标签（header、aritcle、nav、main、section、footer等）、嵌入媒体（audio、vedio、canvas、svg等）、web API（离线存储、地理位置等），为网页的快速发展增添助力。</p>
</body>

</html>

文字基线

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>vertical-align</title>
    <style>
        .test p{border:1px solid #000;font-size:16px;line-height:2;}
        .test a{margin-left:5px;font-size:12px;}
        .baseline a{vertical-align:baseline;}
        .sub a{vertical-align:sub;}
        .super a{vertical-align:super;}
        .top a{vertical-align:top;}
        .text-top a{vertical-align:text-top;}
        .middle a{vertical-align:middle;}
        .bottom a{vertical-align:bottom;}
        .text-bottom a{vertical-align:text-bottom;}
        .length a{vertical-align:10px;}
    </style>
</head>
<body>
<ul class="test">
    <li class="baseline">
        <strong>与基线对齐</strong>
        <p>参考内容<a href="?">基线对齐</a></p>
    </li>
    <li class="sub">
        <strong>与参考内容的下标对齐</strong>
        <p>参考内容<a href="?">下标对齐</a></p>
    </li>
    <li class="super">
        <strong>与参考内容的上标对齐</strong>
        <p>参考内容<a href="?">上标对齐</a></p>
    </li>
    <li class="top">
        <strong>对象的内容与对象顶端对齐</strong>
        <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="text-top">
        <strong>对象的文本与对象顶端对齐</strong>
        <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="middle">
        <strong>对象的内容与对象中部对齐</strong>
        <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="bottom">
        <strong>对象的内容与对象底端对齐</strong>
        <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="text-bottom">
        <strong>对象的文本与对象顶端对齐</strong>
        <p>参考内容<a href="?">要对齐的内容</a></p>
    </li>
    <li class="length">
        <strong>与基线算起的偏移量</strong>
        <p>参考内容<a href="?">偏移量对齐</a></p>
    </li>
</ul>
</body>
</html>

hover样式提示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>纯CSS实现的工具提示</title>
    <style>
    body {
        text-align: center;
        background: #C2E2F2;
        font-size: 18px;
        color: #444;
    }
    
    a {
        color: #1A5A7A;
        text-decoration: none;
    }

    /**
	 * HINT- A CSS tooltip library
	 */
    
    .hint {
        position: relative;
        display: inline-block;
    }
    
    .hint:before,
    .hint:after {
        position: absolute;
        opacity: 0;
        z-index: 1000000;
        transition:all 0.3s ease;
        pointer-events: none;
    }
    
    .hint:hover:before,
    .hint:hover:after {
        opacity: 1;
    }
    
    .hint:before {
        content: '';
        background: transparent;
        border: 6px solid transparent;
    }
    
    .hint:after {
        content: attr(data-hint);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    }

    /* top */
    .hint-top:before {
        bottom: 100%;
        left: 50%;
        margin: 0 0 -18px 0;
        border-top-color: rgba(0, 0, 0, 0.8);
    }
    .hint-top:after {
        bottom: 100%;
        left: 50%;
        margin: 0 0 -6px -10px;
    }
    .hint-top:hover:before {
        margin-bottom: -10px;
    }
    .hint-top:hover:after {
        margin-bottom: 2px;
    }

    /* default: bottom */
    .hint-bottom:before {
        top: 100%;
        left: 50%;
        margin: -14px 0 0 0;
        border-bottom-color: rgba(0, 0, 0, 0.8);
    }
    .hint-bottom:after {
        top: 100%;
        left: 50%;
        margin: -2px 0 0 -10px;
    }
    .hint-bottom:hover:before {
        margin-top: -6px;
    }
    .hint-bottom:hover:after {
        margin-top: 6px;
    }

    /* right */
    .hint-right:before {
        left: 100%;
        bottom: 50%;
        margin: 0 0 -4px -8px;
        border-right-color: rgba(0, 0, 0, 0.8);
    }
    .hint-right:after {
        left: 100%;
        bottom: 50%;
        margin: 0 0 -13px 4px;
    }
    .hint-right:hover:before {
        margin: 0 0 -4px -0;
    }
    .hint-right:hover:after {
        margin: 0 0 -13px 12px;
    }

    /* left */
    .hint-left:before {
        right: 100%;
        bottom: 50%;
        margin: 0 -8px -4px 0;
        border-left-color: rgba(0, 0, 0, 0.8);
    }
    .hint-left:after {
        right: 100%;
        bottom: 50%;
        margin: 0 4px -13px 0;
    }
    .hint-left:hover:before {
        margin: 0 0 -4px 0;
    }
    .hint-left:hover:after {
  	   margin: 0 12px -13px 0;
    }
    </style>
</head>

<body>
    <h2>工具提示</h2>
    <p>利用::before、::after伪对象实现的工具提示</p>
    <article>
        <a href="#" class="hint  hint-top" data-hint="工具提示">上</a>
        <a href="#" class="hint  hint-right" data-hint="工具提示">右</a>
        <a href="#" class="hint  hint-bottom" data-hint="工具提示">下</a>
        <a href="#" class="hint  hint-left" data-hint="工具提示">左</a>
    </article>
</body>

</html>