Heim > Web-Frontend > HTML-Tutorial > div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose

div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:54:35
Original
1328 Leute haben es durchsucht

css代码

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;	}
Nach dem Login kopieren

HTML
<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div><div><!--中部--><div class="middleleft"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></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" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li  class="li1"><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></div><!--下部--><div class="end1"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div></body></html>
Nach dem Login kopieren


回复讨论(解决方案)

效果图

清除float

<html><head><link rel="stylesheet"type="text/css" href="css.css"/></head><body><!--上部--><div class="top"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul> </div><div><!--中部--><div class="middleleft"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></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" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--><li  class="li1"><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul></div>  <div   style="max-width:90%"></div></div><!--下部--><div class="end1"><ul ><li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--> <li><img  src="dog.jpg" alt="div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose" ></li><!--<a href="http://www.baidu.com">baidu<a>--></ul>  <div   style="max-width:90%"></div></div></body></html>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage