(四)play之yabe項目【頁面】

時間  2019-11-17
標籤 play yabe 項目 頁面 简体版
原文   原文鏈接

(四)play之yabe項目【頁面】

博客分類：
 

主頁面css

顯示當前發表博客的完整內容，以及歷史博客列表html

 

Bootstrap Jobjava

一個play job任務就是一個在沒有任何http請求的狀況下執行一些特定的方法web

應用程序在啓動時或間隔必定時間後自動執行某個方法mvc

應用程序啓動便執行基礎數據的初始化操做：app

Java代碼   收藏代碼
  1. import models.User;  
  2. import play.jobs.Job;  
  3. import play.jobs.OnApplicationStart;  
  4. import play.test.Fixtures;  
  5.   
  6. /** 
  7.  * 使用@OnApplicationStart註釋Job，告訴Play在應用程序啓動時便執行這個任務 
  8.  * DEV模式和PROD模式下，任務執行狀況不一樣 
  9.  *      DEV模式：等到第一個客戶端請求才會執行 
  10.  *      PROD模式：應用程序啓動時就執行 
  11.  * @author lenovo 
  12.  * 
  13.  */  
  14.   
  15. @OnApplicationStart  
  16. public class Bootstrap extends Job {  
  17.       
  18.     public void doJob() {  
  19.         //檢查用戶是否爲空  
  20.         if(User.count()==0) {  
  21.             Fixtures.loadModels("initial-data.yml");  
  22.         }  
  23.     }  
  24.       
  25. }  

    其中，在yabe\conf目錄下新建initial-data.yml文件，用來初始化Blog系統的基礎數據！框架

           

Xml代碼   收藏代碼
  1. # Test data  
  2.   
  3. User(bob):  
  4.     email:          bob@gmail.com  
  5.     password:       secret  
  6.     fullname:       Bob  
  7.     isAdmin:        true  
  8.       
  9. User(jeff):  
  10.     email:          jeff@gmail.com  
  11.     password:       secret  
  12.     fullname:       Jeff      
  13.       
  14. User(paul):  
  15.     email:          paul@gmail.com  
  16.     password:       secret  
  17.     fullname:       Paul      
  18.       
  19.       
  20. Post(firstBobPost):  
  21.     title:          About the model layer  
  22.     postedAt:       2009-06-14  
  23.     author:         bob  
  24.     content:        >  
  25.                     The model has a central position in a Play! application. It is the domain-specific   
  26.                     representation of the information on which the application operates.  
  27.                        
  28.                     Martin fowler defines it as :  
  29.                           
  30.                     Responsible for representing concepts of the business, information about the   
  31.                     business situation, and business rules. State that reflects the business situation   
  32.                     is controlled and used here, even though the technical details of storing it are   
  33.                     delegated to the infrastructure. This layer is the heart of business software.  
  34.   
  35. Post(secondBobPost):  
  36.     title:          Just a test of YABE  
  37.     postedAt:       2009-03-25  
  38.     author:         bob  
  39.     content:        >  
  40.                     Well, it's just a test.  
  41.                       
  42. Post(jeffPost):  
  43.     title:          The MVC application  
  44.     postedAt:       2009-06-06  
  45.     author:         jeff  
  46.     content:        >  
  47.                     A Play! application follows the MVC architectural pattern as applied to the   
  48.                     architecture of the Web.  
  49.                        
  50.                     This pattern splits the application into separate layers: the Presentation   
  51.                     layer and the Model layer. The Presentation layer is further split into a   
  52.                     View and a Controller layer.  
  53.                       
  54. Comment(c1):  
  55.     author:         Guest  
  56.     content:        >  
  57.                     You are right !  
  58.     postedAt:       2009-06-14  
  59.     post:           firstBobPost  
  60.       
  61. Comment(c2):  
  62.     author:         Mike  
  63.     content:        >  
  64.                     I knew that ...  
  65.     postedAt:       2009-06-15  
  66.     post:           firstBobPost      
  67.       
  68. Comment(c3):  
  69.     author:         Tom  
  70.     content:        >  
  71.                     This post is useless ?  
  72.     postedAt:       2009-04-05  
  73.     post:           secondBobPost      

  

 

     打開yabe\app\controllers\Application.java，修改index()less

Java代碼   收藏代碼
  1. package controllers;  
  2.   
  3. import play.*;  
  4. import play.mvc.*;  
  5.   
  6. import java.util.*;  
  7.   
  8. import models.*;  
  9.   
  10. public class Application extends Controller {  
  11.   
  12.     public static void index() {  
  13.         //最新的博客  
  14.         Post frontPost = Post.find("order by postedAt desc").first();  
  15.         //過去的博客  
  16.         List<Post> olderPosts = Post.find("order by postedAt desc").from(1).fetch(10);  
  17.           
  18.         render(frontPost,olderPosts);  
  19.     }  
  20.   
  21. }  

 

修改yabe\app\views\Application\index.htmldom

action經過render()傳遞對象，在模塊中只須要使用${xxx}就能獲取到相應的對象，進而展示數據。post

 

Html代碼   收藏代碼
  1. #{extends 'main.html' /}  
  2. #{set title:'Home' /}  
  3.   
  4. #{if frontPost}  
  5.     <div class="post">  
  6.         <h2 class="post-title">  
  7.             <a href="#">${frontPost.title}</a>  
  8.         </h2>  
  9.         <div class="post-metadata">  
  10.             <span class="post-author">by ${frontPost.author.fullname}</span>  
  11.             <span class="post-date">${frontPost.postedAt.format('MMMdd')}</span>  
  12.             <span class="post-comments">  
  13.                 &nbsp;|&nbsp;  
  14.                 ${frontPost.comments.size() ?: 'no'}  
  15.                 comment${frontPost.comments.size().pluralize()}  
  16.                 #{if frontPost.comments}  
  17.                     , latest by ${frontPost.comments[-1].author}  
  18.                 #{/if}  
  19.             </span>  
  20.         </div>  
  21.         <div class="post-content">  
  22.             ${frontPost.content.nl2br()}  
  23.         </div>  
  24.     </div>  
  25.       
  26.     #{if olderPosts}  
  27.         <div class="older-posts">  
  28.             <h3>  
  29.                 Older posts <span class="from">from this blog</span>  
  30.             </h3>  
  31.             #{list items:olderPosts, as:'oldPost'}  
  32.                 <div class="post">  
  33.                     <h2 class="post-title">  
  34.                         <a href="#">${oldPost.title}</a>  
  35.                     </h2>  
  36.                     <div class="post-metadata">  
  37.                         <span class="post-author">by ${oldPost.author.fullname}</span>  
  38.                         <span class="post-date">${oldPost.postedAt.format('dd MMM yy')}</span>  
  39.                         <div class="post-comments">  
  40.                             ${oldPost.comments.size() ?: 'no'}  
  41.                             comment${oldPost.comments.size().pluralize()}  
  42.                             #{if oldPost.comments}  
  43.                                 - latest by ${oldPost.comments[-1].author}  
  44.                             #{/if}  
  45.                         </div>  
  46.                     </div>  
  47.                 </div>  
  48.             #{/list}  
  49.         </div>  
  50.     #{/if}  
  51.       
  52. #{/if}  
  53.   
  54. #{else}  
  55.     <div class="empty">  
  56.         There is currently nothing to read here!  
  57.     </div>  
  58. #{/else}  

 

刷新頁面http://localhost:9000/


抽取相同部分出來，提升代碼複用性

新增yabe\app\views\tags\display.html 

display.html被index.html使用標籤(另外一個模板)方式進行操做

因爲index.html中經過#{display post:frontPost, as:'home' /}來調用display.html模板

則display.html中就能夠經過_post 和 _as 來獲取對應的參數值

Html代碼   收藏代碼
  1. #{extends 'main.html' /}  
  2. #{set title:'Home' /}  
  3.   
  4. <div class="post ${_as == 'teaser' ? 'teaser' : ''}">  
  5.     <h2>  
  6.         <a href="#">${_post.title}</a>  
  7.     </h2>  
  8.     <div class="post-metadata">  
  9.         <span class="post-author">by ${_post.author.fullname}</span>  
  10.         <span class="post-date">${_post.postedAt.format('dd MMM yy')}</span>  
  11.         #{if _as!='full'}  
  12.             <span class="post-comments">  
  13.                 &nbsp;|&nbsp;  
  14.                 ${_post.comments.size() ?: 'no'}  
  15.                 comment${_post.comments.size().pluralize()}  
  16.                 #{if _post.comments}  
  17.                     , latest by ${_post.comments[-1].author}  
  18.                 #{/if}  
  19.             </span>  
  20.         #{/if}  
  21.     </div>  
  22.       
  23.     #{if _as!='teaser'}  
  24.         <div class="post-content">  
  25.             <div class="about">Detail:</div>  
  26.             ${_post.content.nl2br()}  
  27.         </div>  
  28.     #{/if}  
  29. </div>  
  30.   
  31. #{if _as=='full'}  
  32.     <div class="comments">  
  33.         <h3>  
  34.             ${_post.comments.size() ?: 'no'}  
  35.             comment${_post.comments.size().pluralize()}  
  36.         </h3>  
  37.         #{list items:_post.comments, as:'comment'}  
  38.             <div class="comment">  
  39.                 <div class="comment-metadata">  
  40.                     <span class="comment-author">by ${comment.author},</span>  
  41.                     <span class="comment-data">${comment.postedAt.format('dd MMM yy')}</span>  
  42.                 </div>  
  43.                 <div class="comment-content">  
  44.                     <div class="about">Detail: </div>  
  45.                     ${comment.content.escape().nl2br()}  
  46.                 </div>  
  47.             </div>  
  48.         #{/list}  
  49.     </div>  
  50. #{/if}  

 修改index.html，直接經過display模板完成頁面的顯示

Html代碼   收藏代碼
  1. #{extends 'main.html' /}  
  2. #{set title:'Home' /}  
  3.   
  4. #{if frontPost}  
  5.         <!--調用display模板-->  
  6.     #{display post:frontPost, as:'home' /}  
  7.       
  8.     #{if olderPosts.size()}  
  9.         <div class="older-posts">  
  10.             <h3>  
  11.                 Older posts <span class="form">from this blog</span>  
  12.             </h3>  
  13.             #{list items:olderPosts ,as:'oldPost'}  
  14.                                 <!--調用display模板-->  
  15.                 #{display post:oldPost, as:'teaser' /}  
  16.             #{/list}  
  17.         </div>  
  18.     #{/if}  
  19.       
  20. #{/if}  
  21.   
  22. #{else}  
  23.     <div class="empty">  
  24.         There is currently nothing to read here!  
  25.     </div>  
  26. #{/else}  

 刷新頁面



 

 修改yabe\public\stylesheets\main.css，對頁面進行美觀修飾



 

附：main.css

Html代碼   收藏代碼
  1. /** Main layout **/  
  2.   
  3. html, body {  
  4.     background: #364B66 !important;  
  5.     font-family: Helvetica, Arial, Sans !important;  
  6. }  
  7.   
  8. body {  
  9.     width: 900px;  
  10.     padding: 0 30px;  
  11.     margin: auto;  
  12. }  
  13.   
  14. /** Blog header **/  
  15.   
  16. #header {  
  17.     padding: 10px 0;  
  18.     position: relative;  
  19. }  
  20.   
  21. #logo {  
  22.     display: block;  
  23.     height: 49px;  
  24.     margin-left: 20px;  
  25.     color: #fff;  
  26.     font-size: 48px;  
  27.     font-weight: bold;  
  28.     letter-spacing: -4px;  
  29.     text-shadow: 1px 2px 2px #000;  
  30. }  
  31.   
  32. #logo span {  
  33.     color: #f00;  
  34.     font-size: 70%;  
  35. }  
  36.   
  37. #tools {  
  38.     list-style: none;  
  39.     margin: 0;  
  40.     padding: 0;  
  41.     position: absolute;  
  42.     right: 0;  
  43.     top: 30px;  
  44.     right: 20px;  
  45. }  
  46.   
  47. #tools a {  
  48.     color: #fff;  
  49.     text-decoration: none;  
  50. }  
  51.   
  52. #title {  
  53.     background: #B8C569;  
  54.     padding: 20px 30px 30px 20px;  
  55.     margin: 20px 0;  
  56.     color: #3C4313;  
  57.     position: relative;  
  58.     -webkit-border-radius: 16px;  
  59.     -webkit-box-shadow: 0 2px 0 #93A045;  
  60.     -moz-border-radius: 16px;  
  61. }  
  62.   
  63. /** A little hacky to create arrows without images **/  
  64. .about {  
  65.     text-indent: -999em;  
  66.     display: block;  
  67.     width: 0;   
  68.     height: 0;   
  69.     border-left: 10px solid transparent;   
  70.     border-right: 10px solid transparent;  
  71.     border-bottom: 10px solid #BAC36E;  
  72.     border-top: 0;  
  73.     position: absolute;  
  74.     top: -10px;  
  75.     left: 60px;  
  76. }  
  77.   
  78. #title h1 {  
  79.     font-size: 64px;  
  80.     margin: 0;  
  81. }  
  82.   
  83. #title h1 a {  
  84.     text-decoration: none;  
  85.     color: inherit;  
  86. }  
  87.   
  88. #title h2 {  
  89.     font-size: 26px;  
  90.     margin: 0;  
  91.     font-weight: normal;  
  92. }  
  93.   
  94. /** Main content **/  
  95.   
  96. #main {  
  97.     background: #314660;  
  98.     background: -webkit-gradient(linear, left top, left 30%, from(#314660), to(#364B66));  
  99.     -webkit-border-radius: 16px;  
  100.     -moz-border-radius: 16px;  
  101.     padding: 20px;  
  102. }  
  103.   
  104. /** Post **/  
  105.   
  106. .post .post-title {  
  107.     margin: 0;  
  108. }  
  109.   
  110. .post .post-title a {  
  111.     font-size: 36px;  
  112.     color: #F5C2CC;  
  113.     text-decoration: none;  
  114. }  
  115.   
  116. .post .post-metadata {  
  117.     color: #BAC36E;  
  118.     display: block;  
  119.     font-size: 70%;  
  120.     display: inline-block;  
  121. }  
  122.   
  123. .post .post-author {  
  124.     font-size: 130%;  
  125.     font-weight: bold;  
  126. }  
  127.   
  128. .post .post-metadata a {  
  129.     color: #9FA85D;  
  130. }  
  131.   
  132. .post .post-content {  
  133.     position: relative;  
  134.     background: #fff;  
  135.     padding: 10px;  
  136.     margin: 10px 0 50px 0;  
  137.     -webkit-border-radius: 10px;  
  138.     -moz-border-radius: 10px;  
  139.     -webkit-box-shadow: 0 2px 0 #BBBBBB;  
  140. }  
  141.   
  142. .post .about {  
  143.     text-indent: -999em;  
  144.     display: block;  
  145.     width: 0;   
  146.     height: 0;   
  147.     border-left: 10px solid transparent;   
  148.     border-right: 10px solid transparent;  
  149.     border-bottom: 10px solid #fff;  
  150.     border-top: 0;  
  151.     position: absolute;  
  152.     top: -6px;  
  153.     left: 24px;  
  154. }  
  155.   
  156.   
  157. /** Older posts **/  
  158.   
  159. .older-posts h3 {  
  160.     color: #869AB1;  
  161.     font-size: 28px;  
  162.     margin-bottom: 15px;  
  163. }  
  164.   
  165. .older-posts h3 .from {  
  166.     font-weight: normal;  
  167.     font-size: 70%;  
  168. }  
  169.   
  170. .older-posts .post {  
  171.     margin-bottom: 15px;  
  172.     border-left: 3px solid #869AB1;  
  173.     padding-left: 10px;  
  174. }  
  175.   
  176. .older-posts .post-title a {  
  177.     padding: 0;  
  178.     color: #131921;  
  179.     font-size: 20px;  
  180. }  
  181.   
  182. .older-posts .post-metadata {  
  183.     color: #869AB1;  
  184.     padding: 0;  
  185.     font-size: 12px;  
  186. }  
  187.   
  188. .older-posts .post-metadata a {  
  189.     color: #869AB1;  
  190. }  
  191.   
  192. /** Comments **/  
  193.   
  194. .comments {  
  195.     margin-bottom: 30px;  
  196. }  
  197.   
  198. h3 {  
  199.     color: #869AB1;  
  200.     font-size: 18px;  
  201.     margin-bottom: 15px;  
  202. }  
  203.   
  204. h3 span {  
  205.     font-size: 80%;  
  206.     font-weight: normal;  
  207. }  
  208.   
  209. .comment {  
  210.     width: 70%;  
  211.     clear: both;  
  212. }  
  213.   
  214. .comment .comment-metadata {  
  215.     color: #869AB1;  
  216.     display: block;  
  217.     font-size: 50%;  
  218.     display: block;  
  219.     float: left;  
  220.     width: 80px;  
  221.     text-align: right;  
  222. }  
  223.   
  224. .comment .comment-author {  
  225.     font-size: 150%;  
  226.     font-weight: bold;  
  227.     display: block;  
  228. }  
  229.   
  230. .comment .comment-content {  
  231.     position: relative;  
  232.     background: #E4EAFF;  
  233.     color: #242C58;  
  234.     font-size: 80%;  
  235.     margin-top: 10px;  
  236.     margin-bottom: 10px;  
  237.     margin-left: 100px;  
  238.     padding: 10px;  
  239.     -webkit-border-radius: 10px;  
  240.     -moz-border-radius: 10px;  
  241. }  
  242.   
  243. .comment .about {  
  244.     text-indent: -999em;  
  245.     display: block;  
  246.     width: 0;   
  247.     height: 0;   
  248.     border-top: 10px solid transparent;   
  249.     border-bottom: 10px solid transparent;  
  250.     border-right: 10px solid #E4EAFF;  
  251.     border-left: 0;  
  252.     position: absolute;  
  253.     top: 4px;  
  254.     left: -4px;  
  255. }  
  256.   
  257. /** Form **/  
  258.   
  259. form {  
  260.     padding: 10px;  
  261.     background: #253142;  
  262.     background: -webkit-gradient(linear, left top, left 60%, from(#253142), to(#364B66));  
  263.     -webkit-border-radius: 10px;  
  264.     -moz-border-radius: 10px;  
  265. }  
  266.   
  267. form .error {  
  268.     background: #c00;  
  269.     color: #fff;  
  270.     font-size: 90%;  
  271.     padding: 3px 5px;  
  272.     -webkit-border-radius: 6px;  
  273.     -moz-border-radius: 6px;  
  274.     -webkit-box-shadow: 0 2px 0 #800;  
  275. }  
  276.   
  277. form .error:empty {  
  278.    display: none;    
  279. }  
  280.   
  281. form p {  
  282.     margin: 5px 0 0 0;  
  283. }  
  284.   
  285. form textarea {  
  286.     width: 70%;  
  287.     height: 150px;  
  288. }  
  289.   
  290. form input, form textarea {  
  291.     font-size: 14px;  
  292. }  
  293.   
  294. form label {  
  295.     display: block;  
  296.     font-weight: bold;  
  297.     font-size: 90%;  
  298.     color: #aaa;  
  299.     margin-bottom: 3px;  
  300. }  
  301.   
  302. #captcha{  
  303.     display: block;  
  304.     height: 50px;    
  305. }  
  306.   
  307. .success {  
  308.     background: #67AD10;  
  309.     color: #fff;  
  310.     padding: 10px;  
  311.     -webkit-border-radius: 6px;  
  312.     -moz-border-radius: 6px;  
  313.     -webkit-box-shadow: 0 2px 0 #4E840B;   
  314. }  
  315.   
  316. /** Pagination **/  
  317.   
  318. #pagination {  
  319.     list-style: none;  
  320.     padding: 0;  
  321.     position: relative;  
  322.     color: #869AB1;  
  323.     font-size: 90%;  
  324.     top: -20px;  
  325.     margin-bottom: 30px;  
  326. }  
  327.   
  328. #pagination a {  
  329.     color: #869AB1;  
  330.     font-size: 90%;  
  331. }  
  332.   
  333. #pagination #previous {  
  334.     position: absolute;  
  335.     top: 0;  
  336.     left: 0;  
  337. }  
  338.   
  339. #pagination #previous:before {  
  340.     content: '<< ';  
  341. }  
  342.   
  343. #pagination #next {  
  344.     position: absolute;  
  345.     top: 0;  
  346.     right: 0;  
  347. }  
  348.   
  349. #pagination #next:after {  
  350.     content: ' >>';  
  351. }  
  352.   
  353. /** Footer **/  
  354.   
  355. #footer {  
  356.     border-top: 1px solid #45597A;  
  357.     font-size: 70%;  
  358.     padding: 10px 30px;  
  359.     text-align: center;  
  360.     color: #869AB1;  
  361.     margin-top: 30px;  
  362. }  
  363.   
  364. #footer a {  
  365.     color: #869AB1;  
  366.     font-weight: bold;  
  367. }  
  368.   
  369. /** Admin **/  
  370.   
  371. .tags-list .tag {  
  372.     cursor: pointer;  
  373.     color: red;  
  374. }  
  375.   
  376. #adminMenu {  
  377.     list-style: none;  
  378.     padding: 0;  
  379.     margin: 0 0 20px 0;  
  380. }  
  381.   
  382. #adminMenu li {  
  383.     display: inline;  
  384. }  
  385.   
  386. #adminMenu li a {  
  387.     color: #fff;  
  388.     text-decoration: none;  
  389.     font-size: 80%;  
  390.     background: #591C64;  
  391.     padding: 2px 10px;  
  392.     -webkit-border-radius: 9px;  
  393.     -moz-border-radius: 9px;  
  394. }  
  395.   
  396. #adminMenu li.selected a {  
  397.     background: #82A346;  
  398. }  
  399.   
  400. #crudContent {  
  401.     color: #8B98AD;  
  402. }  
  403.   
  404. #crudContent h2 {  
  405.     color: #EDC3CD !important;  
  406. }  
  407.   
  408. #crudContent thead tr {  
  409.     background: #512162 !important;  
  410. }  
  411.   
  412. #crudContent table {  
  413.     border: none !important;  
  414. }  
  415.   
  416. #crudContent table td {  
  417.     color: #444;  
  418. }  
  419.   
  420. tr.odd {  
  421.     background: #BECCE7 !important;  
  422. }  
  423.   
  424. #crud #crudContent, #crudContent form, #crudListSearch, #crudListPagination, .crudButtons {  
  425.     background: transparent;  
  426.     border: none;  
  427.     padding: 0;  
  428. }  
  429.   
  430. #crudListTable {  
  431.     margin: 10px 0;  
  432. }  
  433.   
  434. .crudField, .objectForm {  
  435.     border: none;  
  436.     padding-left: 0;  
  437. }  
  438.   
  439. .crudField label {  
  440.     color: #B8FA5C;  
  441. }  
  442.   
  443. .crudHelp {  
  444.     color: #fff !important;  
  445. }  
  446.   
  447. .crudField .tag {  
  448.     color: #111;  
  449.     font-size: 80%;  
  450. }  
  451.   
  452. .crudButtons input {  
  453.     font-size: 110%;  
  454. }  
  455.   
  456. .crudButtons {  
  457.     margin-top: 20px;  
  458.     border-top: 1px dotted #8B98AD;  
  459.     padding-top: 10px;  
  460. }  
  461.   
  462. .crudFlash {  
  463.     border: 0;  
  464.     -webkit-border-radius: 8px;  
  465.     font-size: 80%;  
  466.     padding: 2px 10px;  
  467. }  
  468.   
  469. .crudField .tag.selected {  
  470.     -webkit-border-radius: 8px;  
  471.     -moz-border-radius: 8px;  
  472. }  
  473.   
  474. .crudField .error {  
  475.     background: transparent;  
  476.     border: none;  
  477.     padding: 0;  
  478.     color: pink;  
  479.     -webkit-box-shadow: none;  
  480. }  
  481.   
  482. /** Login **/  
  483.   
  484. #login form {  
  485.     background: #8B98AD !important;  
  486.     border: 0 !important;  
  487.     -webkit-border-radius: 16px;  
  488.     -moz-border-radius: 16px;  
  489. }  
  490.   
  491. #login label, #password-field label, #username-field label {  
  492.     color: #161D28 !important;  
  493.     font-size: 110% !important;  
  494. }  
  495.   
  496.   
  497. #remember-field {  
  498.     display: none;  
  499. }  
  500.   
  501. /** My posts **/  
  502.   
  503. #admin .post {  
  504.     background: #fff;  
  505.     padding: 4px;  
  506.     margin: 0;  
  507.     font-size: 90%;  
  508. }  
  509.   
  510. #admin .post.odd {  
  511.     background: #C0CBE5;  
  512. }  
  513.   
  514. #admin .post a {  
  515.     color: #444;  
  516. }  
  517.   
  518. #newPost {  
  519.     border-top: 1px dotted #C0CBE5;  
  520.     padding-top: 15px;  
  521. }  
  522.   
  523. #newPost a {  
  524.     background: #C88116;  
  525.     -webkit-border-radius: 12px;  
  526.     -moz-border-radius: 12px;  
  527.     padding: 5px 10px;  
  528.     font-size: 80%;  
  529.     text-decoration: none;  
  530.     color: #fff;  
  531.     font-weight: bold;  
  532.     -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3);  
  533. }  
  534.   
  535. #newPost a span {  
  536.     background: #7D510E;  
  537.     -webkit-border-radius: 8px;  
  538.     -moz-border-radius: 8px;  
  539.     padding: 0 5px 2px 5px;  
  540.     position: relative;  
  541.     top: -1px;  
  542. }  
  543.   
  544. #postContent {  
  545.     width: 100%;  
  546.     height: 300px;  
  547. }  
  548.   
  549. .hasError {  
  550.     background: pink;  
  551. }  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程