3-3 编程练习 麻烦老师检查一下，谢谢
来源：3-3 编程练习
milmilbaby
2020-09-18 13:36:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{min-width:840px;}
.logo img{display:block;}
a{font-size:18px;font-family:"微软雅黑";text-decoration:none;color:#FFFFFF;}
.header{width:100%;height:100px;background:black;position:relative;}
.title1{position:absolute;right:0;top:0;line-height:100px;}
.title1 a{margin-right:35px;}
.title1 a:hover{color:#FF8C00;}
.container{padding:0 280px;}
.container .left{width:280px;height:625px;background:#FFFACD;padding-left:10px;}
h2{padding-top:100px;padding-bottom:10px;}
li{list-style:none;margin-top:20px;}
.left li a{color:#000000;font-size:13px;}
span{margin-right:20px;background:#FFC0CB;}
.middle{background:#F08080;height:625px;width:100%;}
.middle img{display:block;margin-top:100px;margin-right:auto;margin-left:auto;}
.login{width:280px;height:625px;background:#87CEEB;padding-left:10px;}
input{margin-top:20px;}
.left,.middle,.login{float:left;position:relative;}
.left{margin-left:-100%;left:-280px;}
.login{margin-left:-560px;left:560px;}
.footer{width:100%;height:100px;position:absolute;bottom:0;background:black;}
.title2{line-height:100px;text-align: center;}
.footertitle{margin-right:25px;}
.button input{background:red;color:white;}
</style>
</head>
<body>
<div class="header">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></a></div>
<div class="title1">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="container">
<div class="middle"><img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"/></div>
<div class="left">
<h2><ul>课程推荐</ul></h2>
<li><a href="#"><span>职业路径</span>HTML5与CSS3实现动态网页</a></li>
<li><a href="#"><span>职业路径</span>零基础入门Android语法与界面</a></li>
<li><a href="#"><span>职业路径</span>ISO基础语法与常用控件</a></li>
<li><a href="#"><span>职业路径</span>PHP入门开发</a></li>
<li><a href="#"><span>职业路径</span>JAVA入门开发</a></li>
</div>
<div class="login">
<h2>登陆</h2>
<div><input type="text" placeholder="请输入登陆邮箱/手机号" style=width:220px;height:30px;font-size:10px;/></div>
<div><input type="password" placeholder="6-16位密码，区分大小写，不能用空格" style=width:220px;height:30px;font-size:10px;/></div>
<div class="button"><input type="submit" value="登陆" style=width:224px;height:30px;/></div>
</div>
</div>
<div class="footer">
<div class=title2>
<a href="#" class="footertitle">网站首页</a>
<a href="#" class="footertitle">企业合作</a>
<a href="#" class="footertitle">人才招聘</a>
<a href="#" class="footertitle">联系我们</a>
<a href="#" class="footertitle">常见问题</a>
<a href="#">友情链接</a>
</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码如下优化：
1.元素的实际宽度是包含padding的，代码中，盒子因为设置了padding，实际宽度变大，超出浏览器窗口宽度:
把盒子宽度调整一下：
2.中间的图片建议设置一个宽度更好，另外margin样式合并优化一下：
3.很多样式都写在了标签中，建议css代码与html代码分离，放在内部样式中，更便于代码的阅读和维护。
拿按钮举例子：
去掉行内样式
放在内部样式中
4.登录按钮建议把边框去掉更美观，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1
回答 2