为什么要美化网页？
1、有小的传递页面信息
2、美化网页、页面漂亮、才能吸引用户
3、突显页面的主题
4、提高用户的体验
- 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>
1、字体样式
- font-family 字体
- font-size 字体大小
- font-weight 字体的粗细
- color 字体的颜色
<!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: #de07f5;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>Java(计算机编程语言)</h1>
<p class="p1">
Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程
</p>
<p>
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
</p>
</body>
</html>
2、文本样式
-
颜色
单词
RGB 0 ~ F
RGBA A：0 ~ 1 -
文本对齐的方式
text-align: center;（水平居中） -
首行缩进
text-indent: 2em; -
行高
line-height: 300px;
垂直居中：line-height = height -
装饰
/下划线/
text-decoration: underline;
/中划线/
text-decoration: line-through;
/上划线/
text-decoration: overline; -
文本水平对齐
vertical-align: middle; -
阴影
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #389ba8 10px 10px 10px;
}
<!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,0,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: red;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*
水平对其 参照物 a，b
*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="l1">2929054</p>
<p class="l2">2929054</p>
<p class="l3">2929054</p>
<h1>Java(计算机编程语言)</h1>
<p class="p1">
Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程
</p>
<p class="p3">
Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
</p>
<p>
<img src="./images/1.png" alt="" width="200px" height="200px">
<span>123456789</span>
</p>
</body>
</html>
3、超链接伪类
- 默认的颜色
a{
text-decoration: none;
color: #000000;
}
- 鼠标悬浮的状态
a:hover{
color: orange;
font-size: 50px;
}
- 鼠标按住未释放的状态
/*鼠标按住未释放的状态*/
a:active{
color: green;
}
- 已访问的状态
/*已访问的状态*/
a:visited{
color: red;
}
4、列表
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*
ul li
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #adaaaa;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
#nav{
width: 300px;
background: #adaaaa;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="style.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>
5、背景
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("./images/1.png");
/*默认全部平铺*/
}
.div1{
background-repeat: repeat-x;
/*水平平铺*/
}
.div2{
background-repeat: repeat-y;
/*垂直平铺*/
}
.div3{
background-repeat: no-repeat;
/*不平铺*/
}
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
