本文探讨了为何要美化网页元素，强调其在传递信息、吸引用户和提升用户体验方面的重要性。通过讲解span标签的使用、字体与文本样式的设定、文本阴影和超链接伪类的应用、列表及背景的美化，以及渐变效果的实现，提供了一套完整的网页美化方法。
一、为什么要美化网页元素
- 有效的传递页面信息
- 美化页面、吸引用户
- 凸显页面的主题
- 提高用户的体验
二、span标签
重点要突出的字，使用span标签套起来
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#Massimo{
font-size: 50px;
}
</style>
</head>
<body>
欢迎来到<span id="Massimo">Java</span>的世界
</body>
</html>
效果：
三、字体样式
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family : 字体
font-size : 字体大小
font-weight : 字体粗细
color : 字体颜色
-->
<style>
body{
font-family: 楷体;
color: #a232be;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>内容简介</h1>
<p class="p1">
讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。就在他即将绝望的时候，
一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。
</p>
<p>
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！
</p>
</body>
</html>
效果：
四、文本样式
- 颜色
- 文本对齐的方式
- 首行缩进
- 行高
- 装饰
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0-F
RGBA A ： 0-1
text-align : 排版
text-indent:2em ;段落首行缩进
height: 300px;
line-height: 300px;
行高和块的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0 , 255 , 255 , 0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: aquamarine;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>
<h1>故事介绍</h1>
<p class="p1">
这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，
它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
</p>
<p class="p3">
在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，
由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。
因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
</body>
</html>
效果：
文本图片水平对齐
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐-- 参照物 a ， b
-->
<style>
img , span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/a.png" alt="">
<span>askgoanasdjkasdgaksdfjkagjskd</span>
</p>
</body>
</html>
效果：
四、文本阴影和超链接伪类
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #a232be;
}
/* 鼠标悬停的状态*/
a:hover{
color: orange;
font-size: 50px;
}
/* 鼠标按住未释放的状态*/
a:active{
color: green;
}
/*text-shadow : 阴影颜色 ， 水平偏移 ， 垂直偏移 ， 阴影半径*/
#price{
text-shadow: #bbbe1b 10px -10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/a.png" alt="">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="">作者：孤尽老师</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
效果：
五、列表美化
准备图片：
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字产品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼貌箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
外部样式CSS：
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/*颜色 ， 图片 ， 图片位置 ， 平铺方式*/
background: red url("../images/d.png") 266px 3px no-repeat;
}
/*ul li*/
/*
list-style :
none 去掉圆点
circle 中心圆
decimal 数字
square 正方形
*/
ul{
background: #a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/r.png");
background-repeat: no-repeat;
background-position: 230px 4px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
项目结构：
效果：
六、背景
- 背景颜色
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认是全部平铺的 repeat*/
background-image: url("images/c.png");
}
/*水平平铺*/
.div1{
background-repeat: repeat-x;
}
/*垂直平铺*/
.div2{
background-repeat: repeat-y;
}
/*不平铺*/
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
效果：
七、渐变
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 径向渐变 ， 圆形渐变-->
<style>
body{
/*background-color: #4158D0;*/
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
