2-9编程练习问题
来源：2-11 经典的三列布局
von_colonel
2017-04-30 15:30:04
截图中的缝隙
编程代码还有什么需要改进的地方吗？ 谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双列布局</title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0
}
a:link,a:visited,a:hover,a:active{
font-size:20px;
font-family:"微软雅黑";
color:#fff;
text-decoration:none;
}
.header{
width:100%;
height:100px;
background:#333;
}
.logo{
float:left;
}
.header img{
width:300px;
}
.header-li{
float:right;
}
.header-li li,.footer-li li{
color:#fff;
list-style:none;
float:left;
margin:30px;
}
.main{
width:100%;
height:100%;
background-color:#42DCC6;
float:left;
}
.main-left{
width:40%;
height:1000px;
background:#42DCC6;
float:left;
}
.main-right{
width:40%;
height:1000px;
background:#42DCC6;
padding:auto;
float:right;
}
.left-content,.right-content{
width:350px;
height:350px;
line-height: 100px;
margin:100px auto;
}
span{
background:red;
}
.footer{
width:100%;
height:100px;
background:#333;
clear:both;
}
.footer-li{
width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo"/>
</div>
<div class="header-li">
<ul>
<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="main">
<div class="main-left">
<div class="left-content">
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法界面</p>
<p><span>职业路径</span> IOS零基础语法与常用控件</p>
<p><span>职业路径</span> PHP开发入门</p>
<p><span>职业路径</span> JAVA开发入门</p>
</div>
</div>
<div class="main-right">
<div class="right-content">
<h3>相关课程</h3>
<p>HTML CSS JavaScript</p>
<p>HTML CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
</div>
<div class="footer">
<div class="footer-li">
<ul>
<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>
<li><a href="">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>
2回答
-
小丸子爱吃菜
2017-04-30
因为logo的图片的高度是104，超过了header的高度100，所以要么将header的高度设置大一些，要么给.main设置一个margin-top值为负值，就可以将空隙给去掉。
可以将主体部分的高度设置的稍微小一些，主体部分的字体可以再适当大一些，这样美观度会更好。
祝学习愉快！
1h017-04-30 -
小丸子爱吃菜
2017-05-02
你可以用画图工具对图片进行测量，也可以在谷歌浏览器中用F12打开控制台去进行查看，控制台如何看，可以自己去查下资料学习下，有问题可以在这里问！
0
