目录
1.美化网页元素
1.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引客户
- 凸显页面的主题
- 提高用户的体验
span标签：重点要突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>1.2 字体样式
- font-family：字体
- font-size：字体大小
- font-weight：字体粗细
- color：字体颜色
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family:Arial, 楷体;
color: darkblue;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！</p>
<p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。</p>
<p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！</p>
<p>I love three things：the sun ，the moon and you.</p>
<p>The sun is for the day ，the moon is for the night.</p>
<p>and you forever.</p>
</body>
</html>页面效果：
1.3 文本样式
- 颜色–>color
rgba（）：调整颜色的透明度，透明度值的范围在0-1之间
h1{
/*rba():可以调整颜色的透明度 透明度的值为0-1*/
color: rgba(0,255,255,0.9);
}- 文本对齐方式–>text-align
h1{
/*rba():可以调整颜色的透明度 透明度的值为0-1*/
color: rgba(0,255,255,0.9);
text-align: center;
}- 首行缩进–>text-indent
em表示缩进几个字，px表示缩进多少像素，常用em
.p1{
text-indent: 2em;
}- 行高–>line-height
行高和块的高度一致就可以上下居中
.p3{
background: lavender;
height: 50px;
line-height: 50px;
}
- 下划线–>text-decoration
a标签（超链接）默认有下划线，去下划线：text-decoration:none
.l1{
text-decoration: underline;
}- 中划线
.l2{
text-decoration: line-through;
}- 上划线
.l3{
text-decoration: overline;
}
完整测试代码：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
/*rba():可以调整颜色的透明度 透明度的值为0-1*/
color: rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: lavender;
height: 50px;
line-height: 50px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事简介</h1>
<p class="p1">高中生侦探工藤新一和青梅竹马的同学毛利兰一同去游乐园玩的时候，目击了黑衣男子的可疑交易现场。只顾偷看交易的工藤新一，却忽略了从背后接近的另一名同伙。他被那名男子灌下了毒药，当他醒来时，身体居然缩小了！</p>
<p>如果让那些家伙知道工藤新一还活着的话，不仅性命难保，还会危及身边的人。在阿笠博士的建议下他决定隐瞒身份，在被小兰问及名字时，化名江户川柯南，为了搜集那些家伙的情报，寄住在父亲以侦探为业的小兰家中。</p>
<p>谜团重重的黑衣组织……他所了解的，就只有他们是以酒的名称作为代号的。为了揭露那些家伙的真面目，小小侦探江户川柯南开始大显身手！</p>
<p class="p3">I love three things：the sun ，the moon and you.</p>
<p>The sun is for the day ，the moon is for the night.</p>
<p>and you forever.</p>
</body>
</html>实现图片相较于文字的居中：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--水平对齐需要有参照物-->
<style>
img,style{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/a.PNG" alt="">
<span>The sun is for the day ，the moon is for the night.</span>
</p>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看