html-css实例
生活随笔
收集整理的這篇文章主要介紹了
html-css实例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>求簽</title><style type="text/css">*{margin: 0px;padding: 0px;font-family: "微軟雅黑",arial,sans-serif;}body{background: url(img/bg.png);}div{font-size: 10px;}.container{width: 400px;margin: 50px auto;}.container >.title{color: white;font-weight: bold;margin-bottom: 10px;background: -webkit-gradient(linear,left top,left bottom, from(#321def), to(#654abc), color-stop(0.5,#1a2b3c));padding: 5px 15px;font-size: 120%;text-align: center;}.date{font-size: 17px;font-weight: bold;line-height: 30px;text-align: center;border-bottom: 1px solid #999999;}.info{text-align: center;color: red;font-size: 9px;}.info strong{background: crimson;color: white;padding: 0 3px;margin: 0 1px;}.check_luck{padding-top: 10px;}.selecttable{width: 100%;}.selecttable td{color: white;text-align: center;padding: 10px 0;margin: 1px;background: -webkit-gradient(linear,left top,left bottom, from(#321def), to(#654abc), color-stop(0.5,#1a2b3c));cursor: pointer;width: 20%;border-radius: 2px;}.selecttable td:hover{background: rgba(0,0,0,0.5);}/*點擊時候給每個td上類的屬性*/.selecttable td.selected{background: #333333;color: #ffffff;}.roll{height: 200px;border: 1px solid #fafafa;margin-top: 10px;overflow: hidden;position: relative;}.card{background: white;/**/text-align: center;line-height: 200px;border-top: 1px dashed #fafafa;position: absolute;top: 201px;width: 100%;}.card.clickable{background: crimson;color: white;cursor: pointer;}.card .title{font-size: 70px;font-weight: bold;}</style></head><body><div class="container"><div class="title">程序員求簽<sup>sxt</sup></div><div class="date"></div><div class="info"><strong>求</strong>婚喪嫁娶親友疾病升級跳槽隕石核彈各類吉兇</div><div class="check_luck"><table class="event_table selecttable"><tr><td data-event="100">編碼</td><td data-event="200">測試</td><td data-event="300">修改bug</td><td data-event="400">提交代碼</td><td data-event="500">其他</td></tr></table></div><div class="roll"><div class="card" style="top:-1px;font-size: 20px;">請點擊所求之事</div><div class="card clickable"><div class="title">求</div></div></div></div><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">var weeks=["日","一","二","三","四","五","六"];var today=new Date();function getTodayString(){return "今天是"+today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+today.getHours()+":"+today.getMinutes()+"星期"+weeks[today.getDay()];}/*時間顯示到瀏覽器之上*/$('.date').html(getTodayString());</script></body></html>
?
by北京尚學(xué)堂視頻直播公開課的部分代碼
2016-10-22晚
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhzhang/p/5988688.html
總結(jié)
以上是生活随笔為你收集整理的html-css实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求葬花吟歌词！
- 下一篇： C语言之分支结构 if(一)