继续学习css3对html的美化
首先我们先来看看下面的这段代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本对齐</title>
<style>
h1{
text-align: right
}
</style>
</head>
<body>
<h1>标题文字</h1>
</body>
</html>
我们可以看到这是文本对齐，其实结合我们上次学的就非常简单，我们只在<style>中先写出我们要改变那个标签的内容，改哪个写哪个标签，然后加上大括号，再写 text-align: right，注意right是可以替换的，想让它往左就往左，右就右，中间就中间，分别是left，right，center，。
看这个代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本标签</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>完成本设计需具备以下条件：拥有数智化助农相关文献及实践案例支撑，熟练掌握Java、MySQL等开发技术及小程序开发能力；可对接农户、经销商开展真实需求调研，有专业导师全程指导；具备电脑、网络等硬件设备，能满足平台开发、论文撰写需求；合理规划时间，具备文献梳理、系统设计及论文撰写基础能力，保障设计顺利推进。</p>
</body>
</html>完成本设计需具备以下条件：拥有数智化助农相关文献及实践案例支撑，熟练掌握Java、MySQL等开发技术及小程序开发能力；可对接农户、经销商开展真实需求调研，有专业导师全程指导；具备电脑、网络等硬件设备，能满足平台开发、论文撰写需求；合理规划时间，具备文献梳理、系统设计及论文撰写基础能力，保障设计顺利推进。
这个代码就是文本缩进，我们可以看到还是再<style>中先选中标签+大括号，再写text-indent：2em想缩进几个字符就写数字几就可以了。
继续来看这个代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字颜色</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>h1 </h1>
</body>
</html>
这个就是改变文字的颜色对文字进行了一个美化，还是在<style>中先选择要改的标签+大括号，在写color，写上之后就会自动弹出颜色，可自己选择。
再继续看这个代码；
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
text-align: right;
}
</style>
</head>
<body>
<div>
<img src="./ttt.png" alt="">
</div>
</body>
</html>
这个代码是让图片水平对齐的，其实还是一样的，在标签<style>，中加入div标签再在标签中加入img scr=“./就会出来我们文件中出来的图片我们进行一个选择，然后再写text-algn：right/left/cencer就可以了。
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)