话说 这几天在模仿页面
既然模仿那就按自己的思路做咯
做着做着总能碰到些问题
今天又遇到一个
上面的 数值 是指 #LonInMain 的宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#Main
{
margin:auto;
width:60px;
background-color:#00FF66;
height:90px;
padding: 0px;
}
/****************登录条*****************************/
#LonIn
{
height:35px;
width:60px;
background-color:#00FF66;
border:0;
padding: 0px;
margin: 0px;
padding: 0px;
font-size:0;
}
#LonInLeft
{
background-color:#FFFF00;
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
}
#LonInMain
{
background-color:#990099;
height:35px;
width:50px;
float:left;
clear: none;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
}
#LonInRight
{
/*background-image:url(./images/LonInRight.gif);*/
background-color:#0000FF;
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
margin-right:-3px;/*加上这句 布局就对了 少了这句 就如上图所示的效果了*/
}
/***************************************************/
</style>
</head>
<body>
<div id="Main">
<div id="LonIn">
<div id="LonInLeft"></div><!--登录框左半弧-->
<div id="LonInMain"></div><!--登录框主体-->
<div id="LonInRight"></div><!--登录框右半弧-->
</div><!--登录框-->
</div>
</body>
</html>
另外百度上提问 找到两个方法
1.
#LonInLeft
{
background-image:url(./images/LogInLeft.gif);/*图片为 5*35px的*/
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
display:inline;
}
#LonInMain
{
background-image:url(./images/LonInMain.gif);/*图片为 6*35px的*/
height:35px;
width:50px;
float:left;
clear: none;
margin: 0px;
padding: 0px;
display:inline;
}
#LonInRight
{
background-image:url(./images/LonInRight.gif);/*图片为 5*35px的*/
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
display:inline;
}
变为行内显示
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
2.将注释去掉
<div id="LonInLeft"></div><!--登录框左半弧-->
<div id="LonInMain"></div><!--登录框主体-->
<div id="LonInRight"></div><!--登录框右半弧-->