麻烦老师帮我看下作业效果
来源：2-10 编程练习
今日视线
2019-06-28 17:15:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin: 0;padding: 0;color: white;}
.logo{
width: 300px;
height:100px;
float: left;
cursor: pointer;
}
.nav{
position: absolute;
right: 100px;
}
li{
list-style: none;
display: inline;
line-height: 100px;
font-size: 25px;
margin: 0 25px;
}
.content{
height: 100px;
width: 100%;
background:black;
position: absolute;
margin: 0 auto;
position: fixed;
}
.main{
width: 100%;
height: 2000px;
background:#1a5acd;
padding-top: 100px;
}
.contain{
width: 70%;
height: auto;
margin: 0 auto;
}
.left{
width: 50%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.right{
width: 50%;
float: right;
font-size: 20px;
margin-top: 20px;
}
p{
margin-top: 15px;
}
span{
background-color: red;
}
a{text-decoration: none;}
img{
display: block;
margin: 0;padding: 0;
width: 100%;
}
.footer{
width: 100%;
height: 100px;
background: black;
text-align: center;
position: fixed;
bottom: 0;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="content">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
</div>
<div class="nav">
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
</div>
<div class="main">
<div class="contain">
<div class="left">
<h2>课程推荐</h2>
<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 class="right">
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3&bsp;&bsp;Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>老师，这个代码实现效果怎么样呢？还有怎么拉开页面主体两侧的距离呢？
写回答
1回答
-
同学你好！
代码效果实现的是可以的哦~
可优化：（1）这里建议使用li标签包括a标签 用块级包括行内标签
（2）如果是想拉开左右两侧的距离，可以设置一定的margin-right/left值。但是要注意要相应的调小左右两侧的宽度，因为margin-right/left的值也是算在总宽度100%中的
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题