欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

Web前端：木兰花令网页案例设计

发布时间：2024/1/8 HTML 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Web前端：木兰花令网页案例设计 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

案例

HTML

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="author" content="huyiwei"><meta name="generator" content="HBuilder X"><title>css+div</title><link rel="stylesheet" href="实验9-1.css" type="text/css" /></head><body><div id="wrap"><div id="pic"></div><div id="text"><div id="title">木兰花令.拟古决绝词</div><div id="author">纳兰性德</div><div id="content"><p>人生若只如初见</p><p>何事秋风悲画扇</p><p>等闲变却故人心</p><p>却道故人人易变</p><p>骊山雨罢清宵半</p><p>泪雨霖铃终不怨</p><p>何如薄幸锦衣郎</p><p>比翼连枝当日愿</p></div></div></div></body> </html>

CSS

#wrap{width: 900px;height: 520px;margin: 0 auto;border: 2px red solid;margin-top: 5px; } div{text-align: center; } #pic{width: 420px;height: 300px;background-image: url(图片/9-1.jpg);background-repeat: no-repeat;background-position: center;float: left;background-color: #7777aa; } #text{background-image: url(图片/9-1.jpg);float: right;width: 420px;height: 500px;background-color: #7777aa;padding: 10px;font-weight: bold; } #title{font-family: 华文彩云;font-size: 32px; } #author{font-size: 12px;font-family: 黑体;text-align: right;margin-bottom: 24px; } p{font-family: 隶书;font-size: 24px;margin: 2px;letter-spacing: 0.5em;line-height: 1.5em;text-align: center; }

总结

以上是生活随笔为你收集整理的Web前端：木兰花令网页案例设计的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。