请老师检查~还想请教下：为左区块设置与页面左边的距离，用什么方法比较好（如图）？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{list-style:none;}
.header{
height:100px;
width:100%;
background:black;
}
.nav{
float:right;
}
.nav li{
float:left;
color:white;
font-size:20px;
margin-right:40px;
line-height:100px;
}
.container{
height:700px;
width:100%;
background:blue;
overflow:hidden;
zoom:1;
}
.left{
float:left;
width:50%;
margin-top:100px;
}
.left ul{
position:absolute;
margin:50px 200px;
line-height:300%;
}
span{
background:pink;
}
.right{
float:left;
width:50%;
margin-top:100px;
}
.right ul{
position:absolute;
margin:50px 200px;
line-height:300%;
}
.footer{
height:110px;
width:100%;
background:black;
}
.ful{
position:relative;
left:50%;
margin-left:-340px;
}
.ful li{
font-size:20px;
color:white;
float:left;
margin-right:40px;
line-height:110px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="container">
<div class="left">
<ul>
<li><h3>课程推荐</h3></li>
<li><span>职业路径</span> HTML5与CSS3实现动态太网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> iOS基础语法与常规控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<ul>
<li><h3>相关课程</h3></li>
<li><p>HTML CSS JavaScript</li>
<li><p>HTML5 CSS3 Jquery</li>
<li><p>移动端基础 移动端App开发</li>
</ul>
</div>
</div>
<div class="footer">
<ul class="ful">
<li>网站首页</li>
<li>企业招聘</li>
<li>人才合作</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答
你好同学:
测试了你的代码,发现底部居中显示有一点小问题,可参考下图所示思路修改代码:
关于左边部分内容设置与页面左边的距离同学使用margin,或者padding都是可以实现效果的,代码是灵活不唯一的,实现效果会有很多种不同的方式,需要根据项目的需求进行选择,同学可以尝试一下不同的方式进行实现效果哦~
祝学习愉快!
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星