掘金—幸运抽奖转盘部分HTML+CSS代码

最新推荐文章于 2024-05-08 15:40:33 发布

黄油小狗嗯

最新推荐文章于 2024-05-08 15:40:33 发布

阅读量1k

点赞数 4

文章标签： css html html5

本文链接：https://blog.csdn.net/piepie9911/article/details/120337107

版权

本文介绍了作者在字节前端青训营项目中，为模拟掘金社区幸运抽奖页面编写的HTML和CSS代码。通过提供的代码片段，展示了抽奖转盘的初步实现效果，尽管仍有不足，计划后续添加JavaScript并完善整个抽奖页面。

摘要由CSDN通过智能技术生成

八月份的时候有幸参加了字节前端青训营项目，从几乎没有接触过代码的小白，开始接触前端开发，并对其有了一点基础的了解。最终的结业项目是模拟掘金社区的幸运抽奖，其中我负责的是抽奖转盘的HTML和CSS部分，编写的代码如下：

HTML部分：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottery</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>

    <div class="main">

        <!-- 幸运抽奖标题部分 -->

        <div class="title">
            <p class="title-text">幸运抽奖</p>
        </div>
        <div class="mid-header">
            <p class="number">当前矿石数:
                <span class="current-number">∞</span>
            </p>
            <span class="signin">已签到</span>
        </div>

        <!-- 主体九宫格部分 -->
        <div class="content">
            <div class="lottery-box">
                <div class="upper-border-box">
                    <div class="border-dot1"></div>
                    <ldiv class="border-dot2"></ldiv>
                    <div class="border-min-dot"></div>
                    <div class="border-dot2"></div>
                    <div class="border-dot1"></div>
                </div>
                <div class="bottom-border-box">
                    <div class="border-dot1"></div>
                    <div class="border-dot2"></div>
                    <div class="border-min-dot"></div>
                    <div class="border-dot2"></div>
                    <div class="border-dot1"></div>
                </div>
                <div class="left-border-box">
                    <div class="border-dot1"></div>
                    <div class="border-dot2"></div>
                    <div class="border-min-dot"&g

最低0.47元/天解锁文章

黄油小狗嗯

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
掘金—幸运抽奖转盘部分HTML+CSS代码

八月份的时候有幸参加了字节前端青训营项目，从几乎没有接触过代码的小白，开始接触前端开发，并对其有了一点基础的了解。最终的结业项目是模拟掘金社区的幸运抽奖，其中我负责的是抽奖转盘的HTML和CSS部分，编写的代码如下：HTML部分：<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫