WEB前端技术--文字与浮动

发疯的熏熏

已于 2023-12-27 10:37:52 修改

阅读量521

点赞数 12

分类专栏： WEB前端技术文章标签：前端

于 2023-12-27 10:14:04 首次发布

本文链接：https://blog.csdn.net/m0_58837398/article/details/135238423

版权

WEB前端技术专栏收录该内容

6 篇文章

订阅专栏

一、实验目的

使用文字与浮动

二、实验内容

1.试验区域

2.功能描述

在此次实验中，实现了对字体以及字号的运用，对字体的浮动，采用了向左浮动以及向右浮动和无浮动，学会使用下划线以及对设置上标。

3.html描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人页面</title>
		<link type="text/css" rel="stylesheet" href="css/person.css" />
	</head>
	<body>
		<div text-align="center" class="main">
			<div class="body1 fl">
				<div class="body1-top">
					<p class="p1">个<br />人<br />简<br />历 </p>
				</div>
				<div class="body1-moderate">
					<p class="p2">^<br />^<br />^<br />^<br />^</p>
				</div>
				<div class="body1-bottom">
					<img src="img/twoCode.jpg" width="98px" />
				</div>
			</div>
			<div class="body2 fl">
				<div class="body2-top">
					<p class="zi1">照片</p>
				</div>
				<div class="body2-moderate1">
					<b>基本资料Basic information</b>
					<p class="zi2">姓名：<u>小孙</u><sup>[1]</sup>专业：<u>计算机</u></p>
					<p class="zi2">性别： <u>女</u> &nbsp;&nbsp;&nbsp;学号：<u>192054227</u></p>
					<p class="zi2">民族： <u>汉族</u>&nbsp;学历：<u>大学本科</u></p>
				</div>
				<div class="body2-moderate2">
					<em class="fn">教育背景Education background</em>
					<p class="zi2-1">2007-2013   峪道河镇小学</p>
					<p class="zi2-1">2013-2016   峪道河镇初中</p>
					<p class="zi2-1">2016-2019   汾阳中学</p>
				</div>
				<div class="body2-bottom">
					<strong class="fr">自我评价</strong>
					<p class="zi2">追求：超越自己，努力了处于一个高度，不努力将处于另一个低度！</p>
				</div>
			</div>
		</div>
	</body>
</html>

4.css描述

    .main{
	background-color: lavenderblush;
	width: 354px;
	height: 455px;
	border: 1px solid black;
	align-content: center;
}
div{
	border:1px solid black; 
}
.body1{
	width: 100px;
	height: 450px;
}
.body2{
	width: 250px;
	height: 450px;
}
.body1-top{
	background-color: #00FFFF;
	height: 150px;
}
.body1-moderate{
	height: 150px;
}
.body1-bottom{
	height: 150px;
}
.fl{
	float:left;
}
.fn{
	float: none;
}
.fr{
	float: right;
}
.img1{
	height: 90px;
}
.p1{
	text-align: center;
	font-size: 23px;
	color: deepskyblue;
}
.p2{
	text-align: center;
	font-size: 20px;
	color: red;
}
.body2-top{
	height: 20%;
}
.body2-moderate1{
	height: 30%;
}
.body2-moderate2{
	height: 30%;
	background-color: aquamarine;
}
.body2-bottom{
	height: 20%;
}
.zi1{
	font-size: 30px;
	text-align: center;
	background-color: antiquewhite;
	font-family: "微软雅黑";
}
.zi2{
	font-size:15px;
}
.zi2-1{
	text-align: center;
}
strong{
	color: #0000FF;
}