CSS——背景图像应用及渐变
背景图片
div{
width:1000px;
height:700px;
border:2px solid red; /*边框：粗细 实线 颜色*/
background-image:url("images/11-20.jpg"); /*图片在边框内默认平铺*/
}
/*平铺方式*/
.div1{
background-repeat:repeat-x;/*水平平铺*/
}
.div2{
background-repeat:repeat-y;/*垂直平铺*/
}
.div3{
background-repeat:no-repeat;/*不平铺*/
}
背景图片应用
列表优化：使用背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<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:#C0C0C0;
}
.title{
font-size:18px; /*字体大小*/
font-weight:bold; /*粗体*/
text-indent:2.8em; /*首行缩进*/
line-height:35px; /*行高*/
/*背景颜色 背景图片 背景图片定位 平铺方式*/
background:red url("../images/11-20-2.gif") 280px 8px no-repeat;
}
/*
list-style用法:
none:去掉圆点
circle:变成空心圆
decimal:变成数字
square:变成正方形
*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
background:#C0C0C0 url("../images/11-20-1.jpg") 236px 1px repeat-y;
}
a{
text-decoration:none;/*删除下划线*/
font-size:14px;
color:black;
font-weight:bold;
}
a:hover{
color:#FFFF00;
text-decoration:underline;/*加下划线*/
}
效果图
渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #08AEEA;
background-image: linear-gradient(189deg, #08AEEA 0%, #2AF598 100%);
}
</style>
</head>
<body>
渐变渐变
</body>
</html>
效果图
分享一个渐变颜色的网站，里面有多种渐变色选择，还可以自己搭配渐变色Grabient