Home >Web Front-end >HTML Tutorial >The nesting of newbie divs will not be arranged neatly_html/css_WEB-ITnose
The nesting of newbie divs will not be arranged neatly_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:17:291384browse
]#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 This is how I wrote it, why is it not arranged neatly
Reply to the discussion (solution)
<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> I am also a newbie, please include more mistakes. I have no use for the last headerbottomright because it doesn’t Know where to use it.
#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;}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html split cell_html/css_WEB-ITnoseNext article：html split cell_html/css_WEB-ITnose