标签：Semantic 区域 博客 详情页 UI 回复 使用 my important
博客详情页面（blog.html）
（1）导航页和页尾等信息保持不变，只需改动中间信息即可
（2）中间区域分为五个部分，分别为：头部、图片区域、博客内容、博客信息、留言区域。除过博客信息区域，其余的均使用 segment 组件，博客信息区 域使用 message 组件，并且给每个组件均加上 attached ，让其拼接在一起
<div class="ui top attached segment">头部</div> <div class="ui attached segment">图片区域</div> <div class="ui attached segment">内容</div> <div class="ui attached message">博客信息</div> <div class="ui attached segment">留言区域</div>
效果如下：
可以发现区域过宽，给上层容器添加自定义 css 样式，命名为 my-container-small：
.my-container-small { max-width: 60em !important; margin: auto !important;}
- 头部区域：和首页的样式一样，包括图标、发布日期、浏览量三部分，直接copy首页写就行
<!-- 头部 -->
<div class="ui top attached segment">
<div class="ui horizontal link list">
<idv class="item">
<img src="static/images/index-image/001.png" alt="" width="100"
height="100" class="ui avatar image">
<div class="content"><a href="#" class="header">杨宇航</a></div>
</idv>
<div class="item">
<i class="calendar icon"></i> 2020-03-08
</div>
<div class="item">
<i class="eye icon"></i> 5214
</div>
</div>
- 图像区域：很简单，直接创建一个
ui segment的容器，里面加入img即可：<!-- 图片区域 --> <div class="ui attached segment"> <img src="static/images/index-image/003.png" alt="" class="ui rounded image"> </div> - 博客内容：该区域先用
ui segment创建一个容器，里面包含一个label，使用ringht aligned使容器靠右，在使用basic使去除边线- 关于内容使用
ui center aligned header使标题居中显示。内容先使用p标签定义，以后会用第三方组件进行处理<!-- 内容 --> <div class="ui attached padded segment"> <div class="ui right aligned basic segment"> <div class="ui orange label basic">原创</div> </div> <h2 class="ui center aligned header">XXXXXXX</h2> <br> <div id="content" class="my-padded-lr my-padded-tb-tiny"> ... ... ... </div> </div> - 定义博客标签：使用
label即可实现<!-- 标签 --> <div class="my-padded-lr my-padded-tb-tiny"> <div class="ui basic teal left pointing label">idol</div> </div> - 赞赏功能：使用
button进行定义，并使用Semantic UI官网所示的弹窗效果，在使用CSS定义，以实现点击按钮弹出二维码的效果<!-- 赞赏功能 --> <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/we-chat.png" alt="" class="ui rounded bordered image" width="120px"> <div>支付宝</div> </div> <div class="image"> <img src="./static/images/we-chat.png" alt="" class="ui rounded bordered image" width="120px"> <div>微信</div> </div> </div> </div> </div><script> $('#payButton').popup({ popup : $('.payQR.popup'), on : 'click', position : 'top center' }); </script>
- 关于内容使用
效果如下：
- 博客信息区域：使用
grid进行布局，左边信息11份，右边二维码5份- 对于二维码，定义
right floated rounded bordered image，让其居右圆角，太大的话可以指定其尺寸 - 对于右边信息，可以使用
ui.list，暂且定义成这样，后边修改<!-- 博客信息 --> <div class="ui attached message"> <div class="ui middle aligned grid"> <div class="eleven wide column"> <ui class="list"> <li style="color: dodgerblue">作者：XXX（联系作者）</li> <li style="color: dodgerblue">发表时间：xxxx-xx-xx</li> <li style="color: dodgerblue">版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li> <li style="color: dodgerblue">转载：请在文末添加作者微信二维码</li> </ui> </div> <div class="five wide column"> <img src="./static/images/we-chat.png" alt="" class="ui right floated rounded bordered image" width="110px"> </div> </div> </div>
- 对于二维码，定义
效果如下：
- 留言区域：
-
留言列表
官网有专门的名为
Commit的组件详细使用教程，选择一个自己喜欢的即可例如我选择的代码如下，头像图片需要自己改变
<div class="ui teal segment"> <div class="ui comments"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src="./static/images/index-image/004.png"> </a> <div class="content"> <a class="author">九霄</a> <div class="metadata"> <span class="date">今天 at 5:42PM</span> </div> <div class="text"> 多漂亮！ </div> <div class="actions"> <a class="reply">回复</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="./static/images/index-image/004.png"> </a> <div class="content"> <a class="author">云外</a> <div class="metadata"> <span class="date">昨天 at 12:30AM</span> </div> <div class="text"> <p>谢谢啦！</p> </div> <div class="actions"> <a class="reply">回复</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src="./static/images/index-image/004.png"> </a> <div class="content"> <a class="author">天草</a> <div class="metadata"> <span class="date">今天 15:34PM</span> </div> <div class="text"> 你是对的！ </div> <div class="actions"> <a class="reply">回复</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="./static/images/index-image/004.png"> </a> <div class="content"> <a class="author">大爷</a> <div class="metadata"> <span class="date">5 天前</span> </div> <div class="text"> 哈哈哈哈哈 </div> <div class="actions"> <a class="reply">回复</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> 添加回复 </div> </form> </div> </div>
-
效果如下：
- 留言提交区域
- 分为回复框、姓名、邮箱、提交按钮四个部分，除过回复框均使用
feild组件，回复框使用textarea即可实现<!-- 提交留言区域 --> <div class="ui form"> <div class="field"> <textarea name="content" placeholder="请输入评论内容..."></textarea> </div> <div class="fields"> <div class="field my-mobile-wide my-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 my-mobile-wide my-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 my-mobile-wide my-margin-bottom-small"> <button class="ui teal button my-mobile-wide"><i class="edit icon"></i>发布</button> </div> </div> </div>
- 分为回复框、姓名、邮箱、提交按钮四个部分，除过回复框均使用
效果如下：
- 到此为止，基本页面已经实现，接下来是细节优化，使响应手机端：
- 手机端博客内容显示左右间距过大，导致很不好看，可以给标签和内容那里，定义一个响应变量
my-padded-lr-responsive，然后在对其进行css样式改变@media screen and (max-width: 600px) { .my-padded-lr-responsive { padding-right: 0 !important; padding-left: 0!important; } } - 手机端的下方姓名、邮箱、发布显示不优美，希望可以布满整行，并且上下间隔不是很窄
- 自定义样式
my-margin-bottom-small和my-mobile-wide分别来控制输入框上下间距和充满整行@media screen and (max-width: 600px) { .my-mobile-wide { width: 100% !important; } }
- 手机端博客内容显示左右间距过大，导致很不好看，可以给标签和内容那里，定义一个响应变量
最终实现效果如下：
至此，博客详情页开发基本完成，接下来是分类页面的开发思路及流程，未完......
标签：Semantic,区域,博客,详情页,UI,回复,使用,my,important 来源： https://www.cnblogs.com/skygrass0531/p/12457371.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。