老师想请问下我的代码有什么需要改进的地方吗图是网上找的谢谢

这是CSS.CSS中的：

padding: 0;

margin: 0;

}

header{

background-color: #07cbc9;

width: 100%;

overflow: hidden;

}

.one {

width: 1200px;

margin: 20px auto;

height: 80px;

}

.logo {

float: left;

height: 80px;

}

nav {

float: right;

line-height: 80px;

}

li {

list-style: none;

color: white;

float: left;

font-size: 16px;

margin-right: 20px;

}

.logo img {

width: 100%;

height: 100%;

}

这是html中的：

</head>

<body>

</div>

<nav>

<ol>

<li>ABOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ol>

</nav>

</div>

</header>

</body>

谢谢老师

慕仙0240544 2022-06-16

源自：浮动与定位 4-4 自由编程

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2022-06-17 09:47:02

同学你好，logo图的大小、样子会影响页面效果，老师给同学提供一张，同学下载一下看看能不能用：

使用正确图片后，代码可做如下优化：

1、.one整体居中就可以了，不用设置上下间距：

2、logo图，按照原始大小显示就行，可以设置上间距，让其垂直居中：

3、可以把最后一项导航的右间距去掉，让其紧挨版心右侧显示：

祝学习愉快！

收起回答

慕仙0240544 提问者 #1

老师想请问下为什么对脱离了文档流的元素margin固定值有用 auto却没用

2022-06-17 14:30:24
好帮手慕久久回复提问者慕仙0240544 #2

因为margin：0 auto针对的就是“处于文档流中的元素”，它的底层原理决定它对“脱离文档流的元素”无效。至于底层原理具体是怎么实现的，不需要关注，主要记住margin：0 auto的作用是什么、针对什么有效就行了。

2022-06-17 15:39:31