作业批改。
来源：3-3 编程练习
qq_命运_szFJMV
2018-12-01 19:36:30
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
body{min-width: 840px;}
.clear:after{
content: "、";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear{zoom:1;}
.header a,.footer a{color:white;}
.main a{color: black;}
a:hover{color:red;}
ul{list-style-type: none;}
a{text-decoration: none;}
.header{
width: 100%;
height: 50px;
background: black;
line-height: 50px;
}
.header li{
float: right;
margin:0 20px;
}
.header img{
float:left;
height: 50px;
}
.main{
height: 500px;
padding: 0 240px 0 300px;
}
.middle,.left,.right{
position: relative;
padding-top: 100px;
float: left;
}
.middle{
width:100%;
height: 500px;
background: #ffc0cb;
}
.middle img{
width: 60%;
padding-left: 140px;
}
span{
margin-right: 10px;
background: pink;
}
.left{
width: 300px;
background: #ffefdb;
margin-left:-100%;
left: -300px;
height: 500px;
font-size: 0.8em;
}
.dingwei1{padding-left: 40px;}
.left li{margin-top:20px; }
.right{
background: #add8e6;
margin-right: -100%;
width:240px;
height: 500px;
font-size:0.8em;
}
form{padding-left: 10px;}
input{
margin-top: 20PX;
height: 35PX;
width: 220PX;
height: 35PX;
font-size: 1em;
}
.submit{
color: white;
background: red;
border: none;
}
.footer{
width: 100%;
height: 50px;
background: black;
position: fixed;
bottom: 0;
}
.footer li{
float: left;
margin:0 20px;
line-height: 50px;
}
.footer ul{
position:absolute;
left: 50%;
margin-left:-312px;
}
</style>
</head>
<body>
<div class="header clear">
<img src="http://climg.mukewang.com/590037f600016ce303000100.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="main clear">
<div class="middle"><img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"></div>
<div class="left">
<div class="dingwei1">
<h1>课程推荐</h1>
<ul>
<li><span>职业路径</span><a href="#">HTML与CSS实现动态网页</a></li>
<li><span>职业路径<a href="#"></span>零基础入门Android语法与界面</a></li>
<li><span>职业路径</span><a href="#">ios基础语法与常用控件</a></li>
<li><span>职业路径</span><a href="#">PHP入门开发</a></li>
<li><span>职业路径</span><a href="#">JAVA入门开发</a></li>
</ul>
</div>
</div>
<div class="right">
<form>
<h1>登录</h1>
<input type="text" name="name" placeholder="请输入用户邮箱/密码"><br>
<input type="password" name="password" placeholder="6~16位字母，区分大小写，不能用空格" maxlength="16" minlength="6"><br>
<input class="submit" type="submit" name="submit">
</form>
</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>
老师为什么提交键不一样，
.left块区可以用其他的方法修改位置吗？
然后代码还有哪些需要改进的地方？
2回答
-
你好同学 , left里面的内容也可以给div.dingwei1设置margin-left:40px . 或者如果同学不想嵌套盒子 , 可以直接给里面的h1,ul设置margin-left , 或者使用定位 , 不过相比起来 同学的方法是比较简单的 . 老师建议使用自己的方式实现即可 .
提交按钮同学是想修改提交按钮上显示的文字内容吗 ? 可以如下设置:
使用value可以设置按钮的文字内容
希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .
0 -
好帮手慕夭夭
2018-12-02
你好同学 ，是说的提交按钮宽度与上面的输入框宽度不一样吗 ?因为输入框有一个2px的宽度 ，所以总体的宽度需要加上左右边框各2px ,宽度就不按钮大4px ,可以如下给提交按钮设置一个宽度使其与输入框宽度保持一致：
图片可以如下设置居中：
去掉padding-left
给图片容器设置内容居中：
不知道同学说的left修改位置具体什么 ？是里面的内容吗 ？请在详细描述一下 。便于老师准确的进行解答。祝学习愉快 ！
0h018-12-02
相似问题