请老师检查哪里可以优化

来源:2-2 编程练习

lily1109

2019-10-23 18:43:24

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>CSS布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        /*此处写代码*/
        .header {
            width:100%;
            height:100px;
        }
        .header img {
            padding-top:10px;
            padding-left:30px;
        }
        .header .logo {
            float:left;
        }
        .header .nav {
            float:right;
            margin-right: 100px;
        }
        .header .nav ul li {
            float:left;
            list-style:none;
            margin-right: 40px;
            height: 100px;
            line-height: 100px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="header">
        <div class="logo">
            <img src="http://climg.mukewang.com/595dd5120001736902000080.png">
        </div>
        <div class="nav">
            <ul>
                <li>前端</li>
                <li>后端</li>
                <li>移动端</li>
                <li>数据库</li>
            </ul>
        </div>
    </div>
</body>
</html>


写回答

2回答

好帮手慕糖

2019-10-23

同学你好,实现效果是可以的,若是添加一个下边框,效果会更好哦,例:

http://img.mukewang.com/climg/5db02f560971cd3505130188.jpg

希望能帮助到你,欢迎采纳。

祝学习愉快!

0
hily1109
h 你好 这里的.header img 是不是也可以用margin-left, margin-top呢?我试了下,效果是一样的,这是为什么呢?
h019-10-23
共1条回复

好帮手慕糖

2019-10-23

同学你好,这里都是可以的哦,padding是调整内容与边框的距离。

margin是设置边框外的距离,但是这个图片没有设置边框,所以内外边距都可以调整其距离哦。

希望能帮助到你,祝学习愉快!


0

0 学习 · 40143 问题

查看课程