b站小而美-页面开发-首页_2021-07-21
程序员文章站
2024-02-28 07:59:22
...
小而美博客系统-学习留档
b站学习链接：https://www.bilibili.com/video/BV1KJ411D7bW?p=5&spm_id_from=pageDriver
-------------------------------------------------------------------------------------------------------------------------
使用软件：WebStorm 2021.1.1 x64
引用框架：semanticUI
Semantic UI 网址：https://semantic-ui.com/
引用框架：jquery
jquery网址：https://www.jsdelivr.com/
页面开发-首页-3
代码
<!--中间内容-->
<div class="m-padded-td-large">
<div class="ui container">
<div class="ui grid">
<!--左边的博客列表-->
<div class="eleven wide column">
<!--header-->
<div class="ui top attached segment">
<div class="ui middle aligned two column stackable grid">
<div class="column">
<div class="ui teal header">博客</div>
</div>
<div class="right aligned column">
共<h3 class="ui orange header m-inline-block">14</h3>篇
</div>
</div>
</div>
<!--content-->
<div class="ui attached segment">
<div class="ui padded vertical segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header">你真的了解什么是财富吗</h3>
<p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">朋克奶罐</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2021-07-21
</div>
<div class="item">
<i class="eye icon"></i>4869
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
</div>
</div>
</div>
<div class=" five wide column">
<a href="#" target="_blank">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div>
<!--2-->
<div class="ui padded vertical segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header">你真的了解什么是财富吗</h3>
<p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">朋克奶罐</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2021-07-21
</div>
<div class="item">
<i class="eye icon"></i>4869
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
</div>
</div>
</div>
<div class=" five wide column">
<a href="#" target="_blank">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div><!--2-->
<div class="ui padded vertical segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header">你真的了解什么是财富吗</h3>
<p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
<div class="content"><a href="#" class="header">朋克奶罐</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2021-07-21
</div>
<div class="item">
<i class="eye icon"></i>4869
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
</div>
</div>
</div>
<div class=" five wide column">
<a href="#" target="_blank">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
</a>
</div>
</div>
</div><!--3-->
</div>
<!--footer-->
<div class="ui bottom attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" class="ui teal basic botton">上一页</a>
</div>
<div class="right aligned column">
<a href="#" class="ui teal basic botton">下一页</a>
</div>
</div>
</div>
</div>
<!--右边的top-->
<div class="five wide column">
<!--分类-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="idea icon"></i>分类
</div>
<div class="right aligned column">
<a href="#" target="_blank">more <i class="angle double right icon"></i></a>
</div>
</div>
</div>
<div class="ui teal segment">
<div class="ui fluid vertical menu">
<a href="#" class="item">学习日志1
<div class="ui lable">13</div>
</a>
<a href="#" class="item">学习日志2
<div class="ui lable">13</div>
</a>
<a href="#" class="item">学习日志3
<div class="ui lable">13</div>
</a>
<a href="#" class="item">学习日志4
<div class="ui lable">13</div>
</a>
</div>
</div>
</div>
<!--标签-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="tags icon"></i>标签
</div>
<div class="right aligned column">
<a href="#" target="_blank">more<i class="angle double right icon"></i></a>
</div>
</div>
</div>
<div class="ui segment">
<a href="#" target="_blank" class="ui teal basic left pointing lable">方法论1
<div class="detail">22</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing lable">方法论2
<div class="detail">22</div>
</a>
<a href="#" target="_blank" class="ui teal basic left pointing lable">方法论3
<div class="detail">22</div>
</a>
</div>
</div>
<!--最新推荐-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="tags icon"></i>最新推荐
</div>
</div>
</div>
<div class="ui segment">
<a href="#" target="_blank">用户故事1</a>
</div>
<div class="ui segment">
<a href="#" target="_blank">用户故事2</a>
</div>
<div class="ui segment">
<a href="#" target="_blank">用户故事3</a>
</div>
</div>
<!--二维码-->
<h4 class="ui horizontal divider header">扫码关注我</h4>
<div class="ui centered card" style="width: 11em">
<img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>