css 实现文字提示说明、文字绕图效果

鼠标放在某个文字上时，展示文字的解释说明

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
        .con h3{
            font-size:25px;
            color:red;
        }

        .box{
            width:200px;
            height:50px;
            background-color:gold;
            line-height:50px;
            text-indent:10px;

            display:none;  /* 隐藏不显示 */
        }

        .con:hover .box{
            display:block;  /* 悬浮时显示 */
        }
    </style>
</head>
<body>
    <div class="con">
        <h3>鼠标悬浮，试试看会出现什么</h3>
        <div class="box">很遗憾，什么也没有出现</div>
    </div>
</body>
</html>

 

文字绕图：

代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动文字绕图</title>
    <style type="text/css">
        .con{
            width:450px;
            height:210px;
            border:1px solid #000;
            margin:50px auto 0;
        }

        .pic{
            width:100px;
            height:100px;
            background-color:gold;
            float:left;
            margin:10px;
        }

        .text{
            /*background-color:green;*/
            height:130px;
            color:#666;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="pic"><img src="images/头像2.png" alt="头像" /></div>
        <div class="text">植树造林不仅可以绿化和美化家园，
            同时还可以起到扩大山林资源、防止水土流失，世界
            首枚植树节邮票 、保护农田、调节气候、促进经济发
            展等作用，是一项利于当代、造福子孙的宏伟工程。
            为了保护林业资源，美化环境，保持生态平衡。植树
            造林不仅可以绿化和美化家园，同时还可以起到扩大山
            林资源、防止水土流失，世界首枚植树节邮票 、保护
            农田、调节气候等。
        </div>
    </div>
</body>
</html>

页面效果：

 

posted @ 2019-03-31 01:23  reyinever  阅读(1513)  评论(0)  编辑  收藏  举报