第二个城市的照片不显示

margin:0;/*边界*/

padding:0;/*填充*/

}

html,body{

width:100%;

font-family: "微软雅黑";

}

ul{

list-style:none;/*英[lɪst staɪl]列表综合属性英[nʌn]没有一个*/

}

text-decoration: none;/*超链接没有下划线*/

}

input{

border:none;

outline:none;

}

.clear{

clear:both;

}

.wrapperBox{

width:100%;

}

/*导航条*/

.navBox{

width:100%;

height:40px;

background:#00848A;

}

.navBar{

width:1400px;

min-width:1400px;

margin:0 auto;/*英[ˈɔːtəʊ]居中*/

}

.navBar .logo{

width:34px;

height:31px;

float:left;

}

.logo img{

margin-top:5px;

}

.navBar nav{

float:right;

}

.navBar nav ul li{

float:left;

}

.navBar nav li a{

display:inline-block;

height:40px;

line-height:40px;

padding:0 10px;

color:#fff;

}

.navBar nav li a:hover{

color:#008484;

background:#fff;

}

/*banner条*/

.bannerBox{

width:100%;

height:640px;

overflow:hidden;

position:relative;

}

.bannerBox li .img{

width:100%;

height:100%;

display:none;

}

.bannerBox li .current{

display:block;

}

.bannerBox .dots{

position:absolute;

width:100px;

bottom:60px;

left:50%;

margin-left:-50px;

}

.bannerBox .dots>span{

display:inline-block;

width:11px;

height:11px;

background:#fff;

border-radius:15px;

cursor:pointer;

box-sizing:border-box;

}

.bannerBox .dots>span:not(:last-child){

margin-right:5px;

}

.bannerBox .dots>span.square{

background:#00848A;

}

/* 搜索框 */

.searchBox{

width:975px;

height:68px;

margin:0 auto;

background:#fff;

position:relative;

margin-top:-30px;

border-radius:5px;

box-shadow:0 0 2px 0 #ccc;

}

.searchBox form input{

width:907px;

height:68px;

float:left;

text-indent:20px;

border-radius:5px;

}

.searchBox form input[type="submit"]{

display:inline-block;

width:68px;

height:68px;

background:url(../img/icon/searchicon.png) no-repeat center;

}

/*特惠房源*/

.oddsBox{

width:1400px;

margin:30px auto 60px auto;

}

/*标题*/

.oddsBox .title p,.wantgoBox .title p,.ensureBox .title p{

width:200px;

height:40px;

line-height:40px;

text-align:center;

background:#00848A;

color:#fff;

font-size:22px;

float:left;

}

.oddsBox .title span,.wantgoBox .title span,.ensureBox .title span{

font-size:22px;

display:inline-block;

float:left;

height:40px;

line-height:40px;

padding-left:10px;

color:#00848A;

}

.oddsBox .title span i{

display:inline-block;

font-style:normal;

padding:0 5px;

}

.content{

clear:left;

height:800px;

padding-top:40px;

box-sizing:border-box;

}

.content .list .list_nav{

display:inline-block;

width:100px;

height:46px;

line-height:46px;

text-align:center;

background:#fff;

box-shadow: 0 0 4px 0 #ccc;

border-radius:5px;

box-sizing:border-box;

margin-right:80px;

cursor:pointer;

}

.content .list .list_nav:last-child{

margin-right:0;

}

.content .list .current_option{

background:#00848A;

color:#fff;

}

/*城市对应的房源信息*/

.productBox{

width:100%;

margin:10px 0;

clear:both;

display:none;

}

.on{

display:block;

}

.infoBox{

width:340px;

height:350px;

float:left;

margin:20px 13px 0 0;

}

/*nth-child(n)”是css中的一个选择器,作用是:匹配属于其父元素的第N个子元素,不论元素的类型*/

.infoBox:nth-child(4){

margin-right:0;/*[ˈmɑːdʒɪn raɪt]设置右边距*/

}

.infoBox p:first-child{

width:334px;

height:222px;

border:2px solid #fff;/*英[ˈbɔːdə(r)]边框,soild实线*/

overflow:hidden;/*əʊvəˈfləʊ 漫出,ˈhɪdn隐匿*/

border-radius:10px;/*边框圆角*/

}

/*有问题*/

.infoBox p:first-child img{

width:100%;

height:100%;

cursor:pointer;/*cursor英[ˈkɜːsə(r)]光标，pointer英ˈpɔɪntə(r)*/

}

.title{

font-size:16px;

margin:8px 0;

}

.infoBox span{

font-size:12px;/*英[fɒnt saɪz]用于设置字体大小*/

}

.infoBox p s{

margin:0 10px;

}

.infoBox ul{

margin:10px 0;

}

.infoBox ul li{

float:left;

font-size:1px;

}

.infoBox ul li img{

margin-right:15px;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</nav>

</div>

<ul>

</ul>

</div>

</form>

</div>

<p>秋季特惠房源</p>

</div>

</ul>

<p class="title">北京壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">北京壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

<p class="title">壹舍•墨绿轻奢感ins、老城根、邻近地铁一居室</p>

<ul>

</ul>

</div>

</body>

</html>

宝舟数码15850554583 2022-11-02

源自：第1天：倾慕客栈网页布局 2-7 导航条布局

收起

1回答

好帮手慕星星 2022-11-03 09:40:18

同学你好，测试代码显示如下，第二张城市图片指的是这里吗？

如果是的话，这边没问题，建议重新测试下。如果不是这里，建议说明具体一些，便于帮助解决。

祝学习愉快！

收起回答

提问者宝舟数码15850554583 #1

是第二城市，不是第二张照片，这个里面无法显示第二个城市的照片

2022-11-03 16:35:27
好帮手慕星星回复提问者宝舟数码15850554583 #2

老师明白了。不显示第二个城市照片是正常的，代码中设置了隐藏
一般需要通过JavaScript交互完成，例如点击‘上海’切换到对应的图片区域。这里了解下即可，等自己学了JavaScript就可以完成。

2022-11-03 16:50:10