带顶部标签栏的移动图文信息类网页应用模板

Simple Tabs Widget 适合手机阅读的图文信息应用。

模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2194
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
html {
    min-height: 100%;
}
body {
    background: url("/uploads/160201/purple_bg.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#tabs {
    margin: 1em auto;
    width: 450px;
}
#tabs ul {
    margin: 0;
    padding: 0;
    height: 80px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}
#tabs ul:after {
    content: "";
    display: table;
    clear: both;
}
#tabs ul li {
    display: block;
    width: 100%;
    height: 100%;
    background: #f4f4f3;
    border-bottom: 1px solid #e5e5e2;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    letter-spacing: 1px;
    text-align: center;
}
#tabs ul li:first-child {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    border-right: 1px solid #e5e5e2;
}
#tabs ul li:last-child {
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    border-left: 1px solid #e5e5e2;
}
#tabs ul li a {
    display: block;
    padding: 1em;
    cursor: pointer;
    outline: 0;
    border: none;
    font-size: 0.85em;
    color: #6a6a6a;
    text-decoration: none;
    text-transform: uppercase;
}
#tabs ul li span {
    display: block;
    margin-bottom: 0.75em;
}
#tabs ul .ui-tabs-active {
    background: #fff;
    border-bottom: none;
}
#tabs ul .ui-tabs-active a {
    color: #000;
}
#tabs ul .ui-tabs-active span {
    color: #609c09;
}
#tabs h3,
#tabs h4 {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
}
#tabs h3 {
    margin: 0.5em 0;
    border-bottom: 1px solid rgba(126, 149, 180, 0.5);
    padding-bottom: 0.05em;
    font-size: 2.5em;
    color: #f38500;
    font-weight: 300;
}
#tabs h4 {
    margin: 0.25em 0;
    font-size: 1.35em;
    color: #000;
    font-weight: 700;
}
#tabs .tagline {
    display: block;
    margin-top: 1.25em;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2em;
    color: #aa7786;
    text-transform: lowercase;
}
.tabs-content {
    background: #fff;
}
.tabs-content article {
    padding: 1em;
}
.tabs-content article p {
    font-family: 'Open Sans', sans-serif;
    line-height: 24px;
}
.tabs-content article .readmore {
    display: block;
    margin-top: 1.5em;
    padding-top: 0.25em;
    border-top: 1px solid rgba(126, 149, 180, 0.5);
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2em;
}
.tabs-content article .readmore:after {
    content: "";
    display: table;
    clear: both;
}
.tabs-content article .readmore a {
    display: block;
    margin: 1em 0;
    float: right;
    color: #aa7786;
    text-decoration: none;
}
.tabs-content article .readmore a:hover {
    color: #925c6c;
}
.tabs-content article .readmore span {
    padding-left: 1em;
    vertical-align: middle;
}
.tabs-content article img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><span class="fa fa-shopping-cart"></span>Shopping</a>
        </li>
        <li><a href="#tabs-2"><span class="fa fa-cutlery"></span>Dining</a>
        </li>
        <li><a href="#tabs-3"><span class="fa fa-music"></span>Nightlife</a>
        </li>
    </ul>

<h3>Hot Deals</h3>
            <span class="tagline">Upcoming Sales</span>
            <h4>Building a Winter Wardrobe</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi
                aliquid.
            </p>

</article>

<h3>Good Eats</h3>
            <span class="tagline">Local Favorites</span>
            <h4>Anticipated Fall Openings</h4>

</article>

<h3>Live Music</h3>
            <span class="tagline">Hidden Gems</span>
            <h4>Can't-miss Weekend Events</h4>

Simple Tabs Widget 适合手机阅读的图文信息应用。

模板

编辑器支持Emmet

快捷键

Simple Tabs Widget 适合手机阅读的图文信息应用。

模板

带网格浮层的移动应用功能展示页面模板

带浮动标签的注册页面UI模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：