求大神看看百度的下面 footer部分一直不能对其求不吝赐教！！！！-慕课网

求大神看看百度的下面 footer部分一直不能对其求不吝赐教！！！！

来源：13-9 Relative与Absolute组合使用

慕斯3035540

2016-08-01 08:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{margin:o;padding:o;}

#header{

width:100%;

height:90px;

background:#FFF;

}

#wrap{

width:640px;

height:502px;

margin:0 auto;

}

#mainbody{

height:392px;

}

#footer{

height:110px;

}

.btn1{

font-size:13px;

font-family:Arial, Helvetica, sans-serif;

font-style:normal;

background:#3388ff;

height:24px;

width:61px;

border:none;

color:#FFF;

}

#header ul li{

display:inline;

font-size:13px;

font-family:Arial, Helvetica, sans-serif;

font-style:normal;

margin-right:13px;

}

#header ul{

display:inline

}

.head-rigt{

float:right;

margin-top:12px;

}

.imag1{

display: block;

margin:0 auto;

}

.text_btn{

margin-top:40px;

margin-left:opx;

margin-right:opx;

}

.inp-text{

height:35px;

width:536px;

margin-right:0;

}

.btn2{

height:41px;

width:100px;

background:#3388ff;

color:#FFF;

border:none;

float:right;

font-size:14px;

}

#footer ul li{

display:inline;

margin-right:16px;

font-size:13px;

font-family:Arial, Helvetica, sans-serif;

font-style:normal;

}

#footer p{

display:inline;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

font-style:normal;

color:#999;

}

.img_a{

height:110px;

width:280px;

float:left

}

.img_b{

height:62px;

width:329px;

float:right;

}

.imag3{

float:right;

}

.list{

display: inline;

margin-left:0;

margin-top:0;

}

.li_1{

margin-top:0px;

margin-right: 15px;

float:left;}

.li_2{

margin-top:0px;

float:left;}

.li_3{

margin-top:0px;

margin-right: opx;

float:left;}

.imag_5{

margin-left:0px;

}

</style>

</head>

<body>

</ul>

</div>

</div>

</div>

<li class="li_1"><a href="" style="color:#999">把百度设为首页</a></li>

<li class="li_3"><a href="" style="color:#999">About baidu</a></li>

</ul>

<p>@2016 Baidu 使用<a href="" style="color:#999">百度前必读意见反馈</a> 京ICP证030173号</p><img src="http://a3.qpic.cn/psb?/V11thZ482kgMZt/iv*Hh6AxHBA0x0h4WdSirtEIcvy06iVkNMwyOuiwHzE!/m/dKoAAAAAAAAAnull&bo=DgARAAAAAAADBz0!&rf=photolist&t=5" alt=""/>

</div>

</body>

</html>

写回答关注

1回答

renyapeng: 2016-08-01 10:28:54

已采纳

.list{    
	/*display: inline;    */
	margin-left:0;    
	margin-top:0; 
	position: relative;   
}    
.li_1{    
	margin-top:0px;    
	margin-right: 15px;    
	float:left;
	position:absolute;
	left: 0;
}    
.li_2{    
	margin-top:0px;    
	float:center;
	position: absolute;
	left:130px;
}    
.li_3{    
	margin-top:0px;    
	margin-right: opx;    
	float:right;
	position: absolute;
	right:0;
}    
.imag_5{    
	margin-left:0px;    
}

如果题主的问题说的是百度页面右下角那儿对不齐的问题，那么我在题主的代码上加了几句，用的是刚学的12-9relative和absolute的组合应用。。让那3个li全部相对于list做的偏移

题主解决问题时候，可以使用浏览器F12功能，查找出问题所在，然后解决问题

1 0

慕斯3035...

大神非常感谢！

2016-08-01 10:43:49

共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1228566 学习 · 19080 问题

查看课程

相似问题