顶求网首页整体设计思路

编程之家收集整理的这篇文章主要介绍了顶求网首页整体设计思路编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato

整体架构

教程里要设计的网站首页一个web2.0博客网站首页,在该网站用户可以发表博客,也可以推荐图书给其他用户。所以,在首页主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigator,固定在头部)和脚注(footer),而这些元素也是整个网站都要用到的,具体实现时可以把它们放在网站布局模板中。

板块划分

文章板块——将最新、最热的文章标签页(tabs)切换的方式放在该模块中,为了页面的美观,将有带有图片文章放在轮换图片(caoursel)插件中,最右侧放置热门文章分类样式如下图所示:

QQ图片20160719095629.png

首页文章板块

图书板块--按照图书的分类将图书放在首页中,点击不同的分类切换到不同的选项卡,这部分采用自己用Jquery写的Tabs,并将其整合bootstrap环境中。最右侧同样是图书的分类效果图如下所示:

QQ图片20160719095645.png

首页图书板块

用户板块——将新加入的用户和对社区贡献最多的用户放在首页中,效果图如下:

QQ图片20160719095700.png

首页用户板块

要用到的bootstrap元素

布局页面导航条——这里要用到固定在网页头部的导航条,并在其中整合用户登录模块,代码如下:

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
          <a class="navbar-brand active" href="首页URL">顶求网</a>
          <a class="navbar-brand" href="图书页面URL">图书</a>
          <a class="navbar-brand" href="文章页面URL">文章</a>
        </div>
        <div class="btn-group" >
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              会员登陆 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
               <li><a href="会员登陆页面URL"  target="_top">会员登陆</a></li>
               <li><a href="会员注册页面URL"  target="_top">会员注册</a></li>
            </ul>
        </div>
    </div>
 </div>

文章板块需要用到的bootstrap元素
1.轮换图片插件caoursel),解决图片变形的问题
2.标签插件tabs),美化插件,并增加了定时滑动时间
3.信息按钮btn-info插件,用于列出分类信息

图书板块需要用到的元素
1.自己用Jquery写的Tabs插件
2.自己写的分类标签

用户板块用到的bootstrap元素
1.bootstrap原生tabs
2.圆形图片(image_circle)

本文首发于顶求网,转载请注明来源

总结

以上是编程之家为你收集整理的顶求网首页整体设计思路全部内容,希望文章能够帮你解决顶求网首页整体设计思路所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

Bootstrap文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注