Web技术-第二次Web作业参考：绘制表格（CSS）课外天地李树青

以文本方式查看主题

-  课外天地李树青  (http://www.njcie.com/bbs/index.asp)
--  Web技术  (http://www.njcie.com/bbs/list.asp?boardid=28)
----  第二次Web作业参考：绘制表格（CSS）  (http://www.njcie.com/bbs/dispbbs.asp?boardid=28&id=1755)

--  作者：admin
--  发布时间：2016/10/17 16:29:15
--  第二次Web作业参考：绘制表格（CSS）

版本1：利用Table：

<html>

<head lang="en">

    <meta charset="UTF-8">

<title></title>

    <style type="text/css">
        .style1 {
            width: 30px;
            background-color: red;
        }

        .style2 {
            height: 30px;
            background-color: red;
        }

        .style3 {
            background-color: #555555;
        }
    </style>

</head>

<body>

<table height="200" width="200" border="0">

    <tr>

        <td class="style1" rowspan="2"> </td>


        <td class="style2" colspan="2"> </td>


    </tr>


    <tr>

        <td class="style3"> </td>


        <td class="style1" rowspan="2"> </td>


    </tr>


    <tr>

        <td class="style2" colspan="2"> </td>


    </tr>


</table>

</body>

</html>

版本2：利用DIV

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            background-color: greenyellow;

        }

        #center {

            width: 200px;

            height: 200px;

            background-color: gray;

            border: none;

            float: left;

        }

        #left-top, #right-top, #left-bottom, #right-bottom, #div1, #div2, #div3, #div4 {

            width: 50px;

            height: 50px;

            background-color: red;

            border: solid;

            border-color: white;

            float: left;

        }

        #div1, #div2 {

            width: 200px;

            border-left: none;

        }

        #div1 {

            border-right: none;

        }

        #div2 {

            margin-top: -6px;

        }

        #div3, #div4 {

            height: 200px;

            border-top: none;

        }

        #div3 {

            clear: left;

            margin-top: -3px;

        }

        #div4 {

            margin-left: -3px;

        }

        #left-top {

            border-bottom: none;

        }

        #right-top {

            border-left: none;

        }

        #left-bottom {

            margin-top: -6px;

            clear: left;

            border-right: none;

        }

        #right-bottom {

            margin-top: -3px;

            border-top: none;

            border-left: none;

        }

    </style>

</head>

<body>

<div id="left-top"></div>

<div id="div1"></div>

<div id="right-top"></div>

<div id="div3"></div>

<div id="center"></div>

<div id="div4"></div>

<div id="left-bottom"></div>

<div id="div2"></div>

<div id="right-bottom"></div>

</body>

</html>

--  作者：admin
--  发布时间：2016/10/24 17:15:04
--  课上讲的版本

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            background-color: greenyellow;

        }

        #left-top, #right-top,#right-bottom,#left-bottom{

            width: 50px;

            height: 50px;

            background-color: red;

            border: solid;

            border-width: 4px;

            border-color: white;

        }

        #center {

            float: left;

            width: 146px;

            height: 146px;

            border: none;

            background-color: dimgray;

        }

        #left-top {

            float: left;

            height: 200px;

        }

        #right-top {

            float: left;

            width: 200px;

            border-left: none;

        }

        #right-bottom{

            float: left;

            height: 200px;

            border-top: none;

        }

        #left-bottom{

            margin-top: -58px;

            float: left;

            width: 200px;

        }

        #div1 {

            width: 200px;

            height: 58px;

        }

        #div2 {

            float: left;

            width: 200px;

            height: 204px;

        }

    </style>

</head>

<body>

<div id="left-top"></div>

<div id="right-top"></div>

<div id="div1"></div>

<div id="center"></div>

<div id="right-bottom"></div>

<div id="div2"></div>

<div id="left-bottom"></div>

</body>
</html>