码迷,mamicode.com
首页 > 其他好文 > 详细

圆角标题title

时间:2017-05-05 13:00:54      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:stat   img   enter   pad   com   hidden   ges   cap   nim   

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

标签:stat   img   enter   pad   com   hidden   ges   cap   nim   

原文地址:http://www.cnblogs.com/huanghuali/p/6812310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!