标题:为什么banner地下的div被banner挡住了一部分,怎么解决
只看楼主
随风晨爱
Rank: 1
等 级:新手上路
帖 子:27
专家分:2
注 册:2017-6-1
结帖率:91.67%
 问题点数:0 回复次数:2 
为什么banner地下的div被banner挡住了一部分,怎么解决

html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/css.style.css">
<title>商业网站</title>
</head>
<!----------------------导航部分----------------------------->
<ul class="nav">
    <li class="logo">LOGO</li>
    <li class="xuanzhong">网站首页</li>
    <li>关于我们</li>
    <li>新闻中心</li>
    <li>产品展示</li>
    <li>客户案例</li>
    <li>给我留言</li>
    <li>人才招聘</li>
    <li>联系我们</li>
</ul>
<!-----------------------banner----------------------------->
<div class="banner">

    <img src="img/banner.png" alt="">

</div>
   
   
   
<!-----------------------about us--------------------------->
<div class="aboutus">
    <div class="tittle">关于我们</div>
</div>
        
<body>
</body>
</html>


css:
@charset "utf-8";
/* CSS Document */
body {
    margin: 0 auto;
    padding: 0;
}
/************************导航栏****************************/
.nav{
    width: 1240px;
    heigh: 133px;
    margin: 0 auto;
    font-family: "microsoft yahei";
}
.nav li {
    list-style: none;
    float: left;
    width: 107px;
    height: 100%;
    line-height: 133px;
    text-align: center;
    font-size: 18px;
    color: #333;
}
.nav .logo {
    width: 363px;
    height: 100%;
    font-size: 64px;
    color: #0c53ad;
    font-family: "microsoft yahei";
}
.nav .xuanzhong{
    background-color: #1040A8;
    color: #fff;
}
/***********************banner******************************/
.banner {
    width: 100%;
    height: 508px;
    margin: 0 auto;
   
}
.banner img {
    margin: 0 auto;
}


/***********************about us*************************/

.aboutus {
    width: 1162px;
    height: 445px;
    margin: 0 auto;
    border-bottom: 6px solid #1566c1;
    background-color: aqua;
}



搜索更多相关主题的帖子: div html css auto class 
2020-05-20 22:32
lihuahao哈
Rank: 2
等 级:论坛游民
威 望:1
帖 子:27
专家分:39
注 册:2018-11-17
得分:0 
可能图片本身大小太高了,设置图片宽高100%试试?

不懂就问,我也想变强!
2020-06-09 23:35
shuanghan
Rank: 1
等 级:新手上路
帖 子:3
专家分:0
注 册:2020-7-2
得分:0 
指出两点问题吧:1. css 中的 .nav 的高度拼写错误 2. 你的图片包裹在容器中,容器高度固定,但是图片大小超过了容器,如果给容器设置 overflow: hidden 你会发现图片被裁切掉了。如果要图片都显示出来,可以给图片设置宽度 100% 自适应,然后高度不限制,这里写法有很多种,可根据需要去调整
2020-07-02 13:22



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-501703-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.212622 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved