zoukankan      html  css  js  c++  java

  • (四)play之yabe项目【页面】

    (四)play之yabe项目【页面】

    博客分类：
     

    主页面

    显示当前发表博客的完整内容，以及历史博客列表

    Bootstrap Job

    一个play job任务就是一个在没有任何http请求的情况下执行一些特定的方法

    应用程序在启动时或间隔一定时间后自动执行某个方法

    应用程序启动便执行基础数据的初始化操作：

    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. }  

        其中，在yabeconf目录下新建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      

      

         打开yabeappcontrollersApplication.java，修改index()

    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. }  

    修改yabeappviewsApplicationindex.html

    action通过render()传递对象，在模块中只需要使用${xxx}就能获取到相应的对象，进而展现数据。

    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/


    抽取相同部分出来，提高代码复用性

    新增yabeappviews agsdisplay.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}  

     刷新页面



     

     修改yabepublicstylesheetsmain.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.      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.      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.      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.      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.      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.      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.      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.      100%;  
    546.     height: 300px;  
    547. }  
    548.   
    549. .hasError {  
    550.     background: pink;  
    551. }  
  • 相关阅读:
    2017-2018 第一学期201623班《程序设计与数据结构》-第2&3周作业问题总结
    ## 2020春软件工程助教工作总结【第十周】
    【西北师大-20软工】第一次团队作业成绩汇总
    2020春软件工程助教工作总结【第八周】
    2020春软件工程助教工作总结【第六周】
    【西北师大-20软工】第三次作业成绩汇总
    2020春软件工程助教工作总结【第四周】
    2020春软件工程助教工作总结【第三周】
    2020春软件工程助教工作总结【第二周】
    2020春软件工程助教工作总结 【第一周】
  • 原文地址：https://www.cnblogs.com/zhiji6/p/4445120.html
Copyright © 2011-2022 走看看