新手div的嵌套不会排列整齐_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:17:29
原创
1646人浏览过

]#headertop{width:800px;height:20px;background:#CCFF77;}#headertop ul{list-style:none;}#headertop ul li{float:left;margin:10px auto 10px 0}#headerbottom{width:800px;height:80px;background:#CCFF44}#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55}#headerbottomcenter{width:400px;height:70px;background:#CCFF33}#headerbottomright{width:300px;height:70px;background:#CCFF66}<div id="header">    <!--页面头部-->	<div id="headertop">		<ul>			<li>亲,欢迎来淘宝!请</li>		</ul>	</div>	<div id="headerbottom">		<div id="headerbottomleft"></div>		<div id="headerbottomcenter"> </div>		<div id="headerbottomright"></div>	</div>  </div>
登录后复制

[img=http://img.my.csdn.net/uploads/201212/09/1355025101_9227.jpg][/img我就是这样写的,怎么就是排列不整齐


回复讨论(解决方案)

<html><head>    <style type="text/css">#header{width:798px;height:198px;border:1px solid blue; }#headertop{width:798px;height:48px;background:#CCFF77;border-bottom: dashed 1px;}#headertop ul{list-style:none;display: inline;}#headertop ul li{float: left;line-height: 48px;margin-left:40px; }#headerbottom{width:798;height: 148px;background: #CBFF43;}#headerbottomleft{width: 100;height: 80px;margin: 0 auto;border-left: dashed 1px;border-right: dashed 1px;}#headerbottomcenter{width: 384px;height:68px;margin:0 auto;border-top:dashed 1px;border-left:  dashed 1px;border-right: dashed 1px;} </style><body>    <div id="header">        <!--页面头部-->        <div id="headertop">            <ul>                <li>亲,欢迎来淘宝!请</li>            </ul>        </div>        <div id="headerbottom">            <div id="headerbottomleft"></div>            <div id="headerbottomcenter"> </div>            <div id="headerbottomright"></div>        </div>    </div></body>
登录后复制

我也新手呢,不对的地方请多包含,左后一个headerbottomright我没用,因为不知道哪里要用。

 
#headerbottom{width:800px;height:80px;background:#CCFF44;clear:both;}
#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55; float:left;}
#headerbottomcenter{width:400px;height:70px;background:#CCFF33; float:left;}
#headerbottomright{width:300px;height:70px;background:#CCFF66; float:right;}

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号