猿问

请前辈指导一下，为什么我这个程序不能自动上去，还有左边为什么不能自适应宽度高度？

这是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">文章作者&nbsp;&nbsp;文章发表时间</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">文章作者&nbsp;&nbsp;文章发表时间</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">文章作者&nbsp;&nbsp;文章发表时间</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的值都是一样的啊？为什么不会自动对齐呢？

第四：请各位前辈指出我这个程序写得怎么样？哪里还需要改进的？或者有错误的地方，不符合任务要求的给我说一下。新手上路，问题有点多，请大家多多见谅。如果有热心的前辈愿意指导一下，我在此拜谢了。谢谢各位

晓白菜
浏览 1894回答 2
2回答

self_potato

盒子模型很重要第一个：float不上去可能因为外部盒子宽度不够第二个：建议把盒子模型调好再看，一般是可以的第四个：建议网页布局  从大到小  从上到下    你做的可以了    慢慢来   成长都是在实战中的
0

A空城

真不好解释，每个人的写法布局都不一样，没有一个统一，只要兼容就行。float、overflow这些标签你用多了，就会理解了。float：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。overflow:auto; 在所在的空间高度里垂直居中；
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

CSS3
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
Html5
我要回答