<!DOCTYPE html><html><head><!-- 1、2、3、采用字体：Geneva,Arial,Helvetica,sans-serif; 基本背景颜色:#CCCCCC最大宽度：900px边框：5px, 实线，#ffffff内容背景颜色：#888header部分背景颜色：#F47D31 ------h1主header部分高度：80px主header部分字体大小：72px主footer部分高度：50pxnav部分宽度：25%-------h3article部分宽度：50%aside部分宽度：25%，斜体font-style: italic; h1:72pxh2:24px;h3:18px --> <meta charset="utf-8"> <title></title> <style> .content{ width:900px; background:#888; font-family:Geneva,Arial,Helvetica,sans-serif; border:5px #fff solid; margin:0 auto; text-align:center; } header{ width:100%; height:80px; font-size:72px; background-color:#F47D31; } nav { float:left; width:25%; } nav h3 { font-size:18px; } artical{ width:50%;float:left; } section{ width:100%; } aside{ width:25%; float:right; } footer{ height:50px; font-size:18px; background-color:#F47D31; } </style></head><body> <div class="content"> <header> Header </header> <section> <nav> <h3>link1</h3> <hr/> <h3>link2</h3> <hr/> <h3>link3</h3> <hr/> </nav> <artical> <div> Artical Header </div> <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p> <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p> <div> Artical Footer </div> <div> Artical Header </div> <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p> <div> Artical Footer </div> </artical> <aside> <p>Aside</p> </p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p> </aside> </section> <footer> Footer </footer> </div> </body></html>
2 回答
已采纳
丶前男友
TA贡献42条经验 获得超18个赞
呃。。。你为什么要用text文本复制这代码呢- =，我们看着多累啊，那里不是有代码语言编辑的么~
简单一句话，section没有清除浮动~
PS：看的我好累。。。
点击展开后面1条
丶前男友
TA贡献42条经验 获得超18个赞
<section> <nav></nav> <artical></artical> <aside></aside> </section>
上面是你的代码
用clear：both应该如下这么写：
<section> <nav></nav> <artical></artical> <aside></aside> <div style="clear:both"></div> </section>
点击展开后面2条
- 2 回答
- 0 关注
- 3396 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消