0 0 8 1 - 【3·15】#鱼C - 高B格SVG宣传页

不二如是 · 发表于 2017-3-15 16:06:27

购买主题 已有 8 人购买 本主题需向作者支付 2 鱼币 才能浏览

aswyamato1989 · 发表于 2017-8-24 02:38:00

交作业！

MSK · 发表于 2018-8-6 21:17:32

交作业~

睁眼睡大觉 · 发表于 2019-3-30 19:59:07

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>0081</title>
                <style type="text/css">
                        body{
                                margin: 66px;
                        }
                        #intro{
                                background: url(81.png);
                                width: 500px;
                                height: 668px;
                                position: relative;
                                overflow: hidden;
                        }
                        #web_intro{
                                position: absolute;
                                color: #FFF;
                                box-sizing: border-box;

                                padding: 0 33px;
                                z-index: 22;
                        }
                        h1{
                                font-size: 35px;
                                font-family: "Helvetica";
                        }
                        p{
                                font-size: 33px;
                                font-family: "Academy Engraved LET";
                        }
                        #polygon{
                                fill: #06F;
                                stroke-width: 0;
                        }
                        #intro:hover svg{
                                opacity: .66;
                                transform: translateY(-99px);
                        }
                        #intro svg{
                                transition: all .9s ease-in-out;
                        }
                </style>
        </head>
        <body>
                <div id="intro">
                        <div id="web_intro">
                                <h1>鱼C工作室-众神所在</h1>
                                <p>代码改变人生</p>
                        </div>
                        <svg height="668" width="500">
                                <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="
#000" id="polygon"/>
                        </svg>
                </div>
        </body>
</html>

suweixuan1998 · 发表于 2020-1-14 01:08:50

每天进步一点点，学习新的标签polygon绘制多边形，使用z-index设置元素堆叠，实现背景的层叠。

小脑斧 · 发表于 2020-4-13 18:43:33

这个字体额感觉么有变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>81,高逼格</title>
    <style type="text/css">
        body{
            margin: 66px;
        }
        #intro{
            background: url(cloud.jpg);
            width: 500px;
            height: 668px;
            position: relative;
            overflow: hidden; /*超出宽度或高度的部分，自动隐藏了*/
        }
        #web_intro{
            position: absolute;
            color: #ffffff;
            box-sizing: border-box;
            padding: 0 33px;
            z-index: 22; /*如果为正数，则离用户更近，为负数则表示离用户更远。*/
        }
        #polygon{
            fill: #0066ff;
            stroke-width: 0;
        }
        h1{
            font-size: 33px;
            font-family:Arial, Helvetica, sans-serif;
        }
        p{
            font-size: 22px;
            font-family: 'Academy Engraved LET';
            
        }
        #intro:hover svg{
            opacity: .66;/*设置透明度*/
            transform: translateY(-99px);/*表示svg图形上移99px。*/
        }
        #intro svg{
            transition: all .9s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="intro">
        <div id="web_intro">
            <h1>甲鱼工作室</h1>
            <p>改变世界，改变自己，努力努力哎不能懒</p>
        </div>
        <svg width="500" height="668">
            <!--多边形坐标,加黑色线-->
            <polygon points="0,0,500,0,500,433,0,333" fill="white" stroke="#000" id="polygon"/>
        </svg>
    </div>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 56909 狗仔卡	发表于 2017-3-15 16:06:27 \| 显示全部楼层 \|阅读模式购买主题已有 8 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 8 1 - 【3·15】#鱼C - 高B格SVG宣传页

本帖被以下淘专辑推荐: