页面布局基础——2.3

小沐爱编程

已于 2022-09-09 11:28:15 修改

阅读量290

点赞数 2

分类专栏： HTML5基础文章标签： servlet java 前端

于 2022-09-07 00:13:14 首次发布

本文链接：https://blog.csdn.net/SDXYGZH/article/details/126736515

版权

HTML5基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面布局基础，使用基本html标签和css层叠样式表对图文进行排版。

页面布局基础章节2.3-Webpack文档类资源-CSDN下载

一、效果图1

二、源代码

html5

<div class="bg-w">
		<div class="text">
			<h1>悯农二首</h1>
			<h3>唐李绅</h3>
			<p> 锄禾日当午，</p>
			<p> 汗滴禾下土。</p>
			<p>谁知盘中餐，</p>
			<p>粒粒皆辛苦。</p>
		</div>
		<img src="./img/img.png" alt="" class="img">
	</div>

css样式表

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bg-w {
	margin: 50px auto;
	border: 1px solid rgb(183, 36, 36);
	width: 800px;
	height: 300px;
	padding: 100px 0 0 25px;
}

.text {
	height: auto;
	width: 200px;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1,
h3,
p {
	text-align: center;
}

p {
	font-size: 28px;
}

.img {
	position: absolute;
	left: 650px;
	top: 180px;
	width: 400px;
	height: 180px;
}

二、效果图2

html代码：

<!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>
</head>

<body>
	<style>
		.section {
			background-image: url(img/黄鹤楼.jpeg);/*如果需要替换图片，直接“./”（直接点斜杠，找到自己的图即可，不需要手动调整图片的大小）*/
			background-repeat: round;
			font: black normal 26px 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
			margin: 150px auto 0 auto;
			width: 800px;
			height: 400px;
			padding: 80px 0 0 100px;
		}

		.section a {
			text-decoration: none;
		}

		.text {
			background: rgba(196, 194, 194, 0.5);
			border-radius: 8%;
			border: 1px solid #cccc;
			text-align: center;
			width: 275px;
			height: 300px;
		}
	</style>
	<div class="section">
		<article>
			<div class="text">
				<h1>
					<a href="#">黄鹤楼</a>
				</h1>
				<h3>唐崔颢</h3>
				<p>昔人已乘黄鹤去,此地空余黄鹤楼。</p>
				<p> 黄鹤一去不复返,白云千载空悠悠</p>
				<p>晴川历历汉阳树,芳草萋萋鹦鹉洲。</p>
				<p>日暮乡关何处是?烟波江上使人愁。</p>
			</div>
		</article>
	</div>
</body>

</html>