文本阴影和超链接伪类
一.阴影
/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: #7955f5 10px 10px 3px;
}
二.超链接伪类
正常情况下,a,a:hover
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接和伪类</title>
<style type="text/css">
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: beige;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #677780;
}
/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: #7955f5 10px 10px 3px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/1.jpg " width="500" height="300">
</a>
<p>
<a href="#">码出高效</a>
</p>
<p>
<a href="">作者:孤尽老师</a>
</p>
<p id="price">
¥99
</p>
</body>
</html>
3.6,列表(ul li)
#nav{
width: 300px;
background: #7955f5 ;
}
.title{
font-family: 宋体;
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #9f2222;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #7955f5;
}
ul li{
height: 30px;
list-style: none;
text-indent: 2em;
}
a{
color: black;
text-decoration: none;
font-size: 14px;
}
a:hover{
color: cadetblue;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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="#">MP3</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> <a href="#">宝剑</a> </li>
</ul>
</div>
</body>
</html>