请问问什么我的background 不能加no-repeat 等属性

来源:2-5 编程练习

weixin_慕斯卡3305140

2020-03-03 04:00:53

http://img.mukewang.com/climg/5e5d65ee092b239218710674.jpg

<!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回答

好帮手慕糖

2020-03-03

同学你好,因为使用的是background-image属性,这个属性是单独的属性(不是简写),是指背景图片,不能再添加其他是否重复等属性值。

若是要统一使用,建议:可以用简写属性,background。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程