提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

案例网页Web前端 设计
2023-09-27 14:22:47 时间

案例

在这里插入图片描述

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;
}

相关文章