请老师批改2-11编程练习
来源：2-12 编程练习
yjw123
2017-09-25 22:53:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0px;margin:0px;font-family: "微软黑体";}
.header{width:100%;background: black;}
.nav{float:right;line-height:100px;}
a{font-size: 25px;
text-decoration: none;
margin-right:30px;
color:white;
}
.main{width:100%;height: 450px;background: #7ecef4;}
.main1{
width:30%;
height: 450px;
font-size: 20px;
line-height: 40px;
float:left;
position: relative;
}
.div1{
position: absolute;
top:50px;
left:70px;
}
.main2{
width:29%;
height: 450px;
font-size: 20px;
line-height: 40px;
border-right: 10px solid orange;
float: left;
position: relative;
}
.div2{
position: absolute;
top:50px;
left:70px;
}
.main3{
width:40%;
height: 450px;
line-height: 60px;
float:right;
position: relative;
}
.div3{
position: absolute;
top:50px;
left:70px;
}
input{width:250px; height:40px;font-size: 12px}
.red{background: red;color:white;font-weight: bold;}
.footer{
width:100%;
height: 80px;
background: black;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png" alt="">
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="main">
<div class="main1">
<div class="div1">
<h3>课程推荐</h3>
<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>
<div class="main2">
<div class="div2">
<h3>相关课程</h3>
<p>HTML CSS JavaScript</p>
<p>HTMl5 CSS3 Jquery</p>
<p>移动端基础 移动端App开发</p>
</div>
</div>
<div class="main3">
<div class="div3">
<h3>登录</h3>
<table>
<input type="text" placeholder="请输入登录邮箱/手机号"> <br>
<input type="text" placeholder="6-16位密码,区分大小写,不能用空格"> <br>
<input type="submit" value="登入" class="red">
</table>
</div>
</div>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
1回答
-
效果完成的还可以，有以下几个问题可以调整下：
1、右侧表单的按钮将border设置为none会更好。
2、布局应该是课程推荐、相关课程、分割线、右侧登录框，将分割线独立成一个跟它们平级的元素，不要作为右边框，作为右边框去修改样式以及设置别的样式会受到影响，比较麻烦。
3、整体的高度可以设置的再大一些。
祝学习愉快！
0h017-09-26
相似问题