请老师帮我看一下代码中可以优化的地方~谢谢啦
来源：2-12 编程练习
叔叔叔叔_
2019-04-18 19:56:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*去除内外边距，去除链接下划线，去除列表样式*/
*,img{
margin: 0;
padding:0;
text-decoration: none;
list-style-type: none;
}
/*头、主体、尾的最小宽度为1000px（防止窗口缩小时内容重叠，但是产生新问题：水平滚动条只能控制主体部分，头、尾不能滚动）*/
.lead,.body,.foot{
min-width: 1000px;
}
/*导航、尾部字白色*/
.lead,.foot a{
color: white;
}
/*导航条宽自适应，高100px,内容（logo及导航文字）垂直居中显示，背景色黑色，文字颜色白色，绝对定位*/
.lead{
width: 100%;
height: 100px;
line-height: 100px;
background: #000;
position: fixed;
top:0;
z-index:5;
}
/*logo图片在左，图片有鼠标点击效果*/
.img{
position: absolute;
left: 0;
cursor:pointer
}
/*导航项在右*/
.leadCol{
position: absolute;
right: 0;
}
/*导航文字的间距相同：用右外间距实现，导航各项有鼠标点击效果*/
.leadCol span{
margin: 0 40px 0 0;
cursor: pointer;
}
/*主体内容宽度自适应，顶部外边距100px，底部外边距100px（防止上下条内容遮挡主体）,字体微软雅黑*/
.body{
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
font-family: "微软雅黑";
}
/*主体的左、中、线、右内容高度800px，行高2.5em（为了有行间距）*/
.left,.middle,.line,.right{
height: 800px;
line-height: 2.5em;
}
/*左内容占主体？？？%宽度，背景浅蓝，左浮动，上内边距30px*/
.left{
width:45%;
background-color: #CFF;
float: left;
padding-top:30px;
}
/*左内容中的"职业路径"背景色粉色*/
.path{
background-color: pink;
}
/*左、中间内容中的链接显示为黑色*/
.left a,.middle a{
color:black;
}
/*左内容中的整体，设置绝对定位，距父模块左侧150px*/
.moveRight{
position: absolute;
left:150px;
}
/*中间内容占主体25%宽度，背景浅蓝，左浮动，上内边距30px*/
.middle{
width:25%;
background-color: #CFF;
float: left;
padding-top: 30px;
}
/*分隔中、右的竖线：宽度占主体0.5%，背景色橘红，左浮动*/
.line{
width:0.5%;
background-color: #f0a431;
float: left;
}
/*右内容占主体29.5%宽度，背景浅蓝/，右浮动，上内边距30px，相对定位（为了子元素整个内容的绝对定位left距离）*/
.right{
width:29.5%;
background-color: #CFF;
float: right;
padding-top: 30px;
position: relative;
}
/*右内容的表单：行间距（为了input标签间的行距）*/
.right form{
line-height: 3.5em;
}
/*右内容的全部内容的右移：绝对定位（内容与左侧有距离）*/
.moveRightTwo{
position: absolute;
left:60px;
}
/*页脚部分：固定定位，背景黑色，宽自适应，高100px，块位于底部，字垂直居中，在上层,字水平居中*/
.foot{
position: fixed;
background: black;
width: 100%;
height: 100px;
bottom:0px;
line-height: 100px;
z-index: 5;
text-align: center;
}
/*链接去掉下划线，链接间距相同*/
.foot a{
text-decoration: none;
margin: 30px;
}
</style>
</head>
<body>
<!-- 页头部分 -->
<div class="lead">
<div class="img">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="leadCol">
<span>课程</span>
<span>职业路径</span>
<span>实战</span>
<span>猿问</span>
<span>手记</span>
</div>
</div>
<!-- 主体部分 -->
<div class="body">
<div class="left">
<div class="moveRight">
<h3>课程推荐</h3>
<ul>
<li>
<span class="path">职业路径</span>
<a href="#">HTML5与CSS3实现动态网页</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">零基础入门Android语法与界面</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">iOS基础语法与常用控件</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">PHP入门开发</a>
</li>
<li>
<span class="path">职业路径</span>
<a href="#">JAVA入门开发</a>
</li>
</ul>
</div>
</div>
<div class="middle">
<h3>相关课程</h3>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
<div class="line"></div>
<div class="right">
<div class="moveRightTwo">
<h3>登录</h3>
<form action="#" method="get">
<!-- 用户名：style：字体大小+字体；输入框高度3em；宽度200px -->
<input type="text" name="userName" placeholder="请输入登录邮箱/手机号" style="font:10px 微软雅黑;height:3em;width:200px;"><br>
<!-- 密码：style：字体大小+字体；输入框高度3em；宽度200px；最大输入字数 -->
<input type="password" name="psw" placeholder="6~16位密码，区分大小写，不能用空格" style="font:10px arial;height:3em;width:200px;" maxlength="16"><br>
<!-- 登录按钮：style：字体大小+字体；输入框高度30px；宽度200px；背景颜色红色；边框无 -->
<input type="submit" name="submit" value="登录" style="font:15px arial;height:30px;width:200px;background-color:red;border: none;">
</form>
</div>
</div>
</div>
<!-- 页尾部分 -->
<div class="foot">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
1回答
-
同学你好！
顶部导航栏的logo超出了父级容器：
因为img标签是内联元素 内联元素 和内联块元素默认存在间隙，所以img设置为块级元素就可以消除间隙了：
如果帮助到了你 望采纳 祝学习愉快~
1
相似问题