我总觉得代码怪怪的，老师帮我看看
来源：2-10 编程练习
慕虎1077541
2020-04-18 03:42:13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{
margin:0;
padding:0;
list-style: none;
}
.head{
width:100%;
height: 100px;
background: black;
position: sticky;
top:0px;
}
.leftdiv{
float:left;
font-size: 0px
}
.list{
float:right;
margin-left: 150px;
}
.list ul{
height: 100px;
color: #fff;
font-size: 0px;
list-style: none;
}
.list li{font-size:25px;
float: left;
margin-right: 60px;
line-height: 100px;
}
.body{
height: 1200px;
background: blue;
}
.body1{
margin-left: 10%;
margin-top: 10%;
float: left;
width: 40%;
font-size: 20px;
font-family: "微软雅黑"；
margin-left: 50px;
}
.body2{
margin-top:10%;
margin-right: 10%;
float: right;
width: 40%;
font-size: 20px;
font-family: "微软雅黑"；
}
.course{
line-height: 50px;
}
.bgred{
background: pink;
}
.foot{
width:100%;
height: 100px;
background: black;
position: sticky;
top:0px;
bottom: 0px;
text-align: center;
}
.foot ul{
display:inline-block;
color: #fff;
list-style: none;
font-size: 0px;
}
.foot ul li{
float: left;
margin-right: 40px;
font-size: 20px;
line-height: 100px;
}
img{display: block;}
a:link{
text-decoration: none;
color: #fff
}
</style>
</head>
<body>
<div class="head">
<div class="leftdiv">
<a href=""><img class="logo" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a>
</div>
<div class="list">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="body">
<div class="body1">
<h3>课程推荐</h3>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
</div>
<div class="body2">
<h3>课程推荐</h3>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
<div class="course"><span class="bgred">职业路径 </span><a>HTML与CSS3实现动态网页<br/></a></div>
</div>
</div>
<div class="foot">
<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>
<!-- 此处写代码 -->
</body>
</html>写回答
1回答
-
好帮手慕言
2020-04-18
同学你好，代码中符号写的有问题，正确的应该是输入法为英文状态下的分号。另外：margin-left已经设置过了，下方的可以去掉。如下：
整体效果实现的是可以的，只要再根据效果图调整下字体颜色、背景颜色和主体区域右侧的文字内容即可。祝学习愉快~
0
相似问题