2-10，.ul前面加上.top为什么就实现不了效果呢

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0;

padding: 0;

}

.top{

width:100%;

height: 80px;

background-color: #07cbc9;

overflow: hidden;

position: absolute;

}

.logo img{height: 80px;

line-height: 80px;

float: left;

margin-left: 100px;

width: 250px;

}

.nav ul{

list-style: none;

float: right;

margin-right: 100px;

}

.nav ul li{

height: 80px;

line-height: 80px;

display: inline;

margin-left: 20px;

color: white;

font-weight: bolder;

}

</style>

</head>

<body>

<ul>

<Li>ABOUT</Li>

<Li>GALLERY</Li>

<Li>FACULTY</Li>

<Li>EVENTS</Li>

<Li>CONTACT</Li>

</ul>

<div>

</div>

</body>

</html>

weixin_慕田峪7033080 2020-04-26

源自：项目：网页布局案例 2-10 作业题

收起

3回答

好帮手慕粉回答被采纳获得+3积分 2020-04-26 18:04:13

同学你好，关于同学的问题回答如下：

1、因为同学选择器写错了：

2、按照老师上次的回答，图片是可以正常显示的：

建议同学再仔细核对下。

祝学习愉快~

收起回答

好帮手慕粉 2020-04-26 13:47:05

同学你好，关于同学的问题回答如下：

1、.top.nav.ul这是类名选择器，而ul是没有类名的，所以选择不到：

只能通过标签选择器进行选择。

2、因为同学将banner部分写在了nav区域，修改参考：

3、建议同学再复习下基础知识的课程呢。

祝学习愉快~

收起回答

好帮手慕粉 2020-04-26 11:37:50

同学你好，老师太明白同学说的意思呢，建议同学再详细描述下，或者将不能实现的代码粘贴上来。另外，同学的图片使用了绝对路径：

因为绝对路径的图片是只能在同学的电脑上才能访问的，所以建议同学换成相对路径呢。

祝学习愉快~

收起回答

提问者 weixin_慕田峪7033080 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0; } .top{ width:100%; height: 80px; background-color: #07cbc9; overflow: hidden; position: relative; } .logo img{height: 80px; line-height: 80px; float: left; margin-left: 100px; width: 250px; } .nav ul{ list-style: none; float: right; margin-right: 100px; } .nav ul li{ height: 80px; line-height: 80px; display: inline; margin-left: 20px; color: white; font-weight: bolder; } .banner{width: 100%; } .banner img{ width: 100%;} </style> </head> <body> <div class="top"> <div class="logo"><img src="F:\HTML视频\第二次作业\images/logo.png"></div> <div class="nav"> <ul> <li>HOME</li> <Li>ABOUT</Li> <Li>GALLERY</Li> <Li>FACULTY</Li> <Li>EVENTS</Li> <Li>CONTACT</Li> </ul> <div> <div class="banner"><img src="F:\HTML视频\第二次作业\images/banner3.jpg"></div> </div> <div class="about"> <div class="middleone"></div> <div class="middletwo"></div> </div> </body> </html> 在上面的.nav ul改成.top.nav.ul;.nav ul li改成.top.nav.ul.li;运行后为什么不显示呢？还有下面的 banner图我加进去，为什么也不显示呢？

2020-04-26 11:56:22
提问者 weixin_慕田峪7033080 #2

我的意思是下面这样的，在前面加.top为什么不会实现呢？我并不是在ul前加了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0; } .top{ width:100%; height: 80px; background-color: #07cbc9; overflow: hidden; position: relative; } .top.logo img{height: 80px; line-height: 80px; float: left; margin-left: 100px; width: 250px; } .top.nav ul{ list-style: none; float: right; margin-right: 100px; } .top.nav ul li{ height: 80px; line-height: 80px; display: inline; margin-left: 20px; color: white; font-weight: bolder; } .banner{width: 100%; } .banner img{ width: 100%; height: 500px; } </style> </head> <body> <div class="top"> <div class="logo"><img src="logo.png"></div> <div class="nav"> <ul> <li>HOME</li> <Li>ABOUT</Li> <Li>GALLERY</Li> <Li>FACULTY</Li> <Li>EVENTS</Li> <Li>CONTACT</Li> </ul> <div> </div> <div class="banner"><img src="banner3.jpg"></div> <div class="about"> <div class="middleone"></div> <div class="middletwo"></div> </div> </body> </html>

2020-04-26 14:44:25
提问者 weixin_慕田峪7033080 #3

还有banner图不会显示，修改后。为什么呢

2020-04-26 14:45:16