老师帮忙看一下，哪里有需要改进
来源：2-12 编程练习
南笙追梦
2020-09-29 17:10:57
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{text-decoration: none;}
li{list-style-type: none;}
.head_nav{
width: 100%px;
height: 100px;
background-color: black;
overflow: hidden;
}
.loger img{
margin-left: 40px;
display: block;
float: left;
}
.ul_li{
float: right;
overflow: hidden;
}
.first_ul li{
float: left;
line-height: 100px;
}
.first_ul li a{
margin-right: 70px;
color: #FFFFFF;
}
.border{
width: 100%;
background-color: #4EFEB3;
height: 400px;
overflow: hidden;
position: relative;
}
.Left_FirstText_li li span{
background-color: blue;
}
.first_h{margin-bottom: 10px;}
.left_text{
position: relative;
}
.first_h{position: absolute;
margin-top: 80px;
margin-left: 110px;}
.Left_FirstText_li{
position: absolute;
margin-top: 130px;
margin-left: 100px;
}
.border .right_text .second_h{
position: relative;
margin-bottom: 25px;
}
.border .right_text {
position: absolute;
margin-top: 80px;
margin-left: 450px;
}
.left_text{position: relative;}
.center_photo{
width: 10px;
height: 400px;
background-color: orange;
position: absolute;
margin-left: 800px;
}
input{display: block;
margin-left: 400px;
}
.border .right_text .third_h{
display: inline-block;
margin-top: 0px;
margin-left: 450px;
}
.border .right_text .Btn_DL{
width: 170px;
height:auto 0;
background-color: orange;
color: #FFFFFF;
}
.footer_nav{
background-color: black;
width: 100%;
height: 100px;
bottom: 0;
overflow: hidden;
}
.footer_nav .footer_ul {
overflow: hidden;
}
.footer_nav .footer_ul .footer_li li{
float: left;
padding: 0 70px;
line-height: 100px;
}
.footer_nav .footer_ul .footer_li li a{
color:#FFFFFF;
}
</style>
</head>
<body>
<div class="contrent">
<div class="head_nav">
<div class="loger">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="ul_li">
<ul class="first_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>
<div class="border">
<div class="left_text">
<h3 class="first_h">课程推荐</h3>
<ul class="Left_FirstText_li">
<li><span>职业路径</span> <a href="#">Html与CSS3实现网页效果</a></li><br/>
<li><span>职业路径</span> <a href="#">零基础开发与页面效果</a></li><br/>
<li><span>职业路径</span> <a href="#">ios基础语法与实现效果</a></li><br/>
<li><span>职业路径</span> <a href="#">PHP入门开发</a></li><br/>
<li><span>职业路径</span> <a href="#">java入门开发</a></li><br/>
</ul>
</div>
<div class="right_text">
<h3 class="second_h">相关课程</h3>
<ul class="right_SecondText_li">
<li><a href="#"><span>HTML</span> <span>CSS</span> <span>javascript</span></a></li><br/>
<li><a href="#"><span>HTML5</span> <span>js</span> <span>jqurey</span></a></li><br/>
<li><a href="#"><span>移动端基础</span> <span>移动端基础APP开发</span></a></li><br/>
</ul>
</div>
<div class="center_photo"></div>
<div class="right_text">
<h3 class="third_h">登录</h3><br/><br/>
<input type="text" name="Name" placeholder="请输入登录邮箱或手机号"><br/>
<input type="password" name="Pwd" placeholder="6—18位密码，区分大小写，不可有空格"><br/>
<input type="button" name="Button" value="登录" class="Btn_DL">
</div>
</div>
<div class="footer_nav">
<div class="footer_ul">
<ul class="footer_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>
<li><a href="#">友情合作</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码中问题如下：
1、顶部导航的样式可以优化：
2、中部内容的宽度可以调整一下，例如:左中两侧占60%，右侧内容占40%;
3、右侧的表单部分，样式可以优化，如下：
4、底部的导航没有实现水平居中，建议优化：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题