首页 > 代码库 > 圆角标题title

圆角标题title

2024-09-19 13:40:43   214人阅读

Html代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0;}
    body {max-width: 640px;margin: 50px auto;}
    .public_title { margin: 5px 2px;overflow: hidden; text-align: center; font-size: 16px;}
    .public_title .p_t_bottom,
    .public_title .p_t_top {height: 5px;margin: 0 5px;background: #ff5b80;}
    .public_title .p_t_top {border-radius: 5px 5px 0 0;}
    .public_title .p_t_body {height: 22px;line-height: 22px;background: #ff5b80;position: relative;font-size: 18px;border-radius: 5px;color: #fff;}
    .public_title .p_t_bottom {border-radius: 0 0 5px 5px;}

    .border_wrapper { margin: 30px 2px;overflow: hidden; text-align: center; font-size: 16px;}
    .border_wrapper .b_w_bottom,
    .border_wrapper .b_w_top {height: 5px;margin: 0 5px;border:1px solid #ff5b80;}
    .border_wrapper .b_w_top {border-radius: 5px 5px 0 0; border-bottom: 0;}
    .border_wrapper .b_w_body {height: 22px;line-height: 22px; border:1px solid #ff5b80;position: relative;font-size: 18px;border-radius: 5px;color: #333; border-top:0;border-bottom: 0}
    .border_wrapper .b_w_bottom {border-radius: 0 0 5px 5px;border-top:0;}
    </style>
</head>

<body>
    <div class="public_title">
        <div class="p_t_top"></div>
        <div class="p_t_body"><span>测试小姐的命格</span></div>
        <div class="p_t_bottom"></div>
    </div>
    <div class="border_wrapper">
        <div class="b_w_top"></div>
        <div class="b_w_body"><span>测试先生的命格</span></div>
        <div class="b_w_bottom"></div>
    </div>
</body>

</html>

效果图：

技术分享

 

圆角标题title


联系
我们