这是HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><link href="file:///H|/网站设计/百度前端基础/renwu2/style/style.css" rel="stylesheet" type="text/css"></head><body><div><div id="header"> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png" alt="logo"> <ul class="nav"> <li><a href="#">导航链接一</a></li> <li><a href="#">导航链接二</a></li> <li><a href="#">导航链接三</a></li> <li><a href="#">导航链接四</a></li> </ul></div><div class="wrap"> <div class="mainbody4"> <h3>这里以后是一个侧栏，这是侧栏的标题</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>请重复输入密码：</label> <input type="password" name="ps" value=""> </div> <span class="english">密码请为6-16位英文数字</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="确认提交"></span> </div> </form> </div><div class="left"> <div class="mainbody"> <h2>文章一级标题</h2> <h3>文章二级标题</h3> <span class="author">文章作者 文章发表时间</span> <p class="one">这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p> <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p> <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=2">这里有一个链接到下一个网站</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png" alt="logo"> <p class="one">这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p> <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=2">这里有一个链接到下一个网站</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p></div><div class="mainbody1"> <h2>另一篇文章一级标题</h2> <h3>文章二级标题</h3> <span class="author">文章作者 文章发表时间</span> <p class="one">这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p> <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p> <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com/task/detail?taskId=2">这里有一个链接到下一个网站</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png" alt="logo"> <ul class="list"> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ul></div><div class="mainbody2"> <h2>图片</h2> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div> <div class="picture"> <p>好看的图片</p> <img src="file:///H|/网站设计/百度前端基础/renwu2/iamge/QQ图片20161114121120.png"> </div></div><div class="mainbody3"> <h2>最后一篇文章最后一级标题</h2> <h3>文章二级标题</h3> <span class="author">文章作者 文章发表时间</span> <ol class="list2"> <li>排名1</li> <li>排名2</li> <li>排名3</li> </ol><br> <table class="table"> <p>下面是一个表格，我这里给表格加了一个“border"好让你们看出是一个表格，你们不用写HTM时候不需要加。</p> <tbody> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td><a href="#">操作</a></td> </tr> </tbody> <tfoot> <tr> <td>总计</td> <td colspan="2">1000</td> </tr> </tfoot> </table></div></div> </div> <div class="footer"><img src="file:///H|/网站设计/百度前端基础/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";}任务要求：1。基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在步骤一的代码基础上增加CSS样式代码的编写2。头部和底部的黑色区域始终是100%宽3。页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化4。左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化5。10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行要做到如图所示的效果：我自己学了有半个多月了，麻烦各位前辈看看我做的这个怎么样。另外我有几个问题想问一下各位 前辈。第一：为什么我在.left{float:left; margin-right:450px;} 我去掉float:left; 这个代码左边部分就能自动上去，加上float:left;反而上不去了? 去掉整句话，上是上去了，不过会充满整个屏幕并且被右边的这块给覆盖了。这是为什么?第二：.left{margin-right:450px;} 这里我这样写让它上去了，但是我如果不加.wrap{overflow:auto;}这句话它就不能对齐，我仔细看了margin的值都是一样的啊？为什么不会自动对齐呢？第四：请各位前辈指出我这个程序写得怎么样？哪里还需要改进的？或者有错误的地方，不符合任务要求的给我说一下。新手上路，问题有点多，请大家多多见谅。如果有热心的前辈愿意指导一下，我在此拜谢了。谢谢各位
2 回答
已采纳
self_potato
TA贡献53条经验 获得超27个赞
盒子模型很重要
第一个：float不上去可能因为外部盒子宽度不够
第二个：建议把盒子模型调好再看，一般是可以的
第四个：建议网页布局 从大到小 从上到下
你做的可以了 慢慢来 成长都是在实战中的
A空城
TA贡献14条经验 获得超3个赞
真不好解释，每个人的写法布局都不一样，没有一个统一，只要兼容就行。float、overflow这些标签你用多了，就会理解了。
float：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
overflow:auto; 在所在的空间高度里垂直居中；
- 2 回答
- 0 关注
- 1893 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消