<!DOCTYPE html><html><head>? <meta charset="UTF-8">? <title>圣杯布局</title>? <style type="text/css">? ? *{? ? margin:0;? ? padding:0;? ? list-style:none;? ? text-decoration:none;? ? color:orange;? ? font-size:16px;? ? }? ? body{? ? min-width:40%;? ? min-height:40%;? ? }? ? .header,.footer{? ? width:100%;? ? height:100px;? ? background:#000;? ? line-height:100px;? ? } .header ul{ float:right; margin-right:120px; } .footer ul{ margin-left:25%; } .header ul li,.footer ul li{ float:left; margin-right:55px; } .main{ background:#e4e5e9; padding:0 382px 0 320px; overflow:hidden; } .main .left{ float:left; width:320px; margin-left:-100%; position:relative; left:-320px; } .main .left .course{ margin:96px 30px; line-height:30px; } .main .left .course h4{ font-size:20px; } .main .left .course ul li span{ background:red; margin-right:5px; } .main .left .course ul li a{ display:inline-block; font-size:14px; } .main .left .course h4,.main .left .course ul li span,.main .left .course ul li a,.main .right form h4,.main .right form input{ color:#000; } .main .right{ float:left; width:382px; position:relative; margin-left:-382px; left:382px; color:#000; } .main .center{ width:100%; float:left; position:relative; } .main .center img{ position:absolute; top:50%; margin-top:-200px; } .main .right form{ margin:100px 35px; line-height:30px; } .main .right form input{ display:block; line-height:30px; margin-top:10px; width:100%; height:30px; } .main .center{ height:480px; }? </style></head><body>? <div class="header">? <img src="http://climg.mukewang.com/590037f600016ce303000100.png">? <ul>? <li><a href="#">課程</a></li>? <li><a href="#">職業(yè)路徑</a></li>? <li><a href="#">實(shí)戰(zhàn)</a></li>? <li><a href="#">猿問</a></li>? <li><a href="#">手記</a></li>? </ul>? </div>? <div class="main">? <div class="center">? <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">? </div>? <div class="left">? <div class="course">? <h4>課程推薦</h4>? <ul>? <li><span>職業(yè)路徑</span><a href="#">HTML與CSS實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</a></li>? <li><span>職業(yè)路徑</span><a href="#">零基礎(chǔ)入門Android語法與界面</a></li>? <li><span>職業(yè)路徑</span><a href="#">iOS基礎(chǔ)語法和常用控件</a></li>? <li><span>職業(yè)路徑</span><a href="#">PHP入門開發(fā)</a></li>? <li><span>職業(yè)路徑</span><a href="#">JAVA入門開發(fā)</a></li>? </ul>? </div>? </div>? <div class="right">? <form action="#">? <h4>登錄</h4>? <input type="text" placeholder="請(qǐng)輸入登錄郵箱/手機(jī)號(hào)" />? <input type="password" placeholder="6-16位密碼,區(qū)分大小寫,不能用空格" />? <input type="submit" style="background:red" value="登錄">? </form>? </div>? </div>? <div class="footer">? <ul>? <li><a href="#">網(wǎng)頁(yè)首頁(yè)</a></li>? <li><a href="#">企業(yè)合作</a></li>? <li><a href="#">人才招聘</a></li>? <li><a href="#">聯(lián)系我們</a></li>? <li><a href="#">常見問題</a></li>? <li><a href="#">友情鏈接</a></li>? </ul>? </div></body></html>
圣杯布局如何實(shí)現(xiàn)自適應(yīng)，我寫的圣杯布局中間欄設(shè)置了width:100%但達(dá)不到自適應(yīng)的效果？
慕斯卡7039390
2020-03-06 17:59:52
