老师这个顶部的颜色横向的那个背景怎么实现?

老师这个顶部的颜色横向的那个背景怎么实现?

# 具体遇到的问题

http://img1.sycdn.imooc.com//climg/5fb9f62e09405d5519200909.jpg

*{

padding: 0px;

margin: 0px;

}

.header{

margin: 0 auto;

width: 1700px;

height: 30px;

border-color: #07cbc9;

}

.header .logo{

float: left;

position: relative;

}

.header .mun{

float:  left;

position: relative;

margin-top:20px; 

margin-left:900px;

}

.header .mun #mu li {

float: left;

list-style-type: none;

position: relative;

margin-left: 10px;


}


<!DOCTYPE html>

<html>

<head>

<title>zuoping</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="idnx.css">

</head>

<body>

<div class="header">

<div class="logo">

<img src="images\logo.png">

</div>

<div class="mun">

<ul id="mu">

<li><a href="#">CONTACT</a></li>

<li><a href="#">EVENTS</a></li>

<li><a href="#">FACULTY</a></li>

<li><a href="#">GALLERY</a></li>

<li><a href="#">ABOUT</a></li> 

<li><a href="#">HOME</a></li>

</ul>

</div>

<div class="ban">

</div>

</div>

<div class="content"></div>

<div class="footer"></div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,同学可以设置顶部header的高度,添加高度与背景颜色就可以实现,另外根据题目要求,建议同学宽度使用100%。

http://img1.sycdn.imooc.com//climg/5fba0c0309f3c36d03660130.jpg

修改后如下:

http://img1.sycdn.imooc.com//climg/5fba0bef097a3a0905000211.jpg

同学按照如上所示内容修改后再来尝试一下。

  • 热爱编程学习 提问者 #1
    *{ padding: 0px; margin: 0px; } .header{ margin: 0 auto; width: 100%; height: 80px; border-color: #07cbc9; } .header .logo{ float: left; position: relative; border-color: #07cbc9; } .header .mun{ float: left; position: relative; margin-top:20px; margin-left:900px; border-color: #07cbc9; } .header .mun #mu li { float: left; list-style-type: none; position: relative; margin-left: 10px; } .ban{ float: left; position: relative; } 老师还是没有背景色
    2020-11-22 17:40:02
好帮手慕小班 2020-11-22 18:20:11

同学你好,同学的单词书写有误,注意是background-color背景颜色,而不是border-color边框颜色。

​.header{
margin: 0 auto;
width: 100%;
height: 80px;
/*border-color: #07cbc9;*/
background-color: #07cbc9;
}

如上所示再来试试。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师