> 웹 프론트엔드 > HTML 튜토리얼 > div css布局为什么底部没有颜色呢?bgcolor也设置了 为什么不能生效呢?_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:54:35
원래의
1329명이 탐색했습니다.

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;	}
로그인 후 복사

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>
로그인 후 복사


回复讨论(解决方案)

效果图

清除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>
로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿