3-3检查作业。
来源：3-3 编程练习
ZZZZZzn
2020-03-24 12:34:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0; margin: 0px;}
body{margin: 0 auto;}
.one{width: 100%;
height: 100px;
background:black;
overflow: hidden;
*zoom:1;
cursor: pointer;
}
.one img{float: left;}
.one ul{float: right;}
.one ul li{float: left;
margin: 0px 40px;
line-height: 100px;
list-style-type: none;}
.one ul li a{color: #fff; text-decoration-line: none;}
.one ul li a:hover{color: orange;}
.two{ padding: 0 400px 0 400px; overflow: hidden;*zoom:1;}
.two-1,.two-2,.two-3{min-height: 500px;
float: left;
position: relative;
}
.two-1{width: 100%; background:pink; }
.two-2{width: 400px; background:#fcf; }
.two-3{width: 400px; background:#0fc; }
.two-2{margin-left: -100%;left: -400px; }
.two-3{margin-left:-400px;right: -400px;}
.two-2-1{margin-left: 50px; margin-top: 20px;}
.two-2-0{margin-top: 130px;}
.two-2-1 span{background: orange;}
.two-1 img{margin-top: 70px; position: absolute; left: 50%; margin-left: -300px;}
.two-30{margin-top: 130px;}
.two-3-0,.two-3-1,.two-3-2,.two-3-3{display: block; margin-left: 50px; width: 240px;height: 30px;margin-top:20px;}
.two-3-3{background-color: red;color:#fff border:none; width: 244px; height: 36px;}
.three{width: 100%;height: 50px; background:black;}
.three ul{ padding: 0px; text-align: center; margin:0 auto; list-style-type: none;}
.three ul li{display: inline-block; line-height: 50px; margin:0 25px;}
.three ul li a{color: #fff; text-decoration: none;}
.three ul li a:hover{color: pink;}
</style>
</head>
<body>
<!--页头-->
<div class="one">
<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="two">
<div class="two-1">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="two-2">
<div class="two-2-0"></div>
<p><h1 class="two-2-1">课程推荐</h1></p>
<p class="two-2-1"><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p class="two-2-1"><span>职业路径</span> 零基础入门Andiord语法与界面</p>
<p class="two-2-1"><span>职业路径</span> ios基础语法与常用控件</p>
<p class="two-2-1"><span>职业路径</span> PHP入门开发</p>
<p class="two-2-1"><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="two-3">
<div class="two-30"></div>
<p><h2 class="two-3-0">登录</h2></p>
<input type="text" name="denglu" placeholder="请输入登录邮箱/手机号" class="two-3-1"/>
<input type="password" name="mima" placeholder="6-16位密码，区分大小写，不能用空格" class="two-3-2" />
<input type="submit" name="quren" value="登录" class="two-3-1 two-3-3">
</div>
</div>
<!--页脚-->
<div class="three">
<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>
3回答
-
好帮手慕星星
2020-03-24
同学你好，代码中颜色属性后面没有添加分号，导致border去除不生效
所以老师的意思是属性结尾添加分号才可以保证下面的样式生效。
祝学习愉快！
1 -
ZZZZZzn
提问者
2020-03-24
添加分号结尾什么意思啊？老师
0 -
好帮手慕星星
2020-03-24
同学你好，代码布局以及实现效果是可以的，很棒！
优化：
1、登录按钮样式效果图中是没有边框的，可以去掉，然后调整大小和输入框一致
代码中设置了border为none，但是没有生效，是因为上一个样式没有添加分号结尾，导致下一个样式不生效，要注意哦
2、还需要添加一个min-width属性，页面缩小的时候中间内容不会变形
祝学习愉快！
0
