前端小项目名字生成器 +源码

最新推荐文章于 2024-05-22 09:33:49 发布

小墨蛇

最新推荐文章于 2024-05-22 09:33:49 发布

阅读量466

点赞数

分类专栏：前端htmlcss 文章标签：前端 css html

本文链接：https://blog.csdn.net/weiyi47/article/details/130857066

版权

本文分享了一个前端小项目——名字生成器的实现过程，包括HTML和CSS的使用，通过该项目可以学习到基础的前端页面布局和样式设计。

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

直接复制粘贴

完成效果

在这里插入图片描述

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

<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>名字成成器</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        body {
     
            background-color: #ebeaea;
        }

        h1 {
     
            height: 60px;
            border: 2px solid #333;
            margin: 2px;
            text-align: center;
            font-style: oblique;
            font-size: 40px;
            padding: 10px 0;
            text-shadow: 20px 14px rgba(12, 44, 44, .2);
            background-color: #fff;
        }

        .content {
     
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

        }

        .main {
     
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            border: 2px solid #333;
            margin: 2px;
            width: 80%;
            min-height: 100vh;
            background-color: #fff;
        }

        .box {
     
            position: relative;
            width: 200px;
            height: 80px;
            margin: 5px;
            border-radius: 4px;
            background-color: #1e1c1c;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .box h3 {