SpringBoot--个人博客--3.页面设计与开发--详情页

3.1代码

导航和底部与首页相同
blog.html


<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui top attached segment">
            <div class="ui horizontal link list">
                <div class="item">
                    <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui avatar image">
                    <div class="content"><a href="#" class="header">方一帆a>div>
                div>
                <div class="item">
                    <i class="calendar icon">i>2020-02-04
                div>
                <div class="item">
                    <i class="eye icon">i>3412
                div>
            div>
        div>
        
        <div class="ui attached segment">
            <img src="https://i.picsum.photos/id/1014/800/450.jpg" alt="" class="ui rounded image">
        div>
        
        <div class="ui attached padded segment">
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label">原创div>
            div>
            <h2 class="ui center aligned header">关于刻意练习的清单h2>
            
            <div id="content" class="m-padded-lr-big-responsive m-padded-tb-large">
                文章内容
            div>
            
            <div class="m-padded-lr-big-responsive">
                <div class="ui basic teal left pointing label"> 方法论 div>
            div>
            
            <div class="ui center aligned basic segment">
                <button id="payButton" class="ui orange basic circular button">赞赏button>
            div>
            <div class="ui payQR flowing popup transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">
                        <div class="image">
                            <img src="./static/images/WeChat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                            <div>支付宝div>
                        div>
                        <div class="image">
                            <img src="./static/images/WeChat.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                            <div>微信div>
                        div>
                    div>
                div>
            div>


        div>
        
        <div class="ui attached positive message">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui class="list">
                        <li>作者:方一帆(联系作者)li>
                        <li>发表时间:2020-01-09 10:55li>
                        <li>版权声明:自由转载-非商用-非衍生-保持署名li>
                        <li>公众号转载:请在文末添加作者公众号二维码li>
                    ui>
                div>
                <div class="five wide column">
                    <img src="./static/images/WeChat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px">
                div>
            div>
        div>
        
        <div class="ui bottom attached segment">
            <div class="ui teal segment">
                <div class="ui comments">
                    <h3 class="ui dividing header">Commentsh3>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
                        a>
                        <div class="content">
                            <a class="author">Matta>
                            <div class="metadata">
                                <span class="date">Today at 5:42PMspan>
                            div>
                            <div class="text">
                                How artistic!
                            div>
                            <div class="actions">
                                <a class="reply">Replya>
                            div>
                        div>
                    div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
                        a>
                        <div class="content">
                            <a class="author">Elliot Fua>
                            <div class="metadata">
                                <span class="date">Yesterday at 12:30AMspan>
                            div>
                            <div class="text">
                                <p>This has been very useful for my research. Thanks as well!p>
                            div>
                            <div class="actions">
                                <a class="reply">Replya>
                            div>
                        div>
                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
                                a>
                                <div class="content">
                                    <a class="author">Jenny Hessa>
                                    <div class="metadata">
                                        <span class="date">Just nowspan>
                                    div>
                                    <div class="text">
                                        Elliot you are always so right :)
                                    div>
                                    <div class="actions">
                                        <a class="reply">Replya>
                                    div>
                                div>
                            div>
                        div>
                    div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://i.picsum.photos/id/1014/6016/4000.jpg">
                        a>
                        <div class="content">
                            <a class="author">Joe Hendersona>
                            <div class="metadata">
                                <span class="date">5 days agospan>
                            div>
                            <div class="text">
                                Dude, this is awesome. Thanks so much
                            div>
                            <div class="actions">
                                <a class="reply">Replya>
                            div>
                        div>
                    div>
                div>
            div>
            <div class="ui form">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息...">textarea>
                div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon">i>
                            <input type="text" name="nickname" placeholder="姓名">
                        div>
                    div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon">i>
                            <input type="text" name="email" placeholder="邮箱">
                        div>
                    div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button class="ui teal button m-mobile-wide"><i class="edit icon">i>发布button>
                    div>
                div>
            div>
        div>
    div>
div>



<script>
    $('.menu.toggle').click(function () {
      
        $('.m-item').toggleClass('m-mobile-hide')
    })
    $('#payButton').popup( {
      
        popup:$('.payQR.popup'),
        on:'click',
        position:'bottom center'
    })
script>

你可能感兴趣的:(项目实践,#,html)