這是HTML代碼：<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</title><link href="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/style/style.css" rel="stylesheet" type="text/css"></head><body><div><div id="header">? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png" alt="logo">? ? <ul class="nav">? ? <li><a href="#">導(dǎo)航鏈接一</a></li>? ? <li><a href="#">導(dǎo)航鏈接二</a></li>? ? <li><a href="#">導(dǎo)航鏈接三</a></li>? ? <li><a href="#">導(dǎo)航鏈接四</a></li>? ? </ul></div><div class="wrap">? ? ? ? <div class="mainbody4">? ? ? ? ? ? <h3>這里以后是一個側(cè)欄，這是側(cè)欄的標(biāo)題</h3>? ? ? ? ? ? <form class="form1" method="post">? ? ? ? ? ? <label>請輸入郵箱地址：</label>? ? ? ? ? ? <input type="text" name="username" id="username" value=""><br><br>? ? ? ? ? ? <span class="mail">郵箱地址請按要求格式輸入</span><br><br>? ? ? ? ? ? <div class="pas">? ? ? ? ? ? <label>請輸入密碼：</label>? ? ? ? ? ? <input type="password" name="ps" value=""><br><br>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="repeat">? ? ? ? ? ? <label>請重復(fù)輸入密碼：</label>? ? ? ? ? ? <input type="password" name="ps" value="">? ? ? ? ? ? </div>? ? ? ? ? ? <span class="english">密碼請為6-16位英文數(shù)字</span>? ? ? ? ? ? ?<div class="choose">? ? ? ? ? ? <label>性別：</label>? ? ? ? ? ? <input type="radio" name="gender" value="男">男? ? ? ? ? ? <input type="radio" name="gender" value="女">女? ? ? ? ? ? </div>? ? ? ? ? ? <div class="city">? ? ? ? ? ? <label>城市：</label>? ? ? ? ? ? <select>? ? ? ? ? ? <option value="貴陽">貴陽</option>? ? ? ? ? ? <option value="北京">北京</option>? ? ? ? ? ? <option value="杭州">杭州</option>? ? ? ? ? ? </select>? ? ? ? ? ? </div>? ? ? ? ? ? <div class="habit">? ? ? ? ? ? <label>愛好：</label>? ? ? ? ? ? <input type="checkbox" name="gender1" value="Game">Game? ? ? ? ? ? <input type="checkbox" name="gender2" value="Sport">Sport? ? ? ? ? ? <input type="checkbox" name="gender3" value="Dance">Dance? ? ? ? ? ? </div>? ? ? ? ? ? <div class="say">? ? ? ? ? ? <label><span class="describe">個人描述：</span></label>? ? ? ? ? ? <textarea rows="5" cols="20"></textarea>? ? ? ? <span class="sure"><input type="submit" value="確認(rèn)提交"></span>? ? ? ? ? ? </div>? ? ? ? ? ? </form>? ? ? ? ? ? </div><div class="left">? ? <div class="mainbody">? ? <h2>文章一級標(biāo)題</h2>? ? <h3>文章二級標(biāo)題</h3>? ? <span class="author">文章作者 文章發(fā)表時(shí)間</span>? ? <p class="one">這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,換行了</p>? ? <p>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,換行了</p>? ? <p>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,<a >這里有一個鏈接到下一個網(wǎng)站</a>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落。</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png" alt="logo">? ? <p class="one">這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,換行了</p>? ? <p>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,<a >這里有一個鏈接到下一個網(wǎng)站</a>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落。</p></div><div class="mainbody1">? ? <h2>另一篇文章一級標(biāo)題</h2>? ? <h3>文章二級標(biāo)題</h3>? ? <span class="author">文章作者 文章發(fā)表時(shí)間</span>? ? <p class="one">這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,換行了</p>? ? <p>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,換行了</p>? ? <p>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,<a >這里有一個鏈接到下一個網(wǎng)站</a>這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落,這是一個很長很長的段落。</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png" alt="logo">? ? <ul class="list">? ? <li>項(xiàng)目列表一</li>? ? <li>項(xiàng)目列表二</li>? ? <li>項(xiàng)目列表三</li>? ? </ul></div><div class="mainbody2">? ? <h2>圖片</h2>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div>? ? <div class="picture">? ? <p>好看的圖片</p>? ? <img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161114121120.png">? ? </div></div><div class="mainbody3">? ? <h2>最后一篇文章最后一級標(biāo)題</h2>? ? <h3>文章二級標(biāo)題</h3>? ? <span class="author">文章作者 文章發(fā)表時(shí)間</span>? ? <ol class="list2">? ? <li>排名1</li>? ? <li>排名2</li>? ? <li>排名3</li>? ? </ol><br>? ? <table class="table">? ? <p>下面是一個表格，我這里給表格加了一個“border"好讓你們看出是一個表格，你們不用寫HTM時(shí)候不需要加。</p>? ? <tbody>? ? <tr>? ? <th>表頭</th>? ? <th>表頭</th>? ? <th>表頭</th>? ? </tr>? ? <tr>? ? <td>表內(nèi)容單元格</td>? ? <td>表內(nèi)容單元格</td>? ? <td><a href="#">操作</a></td>? ? </tr>? ? <tr>? ? <td>表內(nèi)容單元格</td>? ? <td>表內(nèi)容單元格</td>? ? <td><a href="#">操作</a></td>? ? </tr>? ? <tr>? ? <td>表內(nèi)容單元格</td>? ? <td>表內(nèi)容單元格</td>? ? <td><a href="#">操作</a></td>? ? </tr>? ? <tr>? ? <td>表內(nèi)容單元格</td>? ? <td>表內(nèi)容單元格</td>? ? <td><a href="#">操作</a></td>? ? </tr>? ? </tbody>? ? <tfoot>? ? <tr>? ? <td>總計(jì)</td>? ? <td colspan="2">1000</td>? ? </tr>? ? </tfoot>? ? </table></div></div>? ?</div>?? ? ? ? ? ?<div class="footer"><img src="file:///H|/網(wǎng)站設(shè)計(jì)/百度前端基礎(chǔ)/renwu2/iamge/QQ圖片20161117132519.png"></div></body></html>這是CSS代碼：*{margin:0;padding:0}body{font-family:微軟雅黑;background:#A49C9C;}#header{width:100%;height:100px;background:#575555;margin:5px 0 20px 0;overflow:hidden;font-size:20px;}#header img{height:100px;}.nav{margin:0;padding:0;float:right;}.nav li{text-decoration:onoe;padding:50px 0;margin:0 40px;line-height:100px;color:#F5EFEF;}.nav a{text-decoration:none;color:#F4EEEE;}.nav a:hover,a:link.a:visited{background:#F1080C;}.nav li{display:inline;}.wrap{overflow:auto;}.left{float:left; margin-right:450px;}.mainbody{background:#F9F3F3;border:1px solid #F8F2F2;padding:5px;margin:20px;}.mainbody h3{color:#c7c2c2;}.mainbody p{line-height:1.5em;}.one{text-indent:2em;}.mainbody1{background:#F9F3F3;border:1px solid #F8F2F2;padding:5px;margin:20px;}.mainbody1 h3{color:#c7c2c2;}.mainbody1 p{line-height:1.5em;}.list{list-style:none;padding:0 0 0 30px;font-weight:bold;}.author{font-size:0.5em;color:#C7C2C2;}.mainbody2{background:#F9F3F3;border:1px solid #F8F2F2;padding:5px;margin:20px;}.picture{border:1px solid #272525;margin:20px 0 0 60px;text-align:center; padding:20px 10px 10px 10px;display:inline-block;}.picture img{margin-top:10px; width:150px; height:100px;}.mainbody3{background:#F9F3F3;border:1px solid #F8F2F2;padding:5px;margin:20px;}.mainbody3 h3{color:#c7c2c2;}.list2{padding:20px 0 0 60px;font-weight:bold;}.table{width:100%;border:1px solid #C9C4C4;border-collapse: collapse;}.table td,th{border:1px solid #C9C4C4;text-align:center;}.table tfoot{background-color:#27299C;text-align:center;}.mainbody4{width:400px; background:#F9F3F3; border:1px solid #F8F2F2; padding:5px; margin:20px; float:right;}.mainbody4 h3{display:bolck;width:100%;padding:20px 0 10px 15px;font-size:1.1em;}.form1{padding:10px 0px 10px 40px;}.mail{font-size:10px;color:#aaa;display:block;text-indent:135px;margin-top:-15px;}.pas{text-indent:32px;margin-top:-15px;}.repeat{margin-bottom:10px;}.english{font-size:10px;color:#aaa;display:block;text-indent:135px;}.choose{text-indent:80px;margin-top:15px;}.city{text-indent:80px;margin:15px 0 10px 0;}.habit{text-indent:80px;margin:15px 0 10px 0;}.say{text-indent:50px;margin:15px 0 10px 0;}.describe{vertical-align:top;}.sure{display:block;width:100%;background-color: #3355d0;border-radius: 10px;height: 44px;line-height: 44px;text-align: center;margin-left:-20px;}.sure input {background-color: transparent;border: none;color:#FBF8F8;font: bold 18px "Microsoft Yahei";}任務(wù)要求：1?；诘谝粋€任務(wù)“零基礎(chǔ)HTML編碼”的代碼，參考?示例圖（點(diǎn)擊查看），在步驟一的代碼基礎(chǔ)上增加CSS樣式代碼的編寫2。頭部和底部的黑色區(qū)域始終是100%寬3。頁面右側(cè)部分為固定寬度，左側(cè)保持與瀏覽器窗口變化同步自適應(yīng)變化4。左側(cè)的各個模塊里面的內(nèi)容寬度跟隨左側(cè)整體寬度同步自適應(yīng)變化5。10張圖片需要永遠(yuǎn)都完整展現(xiàn)，所以會隨著寬度變窄，從兩行變成三行甚至更多，也有可能隨著寬度變寬，變成一行要做到如圖所示的效果：我自己學(xué)了有半個多月了，麻煩各位前輩看看我做的這個怎么樣。另外我有幾個問題想問一下各位 前輩。第一：為什么我在.left{float:left; margin-right:450px;} 我去掉float:left; 這個代碼左邊部分就能自動上去，加上float:left;反而上不去了? 去掉整句話，上是上去了，不過會充滿整個屏幕并且被右邊的這塊給覆蓋了。這是為什么?第二：.left{margin-right:450px;} 這里我這樣寫讓它上去了，但是我如果不加.wrap{overflow:auto;}這句話它就不能對齊，我仔細(xì)看了margin的值都是一樣的??？為什么不會自動對齊呢？第四：請各位前輩指出我這個程序?qū)懙迷趺礃?？哪里還需要改進(jìn)的？或者有錯誤的地方，不符合任務(wù)要求的給我說一下。新手上路，問題有點(diǎn)多，請大家多多見諒。如果有熱心的前輩愿意指導(dǎo)一下，我在此拜謝了。謝謝各位
2 回答
已采納
self_potato
TA貢獻(xiàn)53條經(jīng)驗(yàn) 獲得超27個贊
盒子模型很重要
第一個：float不上去可能因?yàn)橥獠亢凶訉挾炔粔?/p>
第二個：建議把盒子模型調(diào)好再看，一般是可以的
第四個：建議網(wǎng)頁布局? 從大到小? 從上到下???
你做的可以了??? 慢慢來?? 成長都是在實(shí)戰(zhàn)中的
A空城
TA貢獻(xiàn)14條經(jīng)驗(yàn) 獲得超3個贊
真不好解釋，每個人的寫法布局都不一樣，沒有一個統(tǒng)一，只要兼容就行。float、overflow這些標(biāo)簽?zāi)阌枚嗔耍蜁斫饬恕?br />float：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。
overflow:auto; 在所在的空間高度里垂直居中；
添加回答
舉報(bào)
0/150
提交
取消