Home > Article > Web Front-end > Why is there no color at the bottom of the div css layout? bgcolor is also set. Why doesn’t it take effect? _html/css_WEB-ITnose
Why is there no color at the bottom of the div css layout? bgcolor is also set. Why doesn’t it take effect? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:351304browse
css code
body{ width:960px; margin:0 auto; }.top{ width:960px; height:162px; background-color:yellow;}.top ul{ padding:0px; margin:0px;}.top ul li/*外面包围样式*/{ list-style-type:none; float:left; width:150px; height:150px; margin:10px 0px 0px 33px; padding-left:0px; }.top img{ width:150px; height:150px; }.middleleft{ width:200px; background-color:yellow; float:left;}.middleleft ul{ padding:0px; margin:0px;}.middleleft ul li{ list-style-type:none; margin:15px 0px 0px 33px; }.middleleft img{ width:150px; height:150px;}.middleright{ width:209px; float:left; background-color:yellow;}.middleright ul{ padding:0px; margin:0px;}.middleright li{ list-style-type:none; margin:15px 0px 0px 14px; }.middleright img{ width:150px; height:150px;}.middlemid{ width:551px; height:336px; background-color:green; float:left;}.end1{ width:960px; background-color:yellow; }.end1 ul{ padding:0px; margin:0px;}.end1 ul li/*外面包围样式*/{ list-style-type:none; float:left; width:150px; height:150px; margin:10px 0px 0px 33px; padding-left:0px; }.end1 img{ width:150px; height:150px; } HTML
<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><div><!--中部--><div class="middleleft"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><!----><div class="middlemid">middlemid</div><div class="middleright"><ul ><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></div><!--下部--><div class="end1"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></body></html>
Reply to discussion (solution)
Rendering
clear float
<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul> </div><div><!--中部--><div class="middleleft"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><!----><div class="middlemid">middlemid</div> <div class="middleright"><ul ><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--><li class="li1"><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div> <div style="clear:both;"></div></div><!--下部--><div class="end1"><ul ><li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img src="dog.jpg"></li><!--<a href="http://www.baidu.com">baidu<a>--></ul> <div style="clear:both;"></div></div></body></html>
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