老师帮我查看下作业效果
来源：2-10 编程练习
哈哈9730504
2020-03-01 18:07:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: fixed black no-repeat center;
margin: 0 auto;
overflow: hidden;
position: fixed;
top: 0;
z-index: 9999;
}
a{
color: white;
text-decoration: none; }
.header ul{
overflow: hidden;
float:right;
margin: 0 auto;
}
li{
float: left;
margin:0 30px;
line-height: 100px;
list-style-type:none;}
.container{
width: 100%;
height: 1000px;
background: lightblue;
text-align: center;
overflow: hidden;
z-index: 1;}
h3{
width: 50d%;
margin: 0 auto;}
.one,.two{
width: 50%;
float: left;
}
span{
margin-left: 5px;
}
table{
margin: 0 auto;
text-align:left;
position: relative;
top: 100px;
}
td{
display: inline-block;
margin: 5px;
}
.redd{
background-color: lightcoral;
}
.bgz{
position: relative;
top: 105px;
}
span{
display: inline-block;
padding: 7px;
margin-top: 8px;
}
.footer{
background: black center;
text-align: center;
height: 100px;
width: 100%;
position: fixed;
bottom: 0;
}
.footer ul{
display: inline-block;
}
.footer ul li{
line-height: 100PX;
margin: 0 30px;
}
</style>
</head>
<body>
<!--页头-->
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
<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 class="container">
<div class="one">
<table>
<tr>
<td style="font-size: 23px;">课程推荐</td>
<td></td>
</tr>
<tr>
<td class="redd">职业路径</td>
<td>HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td class="redd">职业路径</td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td class="redd">职业路径</td>
<td>IOS基础语法与常用控件</td>
</tr>
<tr>
<td class="redd">职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr>
<td class="redd">职业路径</td>
<td>JAVA入门</td>
</tr>
</table>
</div>
<div class="two">
<div class="bgz">
<p style="font-weight: bold;">相关课程</p>
<span>HTML</span> <span>CSS</span> <span>JavaScript</span><br/>
<span>HTML5</span> <span>CSS3</span> <span>Jquery</span><br/>
<span>移动端基础</span> <span>移动端APP开发</span>
</div>
</div>
</div>
<!--页尾-->
<div class="footer">
<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-03-01
同学你好， 整体效果实现的不错，需要注意的问题如下所示：
如下图所示位置，代码书写有误，建议修改：
如下所示，中间内容距离上方间距有点小，效果不美观。
建议优化：给中间内容添加上内填充，调整间距
建议优化：调整“相关课程”标题与下方的文字左对齐显示，效果实现会更好。
（1）去掉外层盒子的text-align属性，让文字默认居右显示。
（2）去掉span元素的左侧边距，通过设置右边距实现元素之间的空白间距效果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题