请问问什么我的background 不能加no-repeat 等属性
来源:2-5 编程练习
weixin_慕斯卡3305140
2020-03-03 04:00:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{padding: 0; margin: 0; font-family: "microsoft yahei"}
a{text-decoration: none;}
header{
height:80px;
min-width: 800px;
padding:0 100px;
background:black;
}
header>.logo{
padding: 15px 0px;
height:50px;
/*display:block;*/
float:left;
}
header>.logo img{
height:50px;
/*display:block;*/
}
header>.logo>a{
color:white;
font:30px "microsoft yahei";
}
header>nav{
/*padding-right:200px;*/
float:right;
}
header>nav>a{
display:block;
float: left;
height:73px;
width:100px;
text-align:center;
color:white;
font:bold 20px/73px "microsoft yahei";
}
header>nav>a:hover,.active{
height:80px;
}
header>nav>a:nth-child(1){
background:red;
}
header>nav>a:nth-child(2){
background:yellow;
}
header>nav>a:nth-child(3){
background:lightgreen;
}
header>nav>a:nth-child(4){
background:violet;
}
header>nav>a:nth-child(5){
background:orange;
}
header>nav>a:nth-child(6){
background:lightblue;
}
section{
width: 1100px;
margin: 0 auto;
padding: 50px;
overflow: hidden;
}
section h3{
padding-bottom: 10px;
font-size: 20px;
}
section h3 span{
font-size: 20px;
color: #888;
margin-left: 5px;
}
aside{
float: left;
width: 400px;
}
aside>dl{
margin: 10px 0 10px 120px;
}
aside>dl>dt{
text-decoration:underline;
font-size: 16px;
font-weight: 700;
}
aside>dl>dd:first-of-type{
background: black;
background-image: url("http://climg.mukewang.com/582e61290001787900500051.png") no-repeat;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
font-size: 16px;
position: absolute;
margin: -20px 0 0 -120px;
}
aside>dl>dd:last-of-type{
font-size: 14px;
line-height: 1.5em;
padding-top: 10px;
}
article{
width: 600px;
float: right;
}
article img{
width: 500px;
}
article p{
font-size: 14px;
line-height: 1.5em;
margin: 20px 0;
}
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<header>
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png
"/>MYMOOK</a></div>
<nav>
<a href="#" class="active">Home</a>
<a href="#">Course<br>corse</a>
<a href="#">Actual</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</header>
<section>
<aside>
<h3>Recent<span>Course</span></h3>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd>1</dd>
<dd>HTML is the standard markup language used to creat web pages and its elements from the building blocks of all websites.</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd>2</dd>
<dd>Cascading Style Sheets(CSS)is a simple mechanism for adding style(e.g.,font, colors, spacing) to web documents.</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd>3</dd>
<dd>JavaScript is a high-level,dynamic, untyped, and interpreted programming language.</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd>4</dd>
<dd>AngularJS is an open-source web application framwork mainly maintained by Google and by a community of individuals and...
</dd>
</dl>
</aside>
<article>
<h3>Welcome to<span>Massive Open Online Course</span></h3>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" >
<p>We hope that all the studets who live the internet can be more convenient access to learning resources, using the internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education</p>
</article>
</section>
</body>
</html>
1回答
同学你好,因为使用的是background-image属性,这个属性是单独的属性(不是简写),是指背景图片,不能再添加其他是否重复等属性值。
若是要统一使用,建议:可以用简写属性,background。
如果我的回答帮助了你,欢迎采纳,祝学习愉快~
相似问题