初写项目（音悦）

background:背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image

background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像

background-position：//精确定位背景图片

background-repeat：//背景图像将向垂直和水平方向重复(no-repeat不重复)

 

 

 

 

 

前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐</title>
<link rel="stylesheet" type="text/css" href="css/reading.css"/>
</head>
<body>
<!--头部-->
<div class="content">
<h1>购物须知</h1>
<ul>
<li><a href="#type1">预定商品</a></li>
<li><a href="#type2">专辑价格</a></li>
<li><a href="#type3">发货周期</a></li>
<li><a href="#type4">快递</a></li>
<li><a href="#type5">售后相关</a></li>
</ul>

<div class="type" id="type1">
<h3></h3>
<div class="text">
<p></p>
</div>
</div>
<div class="type" id="type2">
<h3></h3>
<div class="text">
<p></p>
</div>
</div>
<div class="type" id="type3">
<h3></h3>
<div class="text">
<p style="text-align: center;"><img src="img/buyer/1.jpg"/></p>
<p></p>
</div>
</div>
<div class="type" id="type4">
<h3></h3>
<div class="text">
<p style="text-align: center;"><img src="img/buyer/2.jpg" style="margin: auto;"/></p>
</div>
</div>
<div class="type" id="type5">
<h3></h3>
<div class="text">
<p></p>

</div>
</div>

</div>
<div id="di" style="text-align: center;">
<img src="img/footer_v180123.png"/>
</div>
<!--尾部-->
</body>
</html>

 

 css代码

.content {
width: 1000px;
margin: 0 auto;
}
.content h1 {
font-size: 44px;
color: #de4767;
text-align: center;
font-weight: normal;
}

.content ul {
text-align: center;
padding-left: 0px;
}


.content ul li {
display: inline-block;
background-image: url(../img/buyer/mod_circle.png);
background-repeat: no-repeat;
background-position: center -95px;
}

.content ul li :hover{
background-position: center -95px;

}

.content ul li a {
padding-top: 40px;
display: block;
text-decoration: none;
color: #333;
width: 100px;

}

.content ul li a:hover{
color: #de4767;

}

.content #type1 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -190px;
height: 50px;
}

.content #type2 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px 5px;
height: 50px;
}


.content #type3 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -90px;
height: 50px;
}

.content #type4 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -285px;
height: 50px;
}

.content #type5 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -590px;
height: 50px;
}


.content .type .text {
border: 2px solid #cccc;
border-radius: 10px;
padding: 20px 25px;
font-size: 14px;
}

.content .type .text p{
text-indent: 2em;
line-height: 2em;
margin: 0;
}

 

1.空格 内部所有元素

2.大于号 内部第一代元素

3.本身所有的元素

 

posted @ 2021-10-25 18:54  hellozh  阅读(26)  评论(0)    收藏  举报