CSS03：文本列表样式和背景渐变
作用：有效的传递页面信息、美化网页、凸显页面的主题、提高用户的体验
字体样式
span标签：修饰重点要突出的内容，只是约定俗成用span表示，用其他任何名字也可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*字体样式*/
/*
font-family：字体
font-size：字体大小
font-weight：字体粗细
font：风格 粗细 宽度 大小/高度 字体
*/
span{
color: red;
}
body{
font-family: 微软雅黑;
}
h1{
font-size: 50px;
}
.strong{
font-weight: bold;
}
#summary{
font: italic bold 20px/50px 微软雅黑;
}
</style>
</head>
<body>
<h1>欢迎来到提瓦特</h1>
<!--span标签-->
<p>
这里是七种元素交汇的幻想世界<span>提瓦特</span>。
</p>
<p>
在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
</p>
<p
class="strong">五百年前，古国的覆灭却使得天地变异……
</p>
<p>
如今，席卷大陆的灾难已经停息，和平却仍未如期光临。
</p>
<p>
作为故事的主人公，你从<span>世界之外</span>漂流而来，降临大地。你将在这广阔的世界中，自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚
</p>
<p id="summary">
一起去冒险吧
</p>
</body>
</html>
文本样式
颜色、对齐、缩进、行高、装饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*文本样式*/
/*
color：颜色
8位十六进制分别代表RGBA（红绿蓝+透明度），00代表无，FF代表满
红色0xFF0000，绿色0x00FF00、蓝色0x0000FF、黑色0x000000，白色0xFFFFFF
透明度可不加
也可以通过rgb()和rgba()方法传参
text-align：左右对齐
text-indent：缩进
line-height：行高，行高等于块的高度就可以上下居中对齐
text-decoration: 装饰
underline：下划线
line-through：中划线
overline：上划线
none：超链接去除下划线
text-shadow：阴影，水平阴影位置 垂直阴影位置 模糊距离 颜色
*/
h1{
color: #FF0000AA;
text-align: center;
}
.summary{
text-indent: 2em;
text-align: center;
}
.last_p{
background: rgba(0, 255, 255, 0.3);
height: 50px;
line-height: 50px;
}
.background{
text-decoration: underline;
}
a{
text-decoration: none;
}
#submit:hover{
color: red;
}
#submit{
text-shadow: 0.5px 0.5px #00d202;
}
</style>
</head>
<body>
<h1><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz">欢迎来到提瓦特</a></h1>
<p>
这里是七种元素交汇的幻想世界提瓦特。
</p>
<p>
在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
</p>
<p class="background">
五百年前，古国的覆灭却使得天地变异……
</p>
<p>
如今，席卷大陆的灾难已经停息，和平却仍未如期光临。
</p>
<p class="last_p">
作为故事的主人公，你从世界之外漂流而来，降临大地。你将在这广阔的世界中，自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚
</p>
<p>
<form action="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz" method="get" class="summary">
<input type="submit" name="start" id="submit" value="一起来冒险吧">
</form>
</p>
</body>
</html>
背景渐变
div标签：把页面分割为独立的、不同的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
/*
border：边框，粗细 类型 颜色
background-image:
url()：嵌入背景图像，默认完全平铺
linear-gradient：渐变（https://www.grabient.com/）
background-repeat：
repeat-x：水平平铺
repeat-y：垂直平铺
no-repeat：不平铺
*/
div{
width: 300px;
height: 300px;
border: 1px solid red;
background-image: url("../万叶.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
.div4{
background-color: #4158D0;
background-image: linear-gradient(60deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#nav{
width: 300px;
background: grey;
}
/*
background：背景，颜色 图片路径 水平位置 垂直位置 平铺方式
*/
h2{
background: red;
text-indent: 1em;
background: red url("../万叶.jpg") 110px 0px no-repeat;
}
/*list-style: 列表样式
none：不显示列表符号
circle：空心圆
square：方块
*/
ul li{
height: 30px;
list-style: none;
background-image: url("../万叶.jpg");
background-repeat: no-repeat;
background-position: 110px 0px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<!--div块标签，将页面划分为更具体的块，限定样式作用域-->
<!--
nav：导航栏，一般是在div中定义一个id属性nav来表示
-->
<div id="nav">
<h2>全部商品分类</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>
浙公网安备 33010602011771号