HTML+CSS综合使用

案例1

HTML+CSS综合使用

<!-- 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;
}

 

上一篇:css3实现拟物风


下一篇:CSS进阶学习(一)