Created
June 25, 2012 13:02
-
-
Save jlyu/2988452 to your computer and use it in GitHub Desktop.
id
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding: 0px; | |
| margin: 0px; | |
| font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "STHeiti", "Monaco"; | |
| background-color: #D6D5D2; | |
| background-image: url("/static/img/bg.png"); | |
| min-width: 900px; | |
| } | |
| a:link, a:visited, a:active { | |
| color: #2e8b57; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #CA226B; | |
| text-decoration: non-underline; | |
| } | |
| /* id */ | |
| #respond { float:center; } | |
| #respond form { | |
| margin:0; | |
| padding:0; | |
| } | |
| #respond p{ margin: 20 0 0px 0; } | |
| #respond input[type="text"] { width: 20%; } | |
| #respond textarea { | |
| width: 50%; | |
| height: 100px; | |
| float: center; | |
| } | |
| #respond label { color: #999; } | |
| #respond input, #respond textarea { | |
| background-color: #fff; | |
| border: 3px solid rgba(128, 128, 160, 0.15); | |
| padding: 10px; | |
| font-family:"PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; | |
| color: #4b4b4b; | |
| font-size: 14px; | |
| -webkit-border-radius: 5px; | |
| margin-bottom: 2px; | |
| margin-top: -12px; | |
| } | |
| #respond input:focus, #respond textarea:focus { | |
| border: 2px solid #efefef; | |
| background-color: rgba(255, 255, 255, 1); | |
| } | |
| #respond .submit { | |
| border: none; | |
| cursor: pointer; | |
| color: #666; font-size: 14px; | |
| background-color: #7ac000; | |
| padding: 5px 36px 8px 36px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.42); | |
| -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.46); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.42); | |
| border-top: 1px solid rgba(255, 255, 255, 0.5); | |
| background: -webkit-gradien( | |
| linear, | |
| left bottom, | |
| left top, | |
| color-stop(0.23, #999), | |
| color-stop(0.62, #ccc) | |
| ); | |
| background: -moz-linear-gradient( | |
| center bottom, | |
| #999 23%, | |
| #ccc 62% | |
| ); | |
| } | |
| #respond .submit:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #666; | |
| background: -webkit-gradient( | |
| linear, | |
| left bottom, | |
| left top, | |
| color-stop(0.23, #666), | |
| color-stop(0.62, #999) | |
| ); | |
| background: -moz-linear-gradient( | |
| center bottom, | |
| #666 23%, | |
| #999 62% | |
| ); | |
| } | |
| #respond .submit:active { position: relative; top: 1px; } | |
| #comment-box { | |
| width: 1024px; | |
| margin: 30px auto 0px auto; | |
| background-color: #FFF; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 8px; | |
| border: 2px solid rgba(0,0,0,0.25); | |
| padding: 10px; | |
| color: #1C1C1C; | |
| font-size: 14px; | |
| -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42); | |
| -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 10.42); | |
| } | |
| #reply-box { | |
| width: 1000px; | |
| margin: 10px auto 0px auto; | |
| background-color: #FFECEC; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 8px; | |
| border: 2px solid rgba(0,0,0,0.45); | |
| padding: 10px; | |
| color: #696969; | |
| font-size: 14px; | |
| -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42); | |
| -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42); | |
| } | |
| #more-reply-box { | |
| width: 1000px; | |
| margin: 10px auto 0px auto; | |
| background-color: #EEE; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 8px; | |
| border: 2px solid rgba(0,0,0,0.45); | |
| padding: 10px; | |
| color: #1C1C1C; | |
| font-size: 14px; | |
| -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42); | |
| -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.42); | |
| } | |
| /* class */ | |
| .sep { | |
| margin: 10px 0px 10px 0px; | |
| border-top: 2px solid #f0f0f0; | |
| } | |
| .guest { | |
| color: #296386; | |
| } | |
| .reply_btn { | |
| float: right | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Chain GuestBook</title> | |
| <!-- | |
| <link rel="stylesheet" href="style.css" media="all" type="text/css" /> | |
| <script type="text/javascript" src="berlinix.js" ></script> | |
| --> | |
| </head> | |
| <body> | |
| 怎么称呼你:<input type="text" name="username"><br /> | |
| <form><input type="checkbox" value="isprivcy" id="cb"> | |
| <label for="cb">是否只让chain看?</label> <br /> | |
| <hr /> | |
| <div id="respond" class="topline"> | |
| <form action="/" method="post" id="commentform"> | |
| <p><label for="comment">* Your Message (required)</label> </p> | |
| <textarea name="comment" id="commentbox" tabindex="1"></textarea> | |
| <p><input type="text" id="author" name="author" placeholder="访客昵称(必须)" required tabindex="2" /> | |
| <label for="name">Name (required)</label></p> | |
| <p><input type="text" id="email" name="email" placeholder="留下你的邮箱,第一时间获悉主人的回复" required tabindex="3" /> | |
| <label for="email">Email (required, not published)</label></p> | |
| <p><input type="text" id="url" name="url" placeholder="你来自哪里" tabindex="4" /> | |
| <label for="email">Webpage (Optional)</label></p> | |
| <p><input name="submit" class="submit" type="button" id="submit" tabindex="5" value="留言 >_<" /> </p> | |
| </form> | |
| </div> | |
| <div class="sep"></div> | |
| <div id="comment-box"> | |
| <div class="comments" comment_id="1"> | |
| <div class="content"> | |
| <div class="guest"><a href="www.douban.com" target="_blank">Guest_Name</a> | |
| <span class="post_by"> | 2012-05-14 16:56:11</span> | |
| <span class="reply_btn"> ·Reply </span> | |
| </div> | |
| <p class="text">1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟 | |
| 1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟 | |
| 1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟 | |
| 1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="comment-box"> | |
| <div class="comments" comment_id="2"> | |
| <div class="content"> | |
| <div class="guest">Guest_Name | |
| <span class="post_by"> | 2012-05-14 16:56:11</span> | |
| <span class="reply_btn"> ·Reply </span> | |
| </div> | |
| <p class="text">1 一阵好一阵不好，周期性变化 2 6-7 有时三四十分钟午觉 3 是的（可能做不到每天做不到十五分钟但上下浮动不超过两天五分钟</p> | |
| <div id="reply-box"> | |
| <p class="text">chain: 已回复</p> | |
| </div> | |
| <div id="more-reply-box"> | |
| <p class="text">Guest_Name: 再回复</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment