首页 > Web开发 > 详细

HTML——漂亮的标题字体设置

时间:2020-06-07 00:39:40      阅读:1119      评论:0      收藏:0      [点我收藏+]

HTML——Hyper Text Markup Language


 

字体设置效果图:

技术分享图片

 

 代码部分:

 

<html>
    <head>
        <style>
            .title {
              z-index: 10;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translateX(-50%) translateY(-50%);
              font-family: "Montserrat";
              text-align: center;
              width: 100%;
            }
            .title h1 {
              position: relative;
              color: #FFF;
              font-weight: 100;
              font-size: 90px;
              padding: 0;
              margin: 0;
              line-height: 1;
              text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
            }
            .title h1 span {
              font-weight: 600;
              padding: 0;
              margin: 0;
              color: #FFFFFF;
            }
            .title h3 {
              font-weight: 200;
              font-size: 20px;
              padding: 0;
              margin: 0;
              line-height: 1;
              color: #FFFFFF;
              letter-spacing: 2px;
            }
        </style>
    </head>
    <body style=background-color:black>

        <div class="title">
            <h3>Welcome to my blog</h3>
            <h1>ROSEBUD7</h1>
            <br />
            <br />
            <h3>you are the <strong>B E S T </strong>.</h3>
        </div>
    </body>
</html>

 


 2020-06-06 23:40:47

 

HTML——漂亮的标题字体设置

原文:https://www.cnblogs.com/rosebud7/p/13057734.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!