首页用html5和css做一个唐诗宋词的网页

用html5和css做一个唐诗宋词的网页

时间: 2023-12-22 13:04:54 浏览: 279

好的，以下是一个简单的唐诗宋词网页的HTML5和CSS代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>唐诗宋词</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #FFA07A; color: white; padding: 10px; text-align: center; } nav { background-color: #F0E68C; padding: 10px; text-align: center; } nav a { display: inline-block; color: #4B0082; font-weight: bold; margin: 0 10px; text-decoration: none; } nav a:hover { color: #8B0000; } section { margin: 20px; padding: 10px; } h1 { color: #4B0082; font-size: 28px; margin-bottom: 10px; text-align: center; } p { line-height: 1.5; margin-bottom: 10px; text-indent: 2em; } </style> </head> <body> <header> <h1>唐诗宋词</h1> </header> <nav> <a href="#">唐诗</a> <a href="#">宋词</a> <a href="#">名句</a> </nav> <section> <h1>静夜思</h1> <p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p> </section> <section> <h1>浣溪沙·北客行</h1> <p>离离原上草，一岁一枯荣。<br>野火烧不尽，春风吹又生。<br>远芳侵古道，晴翠接荒城。<br>又送王孙去，萋萋满别情。</p> </section> </body> </html> ``` 以上代码实现了一个简单的唐诗宋词网页，包括一个顶部的标题和一个导航栏，以及两个诗词的展示区域。你可以根据需要修改文字内容和样式。

阅读全文