基础网页制作-CSDN博客

本文链接：https://blog.csdn.net/qq_45614405/article/details/117805285
大家好，今天我要分享的是一篇自己写的网页。代码如下：
<style>
    /* https://www.taoche.com/ */
    #a{
        color:black;
        background-color:rgb(161, 161, 253);
        width:960px;
        height:1200px;
        margin:auto;
        padding:0;
        border-style:solid;
        border-width:1px;
        border-color:gray;
        position: relative;
    }
    #b{
        color:black;
        background-color:wheat;
        width:960px;
        height:100px;
        margin:auto;
        padding:0;
    }
    #c{
        color:black;
        background-color:antiquewhite;
        width:960px;
        height:40px;
        margin:auto;
        padding:0;
    }
    #d{
        color:black;
        background-color:rgb(243, 236, 236);
        width:880px;
        height:300px;
        margin:auto;
        padding:10px 40px;
    }
    #e{
        color:black;
        background-color:white;
        width:960px;
        height:200px;
        margin:auto;
        padding:0;
    }
    #f{
        color:black;
        background-color:rgb(189, 189, 189);
        width:960px;
        height:200px;
        margin:auto;
        padding:0;
        overflow-y: scroll;
        scrollbar-face-color: #889B9F;
        scrollbar-shadow-color: #3D5054;
        scrollbar-highlight-color: #C3D6DA;
        scrollbar-3dlight-color: #3D5054;
        scrollbar-darkshadow-color: #85989C;
        scrollbar-track-color: #95A6AA;
        scrollbar-arrow-color: #FFD6DA;
    }
    #g{
        color:black;
        background-color:rgb(206, 247, 243);
        width:960px;
        height:200px;
        margin:auto;
        padding:0;
    }
    #h{
        float:right;
    }
    .nav{
        background-color: antiquewhite;
        height: 40px;
        line-height: 40px;
        margin-top:-3px;
     
    }
    .nav:hover{
        background-color: rgb(236, 181, 114);
    }
    .t{
        width: 100%;
        border-style:solid;
        border-width:0px;
        border-color:rgb(182, 181, 181);

    }
    .t tr{
        height: 30px;
        
    }
    .t td{
        width: 490px;
    }
    .t1{
       text-align: center;
       vertical-align: middle;
    }
    .t1 td{
        width:190px；
    }
    .t2{
        width:960px;
        vertical-align: middle;
        text-decoration: underline;
    }
    .t3{
        width:960px;
        height: 200px;
    }
    .t3 th{
        height: 20px;
    }
    .t3 td{
        width: 190px;
    }
    img{
        width: 100px;
        height: 100px;
        margin: -3px;
    }
    /* 搜索框位置 */
    #i{
        margin-left: -5px;
        margin-right:100px; 
    }

</style>
<body>
    <div id=a>
        <div id="b">
            <table class="t2">
                <tr>
                    <td width="100px"><img src="丑小鹿.png"></td>
                    <td >丑小鹿.COM</td>
                    <td>
                        <div id="h">
                            <input type="text">
                             <input  id="i" type="button" value="搜索" >
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="c">      
            <table class="t1">
                <tr height="40px">
                    <td width="190px"><div class="nav">首页</div></td>
                    <td width="190px"><div class="nav">保险</div></td>
                    <td width="190px"><div class="nav">最新行情</div></td>
                    <td width="190px"><div class="nav">专题</div></td>
                    <td width="190px"><div class="nav">百科</div></td>
                </tr>
            </table>
        </div>
        <div id="d">循环图片</div>
        <div id="e">
            <table class="t3">
                <tr>
                    <td>宝马</td>
                    <td>奥迪</td>
                    <td>大众</td>
                    <td>雪铁龙</td>
                    <td>本田</td>
                </tr>
                <tr>
                    <td>五菱荣光</td>       
                    <td>保时捷</td>
                    <td>斯科达</td>
                    <td>特斯拉</td>
                    <td>红旗</td>
                </tr>
                <tr>
                    <td>布加迪</td>
                    <td>奔驰</td>
                    <td>福特</td>
                    <td>吉普</td>
                    <td>比亚迪</td>
                </tr>
                <tr>
                    <td>宾利</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div id="f">资讯
            <table class="t">
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td>14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td>16</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>20</td>
                </tr>
            </table>
            </div>
        <div id="g">汽车保养</div>
        <div>工信部备案号 602科技有限公司</div>
    </div>
    
</body>
以上就是博主自己做的一个简单的网页模板，大家如果喜欢的话自取啊。