当前位置：网站首页>【无标题】

【无标题】

2022-06-11 17:50:00 【Zhangxinyue00】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<title></title>
		<link rel="stylesheet" type="texts" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<img src="img/img1.jpg" class="border m-3 border-danger border-3 img-thumbnail" width="300px" >
		<div class="d1 border-top border-bottom border-warning rounded-circle">
			test
		</div>
		<style type="texts"> .d1{
       width: 200px; height: 200px; color: #0DCAF0; } </style>
	</body>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- <img src="img/img1.jpg" class="border m-3 border-danger border-3 img-thumbnail" width="300px" > <div class="d1 border-top border-bottom border-warning rounded-circle"> test </div> -->
		<style type="text/css"> .c{
       width:200px; height:200px; } </style>
		
		<div class="clearfix">
		   <div class="c float-left border border-success"></div>
		   <div class="c float-right border border-success"></div>
		</div>
		 
		
		 
	</body>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- <img src="img/img1.jpg" class="border m-3 border-danger border-3 img-thumbnail" width="300px" > <div class="d1 border-top border-bottom border-warning rounded-circle"> test </div> -->
		<div class="border border-success">
		<div class="p-3 h-25 bg-info d-inline-block">25%</div>
		<div class="p-3 h-50 bg-info d-inline-block">50%</div>
		<div class="p-3 h-75 bg-info d-inline-block">75%</div>
		<div class="p-3 h-100 bg-info d-inline-block">100%</div>
		<div class="p-3 h-auto bg-info d-inline-block">auto</div>
		</div>
		
		 
	</body>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- <img src="img/img1.jpg" class="border m-3 border-danger border-3 img-thumbnail" width="300px" > <div class="d1 border-top border-bottom border-warning rounded-circle"> test </div> -->
		<span class="align-text-top">text-top 文本顶部</span>
		<span class="align-top">top 顶部</span>
		<span class="align-middle">middle 垂直居中</span>
		<span class="align-bottom">bottom 底部</span>
		<span class="align-text-bottom">text-bottom 文本底部</span>
		
		<span class="align-baseline">baseline 基准</span>
		
		<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>
		
		 
	</body>
	<script src="./js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>
原网站

版权声明
本文为[Zhangxinyue00]所创，转载请带上原文链接，感谢
https://blog.csdn.net/Zhangxinyue00/article/details/125196455

边栏推荐

猜你喜欢

随机推荐