济南网站建设,网站运营维护,网站优化
企业网站建设您当前的位置:智达维网络科技 > 网站建设 > 企业网站建设 >

济南瑜伽网站建设

更新时间:2018-04-08 09:40:33 作者:千寻建站 访问量:3

济南瑜伽网站建设
济南瑜伽网站建设
1 济南瑜伽网站主题风格的确立
    说到瑜伽,大家想到的是禅,是安静,所以网站的设计要意在放空,宁静。所以网站的设计意在空,宁静,网页要呈现身体、心灵与精神的和谐统一。蓝色和绿色易产生清澈、超脱、远离世俗的感觉。因此网站主要以绿、白作为主色调。
济南瑜伽网站UI设计
    为了便于进行响应式布局的设计,我们将功能界面进行重新整理和归类。页面类型主要分为:列表类页面、详情类页面。列表类页面包括网站首页、瑜伽展示、新闻动态、关于我们。详情类页面包括瑜伽体式详情、新闻详情、公司简介。UI 设计主要分为移动端UI 设计和PC 端UI 设计。
3 济南瑜伽网站导航栏的响应式设计
    传统基于PC 端的网站,导航栏一般是横向显示在页面顶部,在响应式技术出现之前,一般是使用li 标签进行页面布局,再用向左浮动,实现列表项内容由横向变纵向。但这种方式在移动端小分辨率屏幕下,处理不好,菜单栏可能会换行显示或相互遮挡。Bootstrap 提供了导航条组件,在移动端上可以折叠,在窗口宽度变大时逐步变为水平展开方式。务必添加nav 标签,并将其class设置为navbar 参数,表示它是一个导航条组件。需要折叠和展开的导航栏内容必须放在一个div 中, 并设置其class 为.navbar-collapse和.collapse。导航条的菜单内容用ul、li 标签布局,对ul 可以添加navbar-right 样式实现导航条内元素向右对齐。如果需要改变默认的样式,可以修改navbar-default 样式中的参数。
4 济南瑜伽网站轮播图响应式设计
    为了实现一个广告轮播效果,可以通过jQuery 的插件或自己编写代码实现。这里使用了 Bootstrap 自带的轮播插件——Carousel。要使用该插件,必须在页面中引入bootstrap.min.js。添加一个div,将其样式设置为carousel。需要轮换的内容放在一个div 中,将其样式设置为carousel-inner。每一个轮换图片的img 标签,可以各自放在一个div 中,并设置该div的样式为carousel-inner。广告轮播下方的指示器使用<ol class="carousel-indicators"> 标签,里面的每个圆点通过data-slide 接受prev 或next,用以改变幻灯片相对位置,使用dataslide-to 来向轮播传递指向图片位置。
5 济南瑜伽网站包含图片列表的响应式设计
    在这个区域中,有三个等宽的横向排列的小块,每个小块是由一个带圆角边框图片和说明文字组成。Bootstrap 提供了一套响应式栅格系统,系统会自动分为最多12 列。指定栅格布局内部的元素的class 为 colmd-份数,来告诉它的宽度占据这12 份里面的几份。这里要实现三个等宽的小块,每个小块是一个div,每个div 的占12 份中的四份,才能实现等宽,因此三个div 的class 设置为col-md-4。Bootstrap 为图片设置了.img-responsive类,方便对图片进行响应式布局。为了实现为图片添加带圆角边框样式,Bootstrap 还为图片提供了img-thumbnail 类。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站建设相关内容”,谢谢您的浏览!

相关推荐
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服