老师，请检查 那些需要改进
来源：2-10 编程练习
SJ丶Peng
2019-06-28 16:10:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
div.nav{width:100%;height:100px; background-color:black;overflow: hidden; position: fixed;top: 0px;left: 0px;min-width: 1280px;}
div.logo{float:left;}
div.nav_ul{float:right;}
div.nav_ul li{display:inline-block; margin:5px 50px;line-height: 50px;}
a{color:white;text-decoration: none;}
div.continue{width :100%;padding-top: 90px;margin: 0px;left: 0px;padding-bottom: 90px;min-width: 1280px;}
div.left{width:40%; text-align: left;margin:10% 0 10% 20%;float: left;min-width: 500px;}
div.right{width:30%; text-align: left;margin:10% 10% 10% 0;float: right;min-width: 300px;}
div.right table td{text-align:justify;}
div.right span{display: inline-block; margin: 5px 30px;font-size: 16px;line-height: 3em;}
div.left ul li{ list-style-type: none; list-style-position:inside;font-size: 16px; line-height: 3em;}
div.left ul li span{background-color: pink;}
div.wei{width:100%;height:100px;background-color: black;text-align: center;position: fixed;bottom: 0px;left: 0px;min-width:1280px;}
div.wei li{display:inline-block; margin:5px 50px;padding:0 30px; line-height: 50px;}
</style>
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="logo">
<a href="#nowhere"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
</div>
<div class="nav_ul">
<ul>
<li><a href="#nowhere">课程</a></a></li>
<li><a href="#nowhere">职业路径</a></li>
<li><a href="#nowhere">实战</a></li>
<li><a href="#nowhere">猿问</a></li>
<li><a href="#nowhere">手记</a></li>
</ul>
</div>
</div>
<div class="continue">
<div class="left">
<table>
<tr>
<td><h3> 课程推荐</h3></td>
</tr>
<tr>
<td>
<ul>
<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>
</td>
</tr>
</table>
</div>
<div class="right">
<table>
<tr>
<td><h3> 相关课程</h3></td>
</tr>
<tr>
<td><span>HTML</span><span>CSS</span><span>JavaScript</span></td>
</tr>
<tr>
<td><span>HTML5</span><span>CSS3</span><span>Jquery</span></td>
</tr>
<tr>
<td><span>移动端基础</span><span>移动端App开发</span></td>
</tr>
</table>
</div>
</div>
<div class="wei">
<ul>
<li><a href="#nowhere">网站首页</a></a></li>
<li><a href="#nowhere">企业合作</a></li>
<li><a href="#nowhere">人才招聘</a></li>
<li><a href="#nowhere">联系我们</a></li>
<li><a href="#nowhere">常见问题</a></li>
<li><a href="#nowhere">友情链接</a></li>
</ul>
</div>
</body>
</html>写回答
1回答
-
同学你好， 可参考下面的
多写了一个style标签， 导致后面统配符设置的样式没有生效， 建议修改：
如下图所示， 由于img标签自带间距，导致logo区域的高处超出了顶部栏高度。
建议修改: 可以给图片设置display:block;消除这种影响
如下图所示， 导航项没有完全垂直居中显示
建议修改： 可以给li设置行高和顶部高度一致，实现文字垂直居中， 另， 不需要设置上下外边距
如下图所示，可以删除标题前面的空格，让标题和文字左对齐显示
可以给中间部分的右侧内容设置右外边距，实现空白间距的效果
页脚部分，可以设置行高和底部高度一致， 另， 可以不设置margin值
同学在编写代码的过程中要细心一点哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~~
0
相似问题