求老师帮我看看哪里要完善的 还有主题和页脚之间有空的是怎么回事??
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;font-size:10px;}
.header{background:black;
width:100%;
height:80px;
display:table;
overflow:hidden;
zoom:1;
color:white;
}
img{float:left;
display:table-cell;
vertical-align:middle;
}
.header ul{
text-align:right;
line-height:80px;
}
.header li{display:inline-block;
margin-right:15px;
}
.tbody{width:100%;height:600px;background:#38B0DE;margin:0 auto;}
span{background:pink;
margin-right:20px;
}
.left{
width:60%;height:600px;
float:left;
}
dd{margin-top:20px;}
.right{width:40%;height:600px;
float:right;
}
dl{position:relative;
top:60px;
left:120px;
}
.right1{position:relative;
top:60px;
}
p{margin-top:20px;}
.footer{width:100%;height:60px;background:black;color:white;
text-align:center;
line-height:60px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实践</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="tbody">
<div class="left">
<dl>
<dt>课程推荐</dt>
<dd><span>职业路径</span>HTML5与CSS的动态</dd>
<dd><span>职业路径</span>HTML5与CSS的动态</dd>
<dd><span>职业路径</span>HTML5与CSS的动态</dd>
<dd><span>职业路径</span>HTML5与CSS的动态</dd>
<dd><span>职业路径</span>HTML5与CSS的动态</dd>
</dl>
</div>
<div class="right">
<div class="right1">
<h3>相关课程</h3>
<p>HTML CSS3 JAVScript</p>
<p>HTML5 CSS3 JQuery</p>
<p>移动基础 移动APP开发</p>
</div>
</div>
</div>
<div class="footer">
<p>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</p>
</div>
</body>
</html>
正在回答
同学你好,造成中间内容跟页脚之间有间距的原因是:在底部的p标签里面添加了margin-top:20px,把它删掉即可,参考下图:
效果基本都实现了,但是有一些细节性的问题,例如字体可以设置大一点,背景颜色可以跟效果图的颜色一致(background:skyblue),自己试一试哦。
如果帮助到了你,欢迎采纳。
祝学习愉快!
同学你好。
1、在.right区域里面,“html5 CSS3”这些内容是由p标签包裹的。在底部里面,底部的信息也是由p标签包裹的。
在css样式里面,直接通过标签名选择器添加了margni-top:20px;造成了所有的p标签都有这个margin-top:20px的样式,所以底部距离中间内容有20px的位置。
实现内容与内容之间的间隙:可以给中间内容的p标签添加一个相同的类名,在通过类名选择器来添加css样式,例如:
2、dd标签包裹在内容里面,并且dd标签没有继承父元素的高度,所以它的高度是由内容撑起来,所以给dd标签添加margin-top:20px,只会更改dd标签的位置。
现在刚接触一个新得领域,熟悉的过程会有些艰辛,同学不要着急,一步一步慢慢来,练习多做几遍,会越来越好的,继续加油!
希望帮助到了你,祝学习愉快!
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星