请问老师，我这个写的有没有问题？
<!-- 双飞翼布局 --><!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} body{min-width: 700px;} .header,.footer{ border: 1px solid #333; background: #ff9999; text-align:center; height: 50px; line-height: 50px; } .sub,.main,.extra{ float: left;min-height: 130px; line-height: 130px;text-align: center; } .sub{ margin-left: -100%;width: 200px;background:#99ffff ; } .extra{ margin-left: -220px;width: 220px;background: red; } .main{width: 100%;} .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 130px; background: #ccff99; word-break: break-all; } </style></head><body> <div class="header"> <h4>header</h4> </div> <div class="main"> <div class="main-inner"> <h4>main</h4> </div> </div> <div class="sub"> <h4>sub</h4> </div> <div class="extra"> <h4>extra</h4> </div> <div class="footer"> <h4>footer</h4> </div></body></html> -->
<!-- 圣杯布局 --><!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} body{min-width: 700px;} .header,.footer{ background: #ff9999; text-align: center; height:50px ; line-height: 50px; } .left,.middle,.right{ position: relative; float: left; min-height: 130px; line-height: 130px; text-align: center; } .container{ padding: 0 220px 0 200px; overflow: hidden; } .left{ margin-left: -100%;left: -200px;width:200px ;background: red; } .right{ margin-left: -220px;right: -220px;width:220px ;background:blue; } .middle{ width: 100%;background: grey;word-break: break-all; } </style></head><body> <div class="header"> <h4>header</h4> </div> <div class="container"> <div class="middle"> <h4>middle</h4> </div> <div class="left"> <h4>left</h4> </div> <div class="right"> <h4>right</h4> </div> </div> <div class="footer"> <h4>footer</h4> </div></body></html> -->
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*此处写代码*/ *{margin: 0px;padding: 0px;} .header,.footer{ width: 100%; height: 100px; background: black; min-width: 700px; overflow: hidden; } .logo img{ float: left; display: block; } .nav{ float: right; } .nav a:hover{color: orange;} ul li{ line-height: 100px; padding: 0 20px; margin-right: 20px; list-style: none; display: inline; } a{color: blanchedalmond;text-decoration: none;display: inline;} body{ min-width: 700px; font-size: 16px; } .left,.middle,.right{ position: relative; min-height: 500px; float: left; } .container{ padding: 0 300px 0 300px; overflow: hidden; } .middle{ width: 100%; text-align: center; background:pink; word-break: break-all } .left{ margin-left: -100%; left: -300px; width: 300px; line-height: 50px; background: #eee8aa; } span{background: rgb(252, 127, 10);} .right{ margin-left: -300px; right: -300px; width: 300px; background: #3ff; } .middle img{ margin-top: 50px; } .left-nav{ margin-left: 10px;margin-top: 50px; } .right form{margin-top: 50px;line-height: 50px;margin-left: 20px;} .footer{text-align: center;} </style></head><body> <!-- 此处写代码 --> <div class="header"> <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div> <div class="nav"> <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> <div class="container"> <div class="middle"> <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt=""/> </div> <div class="left"> <div class="left-nav"> <h4>课程推荐</h4> <p><span>职业路径</span> HTML5与CSS3实现动态网页</p> <p><span>职业路径</span> 零基础入门安卓语法与界面</p> <p><span>职业路径</span> iOS基础语法与常用控件</p> <p><span>职业路径</span> PHP入门开发</p> <p><span>职业路径</span> JAVA入门开发</p> </div> </div> <div class="right"> <form> <h1>登录</h1> <input style="width: 260px;height: 35px;" type="text" name="username" placeholder="请输入登录邮箱/手机号" class="user"><br/> <input style="width: 260px;height: 35px;" type="password" name="password" placeholder="6-16位密码区分大小写不能用空格" class="pwd"><br/> <input style="width: 260px;height: 35px;background: red;" type="submit" name="submit" value="登录" class="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>
正在回答
同学你好，可以看下display: inline;的效果:
display: inline-block;的效果：
所以相比来说，display: inline-block;的效果更美观。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星