日历运用模式嵌套 布局 定位
来源:互联网 发布:网狐6603房卡牛牛源码 编辑:程序博客网 时间:2024/06/15 22:24
代码运行:
<!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>运行结果:
阅读全文
3 0
- 日历运用模式嵌套 布局 定位
- Android:LinearLayout布局和其嵌套运用举例
- Android: LinearLayout布局和其嵌套运用举例
- 定位布局
- 布局与日历
- android中的布局--嵌套布局
- android中的布局--嵌套布局
- android布局学习--嵌套布局
- for循环嵌套及运用
- RelativeLayout 布局的运用
- ExtJs嵌套布局
- 布局的嵌套
- Android 布局嵌套
- 布局之间的嵌套
- bootstrpa嵌套式布局
- Windows Phone 嵌套布局
- xml 布局嵌套
- GridView嵌套布局
- url和路由
- Sprak学习之RDD五大特性
- kubernetes多节点部署解析
- Android Bander设计与实现
- FATFS一个小问题搞了我2天才解决.特此发帖,希望大家不要重蹈我的覆辙
- 日历运用模式嵌套 布局 定位
- 链表带环问题【每日一题】
- ES6学习(一)
- VTK之基于Qt的VTK应用程序
- Redhat6.8安装JDK1.8
- hdu个人赛6—1007
- poj3692 Kindergarten【最大独立集】
- #1531:德国心脏病——[Offer收割]编程练习赛18
- linux系统 终端下 cat中文乱码/vim不乱码 或者 cat不乱码/vim中文乱码