标签：solid text 贺卡 1px HTML CSS 0px border 综合
案例1
<!-- html.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合使用CSS</title>
<link href="ex17.css" type="text/css" rel="stylesheet">
<style type="text/css">
body{
margin: 0px;
}
#apTop{
position: relative;
margin: auto;
width: 600px;
text-align: center;
border: #00F 1px solid;
}
#apCenter{
position: relative;
margin: 5px auto;
width: 600px;
height: 240px;
border:#00F 1px solid;
}
#apMain{
position: relative;
margin: 0px auto;
width: 600px;
height: 250px;
border:#00F 1px solid;
}
#apMainLeft{
position: absolute;
left:0px;
bottom:0px;
border:#F00 1px solid;
}
#apMainRight{
position: absolute;
right:0px;
bottom:0px;
border: #F00 1px solid;
}
</style>
</head>
<body>
<div id="apTop">
<embed src="images/timg.gif" height="28" width="500">
</div>
<div id="apCenter">
<img src="images/green.jpg" alt="" width="600" height="240">
</div>
<div id="apMain">
<div id="apMainLeft">
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">
<img src="images/1.gif" alt="" width="88" height="18">
</td>
</tr>
<tr class="Center">
<td>
<a href="#">
<img src="images/2.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/3.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/4.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/5.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
</tr>
<tr>
<td colspan="4">
<img src="images/6.gif" alt="" width="78" height="17">
</td>
</tr>
<tr class="Center">
<td>
<a href="#">
<img src="images/7.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/8.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/9.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
<td>
<a href="#">
<img src="images/10.gif" alt="" width="82" height="56"><br/>贺卡版
</a>
</td>
</tr>
<tr>
<td colspan="4"><img src="images/11.gif" alt="" width="69" height="18"></td>
</tr>
<tr>
<td colspan="2">
<a href="#">森林狂想曲(推荐)</a>
</td>
<td colspan="2">
<a href="#">梁祝-蝴蝶梦(浪漫钢琴曲)</a>
</td>
</tr>
<tr>
<td colspan="2"><a href="#">流浪-Enya 恩雅</a></td>
<td colspan="2"><a href="#">流浪-Enya 恩雅</a></td>
</tr>
</table>
</div>
<div id="apMainRight">
<table width="220" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left">
<img src="images/12.gif" alt="" width="71" height="17">
</td>
</tr>
<tr>
<td colspan="2" align="left">
<ul>
<li><a href="#">期待世博会</a></li>
<li><a href="#">期待世博会</a></li>
<li><a href="#">期待世博会</a></li>
<li><a href="#">期待世博会</a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<img src="images/13.gif" alt="" width="57" height="17">
</td>
</tr>
<tr class="Center">
<td>
<a href="#">
<img src="images/14.gif" alt="" width="82" height="56"><br/>backkom
</a>
</td>
<td>
<a href="#">
<img src="images/15.jpg" alt="" width="82" height="56"><br/>AOA
</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
/* html.css */
td{
font-size: 12px;
}
td img{
border:0;
}
.Center{
text-align: center;
}
a:link{
color:#000;
text-decoration: none;
}
a:visited{
text-decoration: none;
}
a:hover{
color:#00F;
text-decoration: underline;
}
标签：solid,text,贺卡,1px,HTML,CSS,0px,border,综合 来源： https://www.cnblogs.com/xieyi-1994/p/13944171.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。