<html><head>? <meta charset="UTF-8">? <title></title>? <style type="text/css">? ? ? ? *{? ? ? ? ?margin:0;? ? ? ? ?padding:0; ?}? ? ? ? .header{background:black;width:100%;height:100px;min-width:900px;}? ? ? ? .header-1{float:left;}? ? ? ? .header-2{float:right;}? ? ? ? .header ul li{display:inline;}? ? ? ? .contin{padding:0 180px 0 220px;height:700px;}? ? ? ? .middle{width:100%;height:700px;background:pink;position:relative;float:left;min-width:500px;}? ? ? ? .middle img{width:400px;height:500px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-200px;}? ? ? ? .left{float:left;background:yellow;height:700px;width:300px;position:relative;left:-220px;margin-left:-100%;text-align:center;}? ? ? ? .left-1{height:120px;position:relative;top:20%;}? ? ? ? .left-1 h2{position:relative;left:-50px;}? ? ? ? .right{float:left;background:blue;width:180px;height:700px;position:relative;right:-180px;margin-left:-180px;text-align:center;}? ? ? ? .right div{position:relative;top:120px;}? ? ? ? span{background:pink;}? ? ? ? .left ul li{margin-left:3px;margin-bottom:25px;list-style-type:none;}? ? ? ? input{width:150px;height:40px;margin-top:20px;}? ? ? ? .d22{background:red;}? ? ? ? .right_1text h2{position:relative;left:-50px;}? ? ? ? .footer{background:green;width:100%;height:100px;text-align:center;}? ? ? ??? ? ? ? .footer ul li{display:inline-block;line-height:100px;}? ? ? ? .footer ul li a{text-decoration:none; }? ? ? ??? ? /*此處寫代碼*/? </style></head><body>? ? <div class="header">? ? <div class="header-1"><img src="http://climg.mukewang.com/590037f600016ce303000100.png" /></div>? ? <div class="header-2">? ? ? ? <ul>? ? ? ? ? ? <li>手記</li>? ? ? ? ? ? <li>猿問</li>? ? ? ? ? ? <li>實戰(zhàn)</li>? ? ? ? ? ? <li>職業(yè)路徑</li>? ? ? ? ? ? <li>課程</li>? ? ? ? </ul> ? ? ??? ? </div></div>? ? <div class="contin">? ? ? ? <div class="middle">? ? ? ? ? ? <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">? ? ? ? </div>? ? ? ? <div class="left">? ? ? ? ? ? <div class="left-1">? ? ? ? ? ? ? ? <h2>課程推薦</h2>? ? ? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? ? ? <li><span>職業(yè)路徑</span>HTML5和CSS3實現(xiàn)動態(tài)網(wǎng)頁</li>? ? ? ? ? ? ? ? ? ? <li><span>職業(yè)路徑</span>HTML5和CSS3實現(xiàn)動態(tài)網(wǎng)頁</li>? ? ? ? ? ? ? ? ? ? <li><span>職業(yè)路徑</span>HTML5和CSS3實現(xiàn)動態(tài)網(wǎng)頁</li>? ? ? ? ? ? ? ? ? ? <li><span>職業(yè)路徑</span>HTML5和CSS3實現(xiàn)動態(tài)網(wǎng)頁</li>? ? ? ? ? ? ? ? ? ? <li><span>職業(yè)路徑</span>HTML5和CSS3實現(xiàn)動態(tài)網(wǎng)頁</li>? ? ? ? ? ? ? ? </ul>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div class="right">? ? ? ? ? ? <div class="right_1text">? ? ? ? ? ? ? ? <h2>登錄</h2>? ? ? ? ? ? ? ? <form>? ? ? ? ? ? ? ? ? ? <input type="text" name="user" placeholder="請輸入登錄郵箱/手機號" /><br/>? ? ? ? ? ? ? ? ? ? <input type="password" name="pass" placeholder="6-16位密碼,區(qū)分大小寫,不能有空格" /><br/>? ? ? ? ? ? ? ? ? ? <input type="button" value="登錄" class="d22"/>? ? ? ? ? ? ? ? </form>? ? ? ? ? ? </div>? ? ? ? </div>? ? </div>? ? ? ? <div class="footer">? ? ? ? ? ? <ul>? ? ? ? ? ? ? ? <li><a href="#">網(wǎng)站首頁</a></li>? ? ? ? ? ? ? ? <li><a href="#">企業(yè)合作</a></li>? ? ? ? ? ? ? ? <li><a href="#">人才招聘</a></li>? ? ? ? ? ? ? ? <li><a href="#">練習(xí)我們</a></li>? ? ? ? ? ? ? ? <li><a href="#">常見問題</a></li>? ? ? ? ? ? ? ? <li><a href="#">友情鏈接</a></li>? ? ? ? ? ? </ul>? ? ? ? </div>? ??? <!-- 此處寫代碼 --></body></html>
末尾一行不知為何總是換行，還有請老師幫我精簡一下代碼，感覺很亂，謝謝
慕尼黑1589570
2017-07-11 15:12:30