<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
body{
/* background-color: pink;/!*背景颜色*!/
background-image: url("image/liqingzhao.jpg");/!*背景图片*!/
background-position: 200px 50px; /!*设置背景图片的位置*!/
background-repeat: no-repeat;/!*背景图片 填充方式*!/ */
/*简写的方式*/
background:pink url("image/cat.jpg") 200px 50px no-repeat ;
}
</style>
</head>
<body>
</body>
</html>
商品分类
01.创建一个html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全部商品分类</title>
<link type="text/css" rel="styleSheet" href="css/demo1.css" />
</head>
<body>
<div id="nav">
<div class="title">全部商品分类</div>
<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>
02.创建对应的demo1.css文件
*{
margin: 0px; /*设置网页中所有的元素 外边距为0*/
}
#nav{
width: 230px; /*最大的div宽度*/
}
.title{
height: 30px; /*div的高度*/
line-height: 30px;/*内容的行高*/
color: white; /*字体颜色*/
background:red url("../image/arrow-down.gif") 210px no-repeat; /*背景*/
cursor: move; /*控制鼠标的形状为 可移动状态*/
}
ul{
background-color: #D7D7D7; /*背景颜色*/
}
a{
text-decoration: none; /*去掉超链接默认的下划线*/
}
li{
background-image: url("../image/arrow-right.gif") ; /*背景图片*/
background-repeat: no-repeat; /*背景图片的填充方式*/
background-position: 173px; /*背景图片的位置*/
line-height: 30px; /*内容的行高*/
/*list-style-image: url("../image/arrow-down.gif"); 设置列表的标志图片*/
/* list-style-type: decimal-leading-zero; 设置列表的标志类型*/
/* list-style: decimal url("../image/arrow-down.gif") ; 类型和图片同时存在 取图片*/
list-style: none; /*去除标记*/
}
/* 超链接的伪类*/
/*a:link{ 未访问的链接
color:red;
}*/
/*a:visited{ 已经访问的链接
color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
color:red;
text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
color:yellow;
}*/03.效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>对背景图片的大小进行设置</title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 5px solid red;
background: url("images/cat.jpg") no-repeat;
background-size: cover; /*对背景图片的大小进行设置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>