请问代码是否正确
来源:3-3 编程练习
mogu54mogu
2019-05-11 17:31:29
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ margin: 0; padding: 0; font-family: "微软雅黑"; text-decoration: none; } body{ min-width: 700px; } .header{ width: 100%; height: 100px; background-color: black; position: fixed; top: 0; } .logo{ float: left; } .logo nav{ display: block; } .nav{ float: right; line-height: 100px; font-size: 30px; } .nav span{ margin: 0 50px; color: white; } .nav span:hover{ color: orange; } .container{ height: 900px; padding:0 300px 0 420px; margin-top: 100px; } .left,.middle,.right{ position: relative; float: left; /*min-height: */ } .middle{ width: 100%; height: 800px; background-color: #FF99CC; text-align: center; padding-top: 100px; } .left{ width:400px; height: 800px; background-color: #FFCC99; margin-left: -100%; left:-420px; padding: 100px 0 0 20px; line-height: 3em; } .left span{ background-color: #FF9999; margin-right: 1em; } .right{ width: 280px; height: 800px; background-color: #99CCFF; margin-left: -300px; right: -300px; padding:100px 0 0 20px; } .right input{ width: 250px; height: 50px; margin-top: 20px; border: none; line-height: 50px; } .special{ color: white; background-color: red; font-size: 20px; } .footer{ width: 100%; height: 100px; background-color: black; position: fixed; bottom: 0; font-size: 20px; text-align: center; line-height: 100px; } .footer span{ color: white; margin: 0 50px; } </style> </head> <body> <div> <div class="header"> <div class="logo"> <img src="http://climg.mukewang.com/590037f600016ce303000100.png"> </div> <div class="nav"> <a href="#"><span>课程</span></a> <a href="#"><span>职业路径</span></a> <a href="#"><span>实战</span></a> <a href="#"><span>猿问</span></a> <a href="#"><span>手记</span></a> </div> </div> <div class="container"> <div class="middle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"> </div> <div class="left"> <h1>课程推荐</h1> <p><span>职业路径</span>职业路径具体内容职业路径具体内容</p> <p><span>职业路径</span>职业路径具体内容职业路径具体内容</p> <p><span>职业路径</span>职业路径具体内容职业路径具体内容</p> <p><span>职业路径</span>职业路径具体内容职业路径具体内容</p> <p><span>职业路径</span>职业路径具体内容职业路径具体内容</p> </div> <div class="right"> <h1>登录</h1> <form> <input type="text" name="usrnamne" placeholder=" 请输入登录邮箱/手机号"><br> <input type="password" name="password" placeholder=" 6~16位密码,区分大小写,不能用空格"><br> <input type="button" name="login" value="登录" class="special"> </form> </div> </div> <div class="footer"> <a href="#"><span>网站首页</span></a> <a href="#"><span>企业合作</span></a> <a href="#"><span>人才招聘</span></a> <a href="#"><span>联系我们</span></a> <a href="#"><span>常见问题</span></a> <a href="#"><span>友情链接</span></a> </div> </div> </body> </html>
1回答
好帮手慕星星
2019-05-11
你好,代码实现效果很棒哦。
继续加油~