首页用css帮我写一个有生日蛋糕的生日快乐页面

用css帮我写一个有生日蛋糕的生日快乐页面

时间: 2023-06-01 16:05:52 浏览: 139

好的，我可以为您提供一份简单的代码，如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生日快乐！</title> <style> /* 设置页面背景和字体 */ body { background-color: #fdffb6; font-family: sans-serif; } /* 设置生日蛋糕的样式 */ #cake { background-color: #fff; border: 5px solid #f00; border-radius: 50%; height: 200px; margin: 0 auto; position: relative; top: 50px; width: 200px; } #cake:before { background-color: #f00; border-top-left-radius: 50%; border-top-right-radius: 50%; content: ""; height: 100px; position: absolute; top: -50px; width: 200px; } #cake:after { background-color: #f00; border-radius: 5px; content: ""; height: 50px; left: calc(50% - 25px); position: absolute; top: -75px; width: 50px; } /* 设置文字的样式 */ h1 { color: #f00; margin-top: 50px; text-align: center; text-shadow: 2px 2px #fff; } </style> </head> <body> <div id="cake"></div> <h1>生日快乐！</h1> </body> </html> ``` 这段代码会在页面中展示一个生日蛋糕，并在中心位置显示“生日快乐”四个红色的字体。您可以修改样式属性来自定义您想要的样式。希望这对您有所帮助！

阅读全文