软件20-4王静雯Bootstrap作业9

最新推荐文章于 2024-07-28 20:27:10 发布

小攸ya

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量78

点赞数

文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/w_200415/article/details/124947974

版权

d1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body>
		<img src="img/1.jpg" alt="" width="400px" class="border border-success">
		<div class="border border-5 border-info m-5 rounded-top text-body p-2 mb-2 bg-success overflow-auto" style="width: 200px;height: 200px;">大大怪将军
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		<p>abcd</p>
		</div>
		
		<div class="border border-5 border-success m-5 rounded-top text-body p-2 mb-2 bg-danger" style="width: 300px;height: 300px;">开心超人</div>
		<div class="p-2 mb-2 bg-primary">p-2 mb-2 bg-primary</div>
		<div class="p-2 mb-2 bg-secondary">p-2 mb-2 bg-secondary</div>
		<div class="p-2 mb-2 bg-success">p-2 mb-2 bg-success</div>
		<div class="p-2 mb-2 bg-danger">p-2 mb-2 bg-danger</div>
		<div class="p-2 mb-2 bg-warning">p-2 mb-2 bg-warning</div>
		<div class="p-2 mb-2 bg-info">mb-2 bg-info</div>
		<div class="p-2 mb-2 bg-light">p-2 mb-2 bg-light</div>
		<div class="p-2 mb-2 bg-dark">p-2 mb-2 bg-dark</div>
		<div class="p-2 mb-2 bg-white">p-2 mb-2 bg-white</div>
		<div class="p-2 mb-2 bg-transparent">p-2 mb-2 bg-transparent</div>

		<div class="c float-md-start border border-success">left</div>
		<div class="c float-md-end border border-success">right</div>
		<style type="text/css">
			.c{
				width: 100px;
			}
		</style>
		
		<table class="table table-bordered" style="height: 200px;">
		<tbody>
		<tr>
		<td class="align-baseline">baseline</td>
		<td class="align-top">top</td>
		<td class="align-middle">middle</td>
		<td class="align-bottom">bottom</td>
		<td class="align-text-top">text-top</td>
		<td class="align-text-bottom">text-bottom</td>
		</tr>
		</tbody>
		</table>

		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

在这里插入图片描述

d2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body>
		<div class="d1 bg-success">
			<div class="d2 bg-danger m-3">
				a
			</div>
			<span style="font-size: 3em;">d1文字</span>
		</div>
		<style type="text/css">
			html{
				
			}
			:root{
				font-size: 10px;
			}
			.d1{
				/* width: 200px;
				height: 200px; */
				font-size: 10px;
				width: 30rem;
			}
			.d2{
				width: 100px;
				height: 100px;
				font-size: 10px;
			}
		</style>
		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

在这里插入图片描述

小攸ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件20-4王静雯Bootstrap作业9

d1.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"
复制链接

扫一扫