2-6编程练习

来源：2-8 经典的两列布局

shi3476202

2017-08-22 20:19:16

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行布局网页</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        /*页头*/
        #header{
            width:100%;
            height:100px;
            color:white;
            background-color:#000000;
            position:fixed;
            top:0;
        }
        /*logo*/
        img{
            cursor:pointer;
        }
        /*导航栏*/
        .nav{
            float:right;
            text-align:center;
        }
        .nav-list{
            list-style:none;
        }
        .nav-list li{
            float:right;
        }
        .nav-list li a{
            display:block;
            height:100px;
            color:white;
            text-decoration:none;
            line-height:100px;
            padding:0 30px;
        }
        .nav-list li:hover a{
            background-color:#1F2225;
        }
        /*banner*/
        .banner{
            padding-top:100px;
            /*不能设置margin，header固定的位置从banner的内填充开始*/
        }
        .content2{
            padding-bottom:60px;
        }
        /*页脚*/
        #footer{
            width:100%;
            height:60px;
            color:white;
            background-color:#000000;
            position:fixed;
            bottom:0;
        }
        .footer_link {
            float:left;
            padding:0 443px;
        }
        /*页脚链接*/
        .footer_link ul{
            list-style:none;
        }
        .footer_link ul li{
            float:left;
        }
        .footer_link ul li a{
            display:block;
            height:60px;
            line-height:60px;
            margin-right:30px;
            text-decoration:none;
            color:#C8CDD2;
        }
        .footer_link ul li a:hover{
            color:white;
        }
    </style>
</head>
<body>
    <div id="header">
        <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" title="首页"/>
        <div class="nav">
            <ul class="nav-list">
                <li><a href="#">手记</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">实战</a></li>
                <li><a href="#">职业路径</a></li>
                <li><a href="#">课程</a></li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/>
    </div>
    <div class="content1">
        <img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
    </div>
    <div class="content2">
        <img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/>
    </div>
    <div id="footer">
        <div class="footer_link">
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">企业合作</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

怎么让页脚的链接居中不受缩放的影响

写回答

2回答

好帮手慕糖

2017-08-23

已采纳

你好，这里可给ul设置固定的宽，然后使用margin:0 auto;来实现居中，整体的底部可参考下列代码：

#footer{
    width:100%;
    height:60px;
    color:white;
    background-color:#000000;
    position:fixed;
    bottom:0;
}
.footer_link ul{
  width: 376px;
  margin:0 auto;
}
.footer_link ul li{
    float:left;
    list-style:none;
    line-height:60px;
    margin:0 15px;
}
.footer_link ul li a{
    text-decoration:none;
    color:#C8CDD2;
}
.footer_link ul li a:hover{
    color:white;
}

（2）主体部分的图片没有实现宽度100%，建议：添加width:100%;属性

祝学习愉快~

hhi3476202

h 非常感谢老师解答并指出问题~

h017-08-23

共1条回复