日历运用模式嵌套布局定位

最新推荐文章于 2022-07-12 11:56:17 发布
Goddess_liangyanli
最新推荐文章于 2022-07-12 11:56:17 发布
阅读量1.4k
点赞数 3
文章标签：总结方法标签布局
本文链接：https://blog.csdn.net/sinat_39430615/article/details/75208734
版权
代码运行：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日历</title>
<style>
    .maxbox{
        border: 2px solid #71b9fe;
        width: 540px;
        height: 370px;
        margin: 5px auto;
        position: relative;
        background-color:#71b9fe;
    }
    .letfbox{
        width: 407px;
        height: 368px;
        background-color:aliceblue;
        pasition:10px;

    }
    .rightbox{
        width: 127px;
        height: 350px;
        position: absolute;
        top: 0px;
        right:0px;
    }

    table{
        width: 387px;
        font-size: 18px;
    }
    p{
        margin:2px 0;
        text-align: center;
    }
 .yangli{
     font-size: 18px;
     font-weight: bold;
 }
    .yinli{
       font-size: 12px;
    }
    .b-bottom{
        border-bottom: 1px solid #aaa;
    }
    .weidao{
        color:#cccccc ;
        font-size: 12px;
    }
    .big-14{
        width: 76px;
        height: 76px;
        background:yellow;
        font-size: 60px;
        font-weight: bold;
        color: white;
        text-align: center;
        margin: 0 auto;
    }
    style{
        margin:2px 0;
        text-align: center;
    }

    .d-dottom{
        font-size:16px;
        color: #eeffff;
    }
.max-p{
    font-size: 24px;
    color: #eeffff;
}
    .kuai{
        width: 40px;
        height:16px;
        font-size: 18px;
        color: white;
        background-color: #febd00;
    }
    .hang{
        width:395px;
        height:55px;
        text-align: center ;
        position:relative ;
        top: 10px;
        left: 10px
    }
   .dyestuff{
       color: red;
       font-size: 14px;
   }
   .block{
      width: 65px;
       height: 180px;
       position: absolute;
       left:8px;
       top:200px;
   }
    .block1{
        width: 60px;
        height:430px;
        position:absolute;
        right:8px;
        top:200px;
    }
    .no{
        width: 120px;
        color: white;
        height: 1px;
    }
.gao{
    height: 25px;
}
    .hang1{
        width: 370px;
        color: #71b9fe;
        text-align: center;
    }
    select{
        width: 85px;
        height: 25px;
        position: relative;
        top: 10px;
    }
    table{
        position: relative;
        left: 15px;
    }
 a{
    text-decoration: none;
}

</style>
</head>
<body>
<div class="maxbox">
<div class="letfbox">
    <div class="letfbox-top">
        <div class="hang">
        <select>
  <option>2017年</option>
  <option>2018年</option>
  <option>2019年</option>
  <option>2020年</option>
  <option>2021年</option>
  <option>2022年</option>
  <option>2023年</option>
  <option>2024年</option>
  <option>2025年</option>
        </select>
        <select>
        <option>7月</option>
        <option>8月</option>
        <option>9月</option>
        <option>10月</option>
        <option>11月</option>
        <option>12月</option>
        <option>13月</option>
        <option>14月</option>
    </select>
        <select>
            <option>假期安排</option>
        </select>
            <button style="position: relative; top: 10px">返回今天</button>
    </div>
    </div>
    <hr class="hang1">
    <table border="0" cellspacing="0" >
        <tr align="center">
           <a><td class="b-bottom gao">一</td></a>
            <td class="b-bottom gao">二</td>
            <td class="b-bottom gao">三</td>
            <td class="b-bottom gao">四</td>
            <td class="b-bottom gao">五</td>
            <td class="b-bottom gao dyestuff">六</td>
            <td class="b-bottom gao dyestuff">日</td>
        </tr><tr>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">26</p><p class="weidao">初三</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">27</p><p class="weidao">初四</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">28</p><p class="weidao">初五</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">29</p><p class="weidao">初六</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">30</p><p class="weidao">初七</p></a></td>
            <td class=" b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">1</p><p class="weidao dyestuff">建党节</p></a></td>
            <td class=" b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">2</p><p class="weidao dyestuff">初九</p></a></td>
        </tr><tr>
            <td class="b-bottom"><a href="#"><p class="yangli">3</p><p class="weidao">初十</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">4</p><p class="weidao">十一</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">5</p><p class="weidao">十二</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">6</p><p class="weidao">十三</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">7</p><p class="weidao">小暑</p></a></td>
            <td class="b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">8</p><p class="weidao dyestuff">十五</p></a></td>
            <td class="b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">10</p><p class="weidao dyestuff">十六</p></a></td>
        </tr><tr>
            <td class="b-bottom"><a href="#"><p class="yangli">11</p><p class="weidao">十七</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">12</p><p class="weidao">十八</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">13</p><p class="weidao">二十</p></a></td>
            <td class="kuai"><a href="#"><p>14</p><p class="kuai">廿一</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">15</p><p class="weidao">廿二</p></a></td>
            <td class="b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">16</p><p class="weidao dyestuff">廿三</p></a></td>
            <td class="b-bottom dyestuff"><a href="#"><p class="yangli dyestuff">17</p><p class="weidao dyestuff">廿四</p></a></td>
        </tr><tr>
            <td class="b-bottom"><a href="#"><p class="yangli">18</p><p class="weidao">廿五</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">19</p><p class="weidao">廿六</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">20</p><p class="weidao">廿七</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">21</p><p class="weidao">廿八</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">22</p><p class="weidao">大暑</p></a></td>
            <td class="b-bottom weidao dyestuff"><a href="#"><p class="yangli dyestuff">23</p><p class="weidao dyestuff">初一</p></a></td>
            <td class="b-bottom weidao dyestuff"><a href="#"><p class="yangli dyestuff">24</p><p class="weidaodyestuff">初二</p></a></td>
        </tr><tr>
            <td class="b-bottom"><a href="#"><p class="yangli">25</p><p class="weidao">初三</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">26</p><p class="weidao">初四</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">27</p><p class="weidao">初五</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">28</p><p class="weidao">初六</p></a></td>
            <td class="b-bottom"><a href="#"><p class="yangli">29</p><p class="weidao">初七</p></a></td>
            <td class="b-bottom weidao dyestuff"><a href="#"><p class="yangli dyestuff">30</p><p class="weidao dyestuff">初八</p></a></td>
            <td class="b-bottom weidao dyestuff"><a href="#"><p class="yangli dyestuff">31</p><p class="weidao dyestuff">初九</p></a></td>
        </tr><tr>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">1</p><p class="yinli">建军节</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">2</p><p class="yinli">十一</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">3</p><p class="yinli">十二</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">4</p><p class="yinli">十三</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli">5</p><p class="yinli">十四</p></a></td>
            <td class="b-bottom weidao "><a href="#"><p class="yangli dyestuff">6</p><p class="weidao dyestuff">十五</p></a></td>
            <td class="b-bottom weidao"><a href="#"><p class="yangli dyestuff">7</p><p class="weidao dyestuff">十六</p></a></td>

    </tr></table>
    <div class="rightbox">
    <p class="d-dottom">2017-7-14</p>
        <pre></pre>
<div class="big-14">14</div>
        <p class="d-dottom">星期五</p>
        <p class="d-dottom">丁丑年【鸡年】</p>
        <p class="d-dottom">六月廿一</p>
        <p class="d-dottom">天蝎座</p>
        <div class="block">
            <p class="max-p">宜</p>
            <p class="d-dottom">破屋</p>
            <p class="d-dottom">解除</p>
            <p class="d-dottom">坏垣</p>
            <p class="d-dottom">余事勿取</p>
        </div>
<hr class="no">
<div class="block1">
    <p class="max-p">忌</p>
    <p class="d-dottom">嫁娶</p>
    <p class="d-dottom">安葬</p>
</div>

</div>
</div>
</div>
</body>
</html>
运行结果：
Goddess_liangyanli
关注
3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日历运用模式嵌套布局定位

代码运行：HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ti
复制链接

扫一扫