鱼C论坛

 找回密码
 立即注册
123
返回列表 发新帖
楼主: 不二如是

[庖丁解牛] 0 0 0 6 - 美化字体

[复制链接]
发表于 2019-10-26 08:16:04 | 显示全部楼层
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>让编程改变世界</title>
                <style text="text/css">
                        html,body {
                                color: pink;
                                height: 100%;
                                font-family: sans-serif;
                        }
                        h1 {
                                font-size: 66px;
                                margin-bottom: 22px;
                        }
                        body {
                                background-size: cover;
                                background: url(003.jpg) center center;
                                margin: 0;
                                padding: 0;
                                position: relative;
                        }
                        #container {
                                position: absolute;
                                text-align: center;
                                width: 100%;
                                top: 50%;
                                <!-- container 这个div移到页面50% 下方,
                                想要真正实现内容也居中,则需要Y轴偏移-50%即可; -->
                                transform: translateY(-50%);  
                        }
                        p {
                                font-size: 33px;
                                margin-bottom: 22px;
                        }
                       
                        a {
                                font-size: 55px;
                        }
                </style>
    </head>
    <body>
        <div id="container">
                        <h1>我爱鱼C</h1>
                        <p>WWW.fishC.com  --  让编程改变世界</p>
                        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
                </div>
    </body>
</html>

不知为何竟然没居中~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-15 16:13:33 | 显示全部楼层
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST! TEST!!</title>
        <style type="text/css">

            html {
                height: 100%;
                font-family: sans-serif;
            }

            body {
                margin: 0;
                padding: 0;
                /* position: relative; */
                background: url([img]https://steamcdn-a.akamaihd.net/steamcommunity/public/images/items/532110/5b512f23e387af896fdb1589d7f8ae854e731cbd.jpg[/img]) center center;
                background-size: cover;
            }

            #container {
                width: 100%;
                text-align: center;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
            }

            h1 {
                color: pink;
                font-size: 50px;
                margin-bottom: 15px;
            }

            p {
                color: honeydew;
                font-size: 20px;
                margin-bottom: 20px;
            }
            
            a {
                font-size: 20px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h1>我爱鱼C</h1>
            <p>让编程改变世界!</p>
            <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
        </div>
    </body>
</html>
Snipaste_2020-08-15_13-44-34.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 04:39

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表