仿掘金项目首页制作
2018-04-10 本文已影响15人
蛋炒饭_By
分类管理
<div class="uk-container uk-container-center">
<div class="uk-panel uk-panel-box uk-text-center app-cate">
<ul class="uk-subnav uk-position-relative">
<li><a href="#">问与答</a></li>
<li><a href="#">技术分享</a></li>
<li><a href="#">程序员</a></li>
<li><a href="#">分享创造</a></li>
<li><a href="#">分享发现</a></li>
<li><a href="#">java</a></li>
<li><a href="#">htmlcss</a></li>
<li><a href="#">javascript</a></li>
<li class="app-all-tag uk-position-absolute"><a href="#">标签管理</a></li>
</ul>
</div>
</div>
样式美化
/*首页文章列表*/
.app-cate{
border: 0;
background: 0;
padding: 15px 0;
}
.app-cate li{
margin-right: 10px;
}
.app-all-tag{
right: 0;
}
image
首页布局
<div class="app-cover">
<div class="b20"></div>
<!--固定宽度，居中对齐-->
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-3-4 uk-row-first">
<div class="uk-panel uk-panel-box uk-padding-remove">
文章列表
</div>
</div>
<div class="uk-width-medium-1-4 uk-hidden-small">
<div id="ulogin" class="login uk-panel uk-panel-box uk-panel-box-secondary">
注册
</div>
<div class="b20"></div>
<div class="tag uk-panel uk-panel-box uk-panel-box-secondary">
热门标签
</div>
<!--页脚部分-->
<div class="uk-panel uk-panel-box uk-panel-box-secondary">
你可能感兴趣的人
</div>
</div>
</div>
</div>
</div>
样式美化
.b20{
height: 20px;
}
.app-cover{
background: #f2f2f2;
}
支持响应式
html页面头部添加
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
image
文章列表
<div class="uk-panel uk-panel-box uk-padding-remove">
<ul class="uk-list" id="topic-list">
<li class="app-blog-item">
<div class="title uk-text-truncate">
<a href="#">都是都是都是都是</a>
</div>
<div>
<a href="#" section_id="8">
<span class="topic-cate">
javascript
</span>
</a>
<span>
<a href="/user/show/1">aaa</a>
</span>
<span>
2018-2-19
</span>
<span>
908次阅读
</span>
</div>
</li>
<li class="app-blog-item">
<div class="title uk-text-truncate">
<a href="#">都是都是都是都是</a>
</div>
<div>
<a href="#" section_id="8">
<span class="topic-cate">
javascript
</span>
</a>
<span>
<a href="/user/show/1">aaa</a>
</span>
<span>
2018-2-19
</span>
<span>
908次阅读
</span>
</div>
</li>
</ul>
</div>
样式美化
.app-blog-item{
border-bottom: 1px solid rgba(178,186,194,.15);
padding: 20px;
font-size: 12px;
}
.app-blog-item .title{
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.app-blog-item .topic-cate{
background-color: #00a8c6;
padding: 2px 10px ;
color: white;
font-size: 12px;
margin-right: 6px;
}
image
右侧边栏----用户注册
<div id="ulogin" class="login uk-panel uk-panel-box uk-panel-box-secondary">
<div class="uk-text-bold uk-margin-bottom">juejin</div>
<form class="uk-form uk-margin-small-top">
<div class="uk-form-row ">
<input type="text" placeholder="昵称" class="uk-form-blank uk-form-width-medium ">
</div>
<div class="uk-form-row">
<input type="text" placeholder="邮箱/手机" class="uk-form-blank uk-form-width-medium">
</div>
<div class="uk-form-row">
<input type="password" placeholder="密码（不少于6位）" class="uk-form-blank uk-form-width-medium">
</div>
<button id="login" class="uk-margin-top uk-button uk-button-primary uk-width-1-1">立即注册</button>
</form>
</div>
image
热门标签
<div class="tag uk-panel uk-panel-box uk-panel-box-secondary">
<div>
<div class="uk-text-bold uk-text-middle uk-float-left uk-margin-left uk-margin-top">热门标签</div>
<div class="uk-float-right uk-margin-right uk-margin-top"><a href="#">查看全部</a></div>
</div>
<div class="uk-margin-large-top"><hr></div>
<div class="uk-margin-top">
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">架构</a></div>
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">开源</a></div>
</div>
<div class="uk-margin-top">
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">算法</a></div>
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">GitHub</a></div>
</div>
<div class="uk-margin-top">
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">面试</a></div>
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">代码规范</a></div>
</div>
<div class="uk-margin-top">
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">产品</a></div>
<div class="tag-item uk-text-center uk-display-inline-block uk-width-1-3 uk-border-rounded uk-margin-left"><a href="#">铸剑翻译</a></div>
</div>
</div>
css
/*rigth tag*/
.tag .tag-item{
background-color: #F7F7F7;
height: 20px;
line-height: 20px;
border-radius: 10px;
}
.tag .tag-item a{
color: black;
}
.tag .tag-item:hover a{
color: white;
text-decoration: none;
}
.tag .tag-item:hover{
background-color: #00CE00;
}
image
可能感兴趣的人
<div class="uk-panel uk-panel-box uk-panel-box-secondary">
<h3 class="uk-panel-title">你可能感兴趣的人</h3>
<ul class="uk-list">
<li>
<img class="uk-align-left uk-border-circle" src="https://avatars.githubusercontent.com/u/20903311" width="40" height="40">
<div>zhangsan</div>
<div>前端学徒</div>
</li>
<li>
<img class="uk-align-left uk-border-circle" src="https://avatars.githubusercontent.com/u/20903311" width="40" height="40">
<div>zhangsan</div>
<div>前端学徒</div>
</li>
<li>
<img class="uk-align-left uk-border-circle" src="https://avatars.githubusercontent.com/u/20903311" width="40" height="40">
<div>zhangsan</div>
<div>前端学徒</div>
</li>
<li>
<img class="uk-align-left uk-border-circle" src="https://avatars.githubusercontent.com/u/20903311" width="40" height="40">
<div>zhangsan</div>
<div>前端学徒</div>
</li>
<li>
<img class="uk-align-left uk-border-circle" src="https://avatars.githubusercontent.com/u/20903311" width="40" height="40">
<div>zhangsan</div>
<div>前端学徒</div>
</li>
</ul>
</div>
