HTML提示框编写

最新推荐文章于 2024-07-21 22:10:10 发布

□_□□_□

最新推荐文章于 2024-07-21 22:10:10 发布

阅读量593

点赞数 11

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_62854251/article/details/135567503

版权

效果展示

一、CSS代码展示

<style >
        .box{
            width: 400px;
            height: 300px;
        }
        .top{
            width: 100%;
            height: 15%;
            background-color: rgb(198, 241, 241);

            align-items: center; /* 文字居中对齐 */
            display: flex;
            justify-content:space-between;

            border-radius: 10px 10px 0 0;/*圆角设置左上，右上，右下，左下*/
        }
        .title{
            width: 100px;
            text-align: center;
        }
        .quit{
            text-align: center;
            width: 50px;
        }
        .middle{
            width: 100%;
            height: 70%;
            background-color: azure;
        }
        .bottom{
            width: 100%;
            height: 15%;
            background-color:rgb(177, 177, 232);
            align-items: center;
            display: flex;
            gap: 1%; /*每个盒子之间的间距*/
            margin-left: auto;
            justify-content: end; /*调整元素在盒子中的排列组合方式*/

            border-radius: 0 0 10px 10px;/*圆角设置左上，右上，右下，左下*/
        }

        .but{
            height: 70%;
            width: 18%;
            border-radius: 10px;/*边框圆角*/
            margin-right: 1%;/*调整对齐间距*/
            
	        background-color:#f66f6a;
	        color:white;
	        border:0;
	        font-size: 13px;
	        box-sizing: content-box;				
        }
        .but:hover{/*事件，将鼠标悬停在标签上，改变颜色*/
	        background-color: #a54b4a;
        }
        .X{
            margin-right: 2%;/*边框圆角*/
            border: 0;
            background-color: transparent/*将button标签背景色改为透明*/
        }
        .X:hover{/*事件，将鼠标悬停在标签上，改变颜色*/
            color: #f66f6a;
        }

    </style>

二、HTML代码展示

<body>
    <div class="box">
        <div class="top">
            <p class="title">显示标题</p>
            <button class="X">X</button>
        </div>

        <div class="middle">
            
        </div>

        <div class="bottom">
            <button class="but no">关闭</button>
            <button class="but yes">确认</button>
        </div>
    </div>
</body>

三、完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style >
        .box{
            width: 400px;
            height: 300px;
        }
        .top{
            width: 100%;
            height: 15%;
            background-color: rgb(198, 241, 241);

            align-items: center; /* 文字居中对齐 */
            display: flex;
            justify-content:space-between;

            border-radius: 10px 10px 0 0;/*圆角设置左上，右上，右下，左下*/
        }
        .title{
            width: 100px;
            text-align: center;
        }
        .quit{
            text-align: center;
            width: 50px;
        }
        .middle{
            width: 100%;
            height: 70%;
            background-color: azure;
        }
        .bottom{
            width: 100%;
            height: 15%;
            background-color:rgb(177, 177, 232);
            align-items: center;
            display: flex;
            gap: 1%; /*每个盒子之间的间距*/
            margin-left: auto;
            justify-content: end; /*调整元素在盒子中的排列组合方式*/

            border-radius: 0 0 10px 10px;/*圆角设置左上，右上，右下，左下*/
        }

        .but{
            height: 70%;
            width: 18%;
            border-radius: 10px;/*边框圆角*/
            margin-right: 1%;/*调整对齐间距*/
            
	        background-color:#f66f6a;
	        color:white;
	        border:0;
	        font-size: 13px;
	        box-sizing: content-box;				
        }
        .but:hover{/*事件，将鼠标悬停在标签上，改变颜色*/
	        background-color: #a54b4a;
        }
        .X{
            margin-right: 2%;/*边框圆角*/
            border: 0;
            background-color: transparent/*将button标签背景色改为透明*/
        }
        .X:hover{/*事件，将鼠标悬停在标签上，改变颜色*/
            color: #f66f6a;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <p class="title">显示标题</p>
            <button class="X">X</button>
        </div>

        <div class="middle">
            
        </div>

        <div class="bottom">
            <button class="but no">关闭</button>
            <button class="but yes">确认</button>
        </div>
    </div>
</body>
</html>

□_□□_□

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫