美化网页元素
1.span 标签
重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
2.字体样式
<!--
font-family: 字体
font-size： 字体大小
font-weight: 字体粗细
color ： 字体颜色
-->
<style>
body{
font-family: "Arial Black", 楷体;
color: #a13d30;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
3.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">
Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
</body>
</html>
-
颜色
-
文本对齐的方式
<style> /*颜色： RGB 0~F 十六进制 RGBA A(透明度):0~1 */ /*text-align: 排版，居中*/ h1{ color:rgba(0,255,0,0.5); text-align: center; } </style>
-
首行缩进
.p1{ text-indent: 2em; }.p3{ background: chartreuse; height:300px;/*背景（块）高度*/ line-height: 300px;/*行高*/ /*行高和块的高度一致就可以将单行文字上下居中*/ } -
下划线
text-decoration: underline;/*下划线*/ text-decoration: line-through;/*中划线*/ text-decoration: overline;/*上划线*/ /*a标签(超链接)去下划线*/ a{ text-decoration: none; } -
文本图片水平对齐
vertical-align: middle;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img,span{ vertical-align: middle; } </style> </head> <body> <p> <img src="images.PNG" alt=""><!--注意存放图片的路径--> <span>image</span> </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: #2700ff;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/*<!--*/
/*水平对齐~ 参照物， a，b*/
/*-->*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
</p>
<p>
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">
Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
<p>
<img src="images.PNG" alt=""><!--注意存放图片的路径-->
<span>image</span>
</p>
</body>
</html>
4.阴影
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
/*要注意偏移量的正负取值*/
text-shadow: #3cc7f5 10px -10px 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书</title>
<style>
#price{
text-shadow: red 2px -2px 0px;
}
</style>
</head>
<body>
<p id="price">
价格：99元
</p>
</body>
</html>
5.超链接伪类
主要掌握：a:hover
/*默认的颜色*/
a{
text-decoration: none;
color: #000;
}
/*鼠标悬浮的状态（只需要记住 :hover）*/
a:hover{
color: orange;
font-size: 50px;
}
这里自己找了一张图片来举了有关超链接伪类的一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书</title>
<style>
/*设置一开始默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮在a标签上的设置*/
a:hover{
color:chartreuse;
}
</style>
</head>
<body>
<a href="#">
<img src="a.jpg" alt="">
</a>
<p>
<a href="#">码出高效，Java开发手册</a>
</p>
<p>
<a href="#">作者：孤尽老师</a>
</p>
</body>
</html>
移动鼠标至a标签上，就会看到效果！
更炫版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书</title>
<style>
/*设置一开始默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮在a标签上的设置*/
a:hover{
color:chartreuse;
/*设置鼠标悬浮在a标签的字体的大小*/
font-size: 50px;
}
/*鼠标单击未释放时*/
a:active{
color:hotpink;
}
</style>
</head>
<body>
<a href="#">
<img src="a.jpg" alt="">
</a>
<p>
<a href="#">码出高效，Java开发手册</a>
</p>
<p>
<a href="#">作者：孤尽老师</a>
</p>
</body>
</html>
6.列表
如果这里看不懂，就接着往下看，看到下面的一个例子，就知道怎么用了。
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/*background: #a0a0a0;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
7.背景
背景既可以设置颜色也可以设置背景图片
这里自己找图片，进行以下测试
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;/*边框：粗细大小 字体 颜色*/
background-image: url("images/tx.jpg");
/*默认是全部平铺的 repeat*/
}
.div1{
/*水平平铺*/
background-repeat: repeat-x;
}
.div2{
/*垂直平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
}
</style>
结合列表和背景，举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
</head>
<body>
<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>
</body>
</html>
将上述界面变的更好看、更人性化：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css" rel="stylesheet" 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>
/*设置背景颜色和大小*/
#nav{
width: 300px;
background: chartreuse;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* 颜色，图片，图片位置，平铺方式 */
/*标题箭头图片，注意图片的存放路径*/
background: #ff3ee0 url("../../images/d.gif") 270px 10px no-repeat;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
/*列表箭头图片，注意图片的存放路径*/
background-image: url("../../images/r.gif");
background-repeat: no-repeat;
background-position: 236px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: #ff1e2c;
text-decoration: underline;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/*background: #a0a0a0;*/
/*}*/
看完这个例子，应该对上述的列表和背景有了进一步的认识了。
8.渐变
background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
可以下来自己找一些例子来进行练习，主要掌握这种书写语法。
来源：CSDN
作者：@999
链接：https://blog.csdn.net/weixin_45683851/article/details/104098129