評論框和評論列表的實現
阿新 • • 發佈：2018-11-10
一個簡單的評論的列表，現只包含html和css。
介面圖：
html部分：
<head> <meta charset="UTF-8"> <title>text</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/> <meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="pinglun.css"> <style> .test{ height: auto; margin: 0 15%; } </style> </head> <body> <div class="test"> <div lang="en-US" class="gitment-container gitment-editor-container"> <divclass="gitment-editor-main"> <div class="gitment-editor-header"> <nav class="gitment-editor-tabs"> <button class="gitment-editor-tab gitment-selected">編輯</button> </nav> </div> <divclass="gitment-editor-body"> <div class="gitment-editor-write-field"> <textarea placeholder="你想說些什麼" title="Login to Comment"></textarea> </div> <div class="gitment-editor-preview-field gitment-hidden"> <div class="gitment-editor-preview gitment-markdown"></div> </div> </div> </div> <div class="gitment-editor-footer"> <button class="gitment-editor-submit" title="Login to Comment">評論</button> </div> </div> <div lang="en-US" class="gitment-container gitment-comments-container"> <ul class="gitment-comments-list"> <li class="gitment-comment"> <a class="gitment-comment-avatar"> <img class="gitment-comment-avatar-img" src="../images/default-avatar.png"> </a> <div class="gitment-comment-main"> <div class="gitment-comment-header"> <a class="gitment-comment-name"> 張三 </a> <span>2018.05.17</span> <div class="gitment-comment-like-btn"> <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path> </svg> 22 </div> </div> <div class="gitment-comment-body gitment-markdown"><p>評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容</p></div> </div> </li> <li class="gitment-comment"> <a class="gitment-comment-avatar"> <img class="gitment-comment-avatar-img" src="../images/default-avatar.png"> </a> <div class="gitment-comment-main"> <div class="gitment-comment-header"> <a class="gitment-comment-name"> 張三 </a> <span>2018.05.17</span> <div class="gitment-comment-like-btn"> <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path> </svg> 22 </div> </div> <div class="gitment-comment-body gitment-markdown"><p>評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容</p></div> </div> </li> <li class="gitment-comment"> <a class="gitment-comment-avatar"> <img class="gitment-comment-avatar-img" src="../images/default-avatar.png"> </a> <div class="gitment-comment-main"> <div class="gitment-comment-header"> <a class="gitment-comment-name"> 張三 </a> <span>2018.05.17</span> <div class="gitment-comment-like-btn"> <svg class="gitment-heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path d="M25 39.7l-.6-.5C11.5 28.7 8 25 8 19c0-5 4-9 9-9 4.1 0 6.4 2.3 8 4.1 1.6-1.8 3.9-4.1 8-4.1 5 0 9 4 9 9 0 6-3.5 9.7-16.4 20.2l-.6.5zM17 12c-3.9 0-7 3.1-7 7 0 5.1 3.2 8.5 15 18.1 11.8-9.6 15-13 15-18.1 0-3.9-3.1-7-7-7-3.5 0-5.4 2.1-6.9 3.8L25 17.1l-1.1-1.3C22.4 14.1 20.5 12 17 12z"></path> </svg> 22 </div> </div> <div class="gitment-comment-body gitment-markdown"><p>評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容評論的內容 評論的內容評論的內容評論的內容評論的內容</p></div> </div> </li> </ul> </div> </div> </body>
css部分：
css的程式碼比較多所以就不放在這上面了，感覺需要用這個評論頁面的可以下載。》》連結：https://pan.baidu.com/s/1amf5Etpf37TH03iO0b4lTA 密碼：t4p6