1.把图片设置为同一个div的背景图片,background: url(casio.bmp)no-repeat right center;表示背景图片不重复,靠右居中。
CSS:
#logo{
background: url(casio.bmp)no-repeat right center;text-align:right;
}
p {
text-align: left;
}
html:
<div id="logo">
<p>EL-243S</p>
</div>
页面展示:
源码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div与表格应用实例——计算器布局</title>
<style type="text/css">
#wrap {
width: 410px;
height: 450px;
background-color: rgb(230, 230, 130);
z-index: 0;
}
#logo {
width: 390px;
height: 40px;
left: 20px;
top: 5px;
z-index: 1;
position: absolute;
}
#op {
height: 250px;
width: 390px;
z-index: 1;
position: absolute;
top: 50px;
left: 17px;
}
#result {
height: 60px;
width: 390px;
border: solid 1px;
z-index: 1;
position: absolute;
top: 380px;
left: 17px;
background-color: white;
}
td {
border: solid 1px black;
width: 58px;
height: 40px;
margin: 10px;
/*margin表示边距*/
cursor: pointer;
/*设置鼠标指针变成手的形状*/
}
#left {
float: left;
}
#right {
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<div id="left">
<p align="left">EL-243S</p>
</div>
<div id="right">
<img src="casio.bmp" />
</div>
</div>
<div id="op">
<table cellspacing="30" border="1">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr align="center">
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
<div id="result"></div>
</div>
</body>
</html>
2.分别设置左浮动、右浮动
CSS:
#left {
float: left;
}
#right {
float: right;
}
html:
<div id="left">
<p align="left">EL-243S</p>
</div>
<div id="right">
<img src="casio.bmp" />
</div>
源码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div与表格应用实例——计算器布局</title>
<style type="text/css">
#wrap {
width: 410px;
height: 450px;
background-color: rgb(230, 230, 130);
z-index: 0;
}
#logo {
width: 390px;
height: 40px;
left: 20px;
top: 5px;
z-index: 1;
position: absolute;
}
#op {
height: 250px;
width: 390px;
z-index: 1;
position: absolute;
top: 50px;
left: 17px;
}
#result {
height: 60px;
width: 390px;
border: solid 1px;
z-index: 1;
position: absolute;
top: 380px;
left: 17px;
background-color: white;
}
td {
border: solid 1px black;
width: 58px;
height: 40px;
margin: 10px;
/*margin表示边距*/
cursor: pointer;
/*设置鼠标指针变成手的形状*/
}
#logo{
background: url(casio.bmp)no-repeat right center;text-align:right;
}
p {
text-align: left;
}
</style>
</head>
<body>
<div id="wrap">
<div id="logo">
<p>EL-243S</p>
</div>
<div id="op">
<table cellspacing="30" border="1">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr align="center">
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
<div id="result"></div>
</div>
</body>
</html>