一 响应式布局
1 传统布局
固定布局:通过块的width宽度进行设置,取固定值(960px,1000px)
缺点:会出现页面两边留白或者水平滚动条,让用户的体验感较差
2 优化布局
浮动+百分比布局:width宽度的取值不再固定化,直接使用%进行设置
优点:可以让页面随整体宽度的变化进行进行各自组成宽度的自动改变
弹性盒布局:通过display取值flex进行设定(在外层的大盒子进行设置,一旦设置后,会自动对其中的小盒子进行弹性布局)
弹性布局属性flex的常用子属性如下:
1 flex:伸缩性,取整型数值,通常在多个小盒子中设置,值一致的话,其所占宽度一致
2 flex-direction:伸缩方向,有4个取值
row:默认取值,小盒子自动从左往右进行排列 row-reverse:小盒子从右往左进行排列 column:小盒子从上到下进行排列 column-reverse:小盒子从下往上进行排列
3 flex-wrap:伸缩换行,常规3个取值
nowrap:默认值,不换行 wrap:换行 wrap-reverse:换行显示,会颠倒行顺序
4 justify-content:主轴对齐,常规5个取值
flex-start:默认取值,左对齐 flex-end:右对齐 center:居中对齐 space-between:两端对齐,整体平均分布 space-around:环绕对齐,每个小盒子左右都右相同的间距,中间是双倍间距
3 媒体查询
终端显示设备的不同,决定了显示内容的不同(图片大小,块的位置等等...),我们需要通过媒体查询确定当前显示的设备信息,来显示操作对应的样式
媒体查询由以下3个部分组成:
1 媒体类型
设备终端的类型,通常有如下取值 all:所有设备 screen:显示器(PC端) tv:家用电视机 ...
2 媒体特性特征
媒体常用属性 width:宽度 height:高度 ...
3 关键词,关键字
用来连接,关联(媒体类型和媒体特征) and:并且,同时满足 only:唯一的,唯一性 not:取反,不包含
4 核心语法
有以下两种实现方式:
在内部样式表style标签中: @media 媒体类型 关键字 (媒体特性){ 选择器{样式...} } 注意:关键字和特性括号之间有空格
分两步: 先创建对应的外部样式表 再在页面中使用link标签进行设置,在media属性中设置 <link rel="stylesheet" type="text/css" href="css/style3.css" media="..."/>
5 实现案例:
浏览器页面宽度900px以上,背景色-红色
浏览器页面宽度600px-900px之间,背景色-黄色
浏览器页面宽度600px以下,背景色-蓝色
4 响应式布局优缺点
优点:
可以灵活的运行在不同的设备终端上,更少的维护成本
缺点:
兼容设备工作量大,代码繁杂,无用的媒体查询代码会影响加载时间
5 注意事项
在媒体查询中,相同的样式会覆盖
如果是按min-width进行查询,可以直接从小到大进行排列
反之如果是按max-width进行查询,可以直接从大到小进行排列
以避免样式覆盖
二 BootStrap样式
1 基本构成
概念:
来自Twitter,是一个比较常用的前端框架,由html,css,javascript等技术构成,成熟版本V3
引入:
需要在html页面中引入BootStrap的css文件和js文件(开发版+运行版[压缩版]),当然在引入js的时候,前置引入JQ的版本文件
构成:
由栅格系统、基础组件、Css组件、JS插件
2 栅格系统
定义:
通过一系列的row(行)和column(列)组成的页面,我们需要展现的内容直接放置到对应的列模块中。
通过等分12列的方式进行数据呈现(任何设备)
为了让数据呈现更加友好,会在外层设置名为container的类样式
由于终端设备的不同,BootStrap把分辨率设置为4种展现形式
1 超小屏幕(手机),类前缀col-xs,屏幕宽度<768px
2 小屏幕(平板),类前缀col-sm,屏幕宽度<992px
1 中等屏幕(常用显示器),类前缀col-md,屏幕宽度<1200px
1 大屏幕(超大显示器),类前缀col-lg,屏幕宽度>1200px
案例
<div class="row"> <div class="col-sm-6 col-md-3 col-lg-2">1</div> <div class="col-sm-6 col-md-3 col-lg-2">1</div> <div class="col-sm-6 col-md-3 col-lg-2">1</div> <div class="col-sm-6 col-md-3 col-lg-2">1</div> </div>
解析:
如果是大屏幕lg,页面行会共占据8个列
如果是中屏幕md,页面行会占据12个列(满了)
如果是小屏幕sm,页面共两行(有换行),两个sm-6占据1行,4个两行
超小屏幕xs,各自一行,共4行
3 列的相关操作
以md中屏进行解读
1 列组合,使用col-md-数,值的类样式进行控制,数值为几就合并几个列
2 列偏移,使用col-md-offset-数值,的类样式进行控制,值为几就在列前空出几个列(左margin)
3 列嵌套,在某一个列中再使用row+列的方式进行页面组合
4 列排序
使用col-md-push-数值,的类样式进行控制,向右后置数值列的位置
使用col-md-pull-数值,的类样式进行控制,向左前置数值列的位置
三 微金所综合案例
1 项目准备
创建项目WJS-你的名字,引入css,js,fonts,images文件夹内容
使用BootStrap模板页面,进行首页内容开发
2 整体构成
<!-- 头部块 --> <header class="wjs_header"></header> <!-- 导航条 --> <nav class="wjs_nav"></nav> <!-- 轮播图 --> <div class="wjs_banner"></div> <!-- 信息块 --> <div class="wjs_info"></div> <!-- 预约块 --> <div class="wsj_reverse"></div> <!-- 产品块 --> <div class="wjs_product"></div> <!-- 新闻块 --> <div class="wjs_news"></div> <!-- 合作伙伴 --> <footer class="wjs_partner"></footer>
3-1 头部
我们进行2,5,2,3块的划分,对于小屏,超小屏隐藏 hidden-sm hidden-xs
1 组成
<header class="wjs_header hidden-sm hidden-xs"> <div class="container"> <div class="row"> <div class="col-md-2">2</div> <div class="col-md-5">5</div> <div class="col-md-2">2</div> <div class="col-md-3">3</div> </div> </div> </header>
2 内容
第一块:手机图标,文字,向下箭头图标,二维码图片 第二块:电话图标,a标签文字 第三块:两个a标签文字 第四块:两个按钮
3 图标引入
在页面中引入css文件夹下的base.css文件
使用系统提供好的图标,或者自定义的图标,在对应的位置class引入
<!--手机图标--> <span class="wjs_icon wjs_icon_phone"></span> <!--向下箭头图标--> <span class="glyphicon glyphicon-menu-down"></span>
4 Css设置
创建wjs.css样式文件,在页面中link引入
头部具体样式细节如下
.wjs_header{ /*头部整体内容居中,行高的设置*/ height: 50px; line-height: 50px; text-align: center; /*下边框样式*/ border-bottom: 1px solid lightgrey; } .wjs_header .row div:nth-of-type(-n+3){ /*给头部块中row里的前3个div设置右边框样式*/ border-right: 1px solid lightgrey; } .wjs_header .row .wjs_code{ /*让头部块中第一块整体相对定位,再让二维码块进行绝对定位,二维码的位置就固定了*/ position: relative; display: block; } .wjs_header .row .wjs_code img{ /*图片绝对定位*/ position: absolute; /*上距离*/ top:49px; /*左距离*/ left: 0px; border: 1px solid lightgrey; /*没有上边框*/ border-top: none; /*隐藏*/ display: none; } .wjs_header .row .wjs_code:hover img{ /*鼠标悬停头部第一块时,显示二维码图片*/ display: block; }
3-2 导航条
直接从官网组件中复制导航条原生代码:
整体控件分两个部分:
1 brand品牌图标区+手风琴按钮
2 被手风琴按钮控制的导航核心显示区域(ul构成)
具体样式代码如下
.wjs_nav{ /*去除默认的下外边距*/ margin-bottom:0px ; } .wjs_nav .navbar-brand{ height: 80px; /*由于brand样式有默认15的内填充,所以行高和高度差30*/ line-height: 50px; } .wjs_nav .wjs_icon{ /*导航条图标大小*/ font-size: 40px; } .wjs_nav .wjs_icon_logo{ /*logo颜色*/ color: rgb(225,37,27); } .wjs_nav .wjs_icon_text{ /*文本颜色*/ color: rgb(51,51,51); } .wjs_nav .navbar-nav a{ line-height: 50px; font-size: 16px; /*下边框,颜色透明transparent*/ border-bottom: 3px solid transparent; } .wjs_nav .navbar-nav a:hover, .wjs_nav .navbar-nav a:focus{ /*a标签悬停,或者获取焦点时,下边框的样式*/ border-bottom: 3px solid rgb(225,37,27); } .wjs_nav .navbar-toggle{ /*总高80,手风琴按钮自身高度34;(80-34)/2*/ margin-top: 23px; }
3-3 轮播图
直接从官网组件中复制轮播原生代码:
在整体轮播div中:
一个ol:多个li呈现图片下方小圆点
一个图片展示div容器:多个div子标签,每个div对应一张轮播图片设置
两个a标签:图片左右两边的上下点击图片(Previous Next)
最简单实现轮播效果,在div展示容器的div子标签里img标签直接引入图片
本题使用两种大小图片进行不同屏幕的投放,所以在div中通过存储数据,使用jq代码进行动态实现:
<div class="item" data-large-image="images/slide_02_2000x410.jpg" data-small-image="images/slide_02_640x340.jpg"> </div>
jq实现代码(注意:页面引入需要把自定义的js文件放在jq版本文件下方)
/*获取class名为item的4个div*/ var items = $(".wjs_banner .item"); /*浏览器屏幕尺寸改变事件*/ $(window).on("resize",function(){ /*获取浏览器尺寸*/ var width = $(window).width(); /*if-else判断*/ if (width >= 768) { //pc端,遍历 $(items).each(function(){ /*每一个div*/ var item = $(this); /*获取大背景图片路径*/ var imgSrc = item.data("largeImage"); /*填充内容*/ $(item).html('<a href="#" class="pcImg" style="background-image: url('+imgSrc+');"></a>'); }); } else{ //移动端,遍历 $(items).each(function(){ /*每一个div*/ var item = $(this); /*获取小图片路径*/ var imgSrc = item.data("smallImage"); /*填充内容*/ $(item).html('<a href="#" class="mobileImg"><img src="'+imgSrc+'"/></a>'); }); } }).trigger("resize");/*trigger函数:为了程序一加载就强制执行一次*/
3-4 信息块
该块特征:
1 在xs宽度下隐藏该模块(hidden-xs)
2 在md宽度下,一行显示三个栅格(col-md-4)
3 在sm宽度下,一行显示两个栅格(col-sm-6)
页面有如下代码复制6个构成
<div class="col-sm-6 col-md-4"> <a href="#"> <div class="media"> <!-- 左侧的文字或图片 --> <div class="media-left wjs_icon wjs_icon_E900"></div> <!-- 右侧文字 --> <div class="media-body"> <!-- 右侧标题文字,稍大 --> <h4 class="media-heading">支持交易保障</h4> <!-- 右侧正文,稍小一点 --> <p>银联支持全程保障安全支持</p> </div> </div> </a> </div>
核心样式
.wjs_info{ /*外填充*/ padding: 30px; } .wjs_info .wjs_icon{ /*字体图标大小,注意设置前置选择器*/ font-size: 30px; } .wjs_info .row>div{ /*行下的子div进行上外边距设置*/ margin-top: 20px; } .wjs_info .row a:hover{ color: rgb(225,37,27); }
3-5 预约块
和信息块相似,是整体首页比较简单的两个模块,该块特征
1 在xs宽度下隐藏该模块(hidden-xs)
2 栅格列模式:col-sm-9,col-sm-3
3-6 产品块
该模块的实现,需要使用到 JavaScript插件 中的 标签页 组件
该组件核心由两部分构成
1 ul构成的导航tab li的a标签href属性指向某个面板div href="#id值" 2 div构成的面板tab 某个div的属性id="id值"
1 tab导航区
为方便tab导航标签项溢出问题,在原生ul代码外层套一个div
css样式如下:
.wjs_product{ /*清除前后浮动信息*/ clear: both; /*产品块背景色和底部是一致的*/ background-color:rgb(238,238,238) ; padding: 20px; } .wjs_product .nav-tabs li{ /*给li左右产生内填充*/ padding: 0px 15px; } .wjs_product .nav-tabs li a{ /*增加高度,去除边框影响,设置下边框样式*/ line-height: 50px; border: none; border-bottom: 3px solid transparent; } .wjs_product .nav-tabs li a:hover{ /*悬停显示特殊红色下边框*/ border-bottom: 3px solid rgb(225,37,27); } .wjs_product .nav-tabs li.active a, .wjs_product .nav-tabs li.active a:hover, .wjs_product .nav-tabs li.active a:focus{ /*被选中带active样式的a标签默认,悬停,焦点时候的样式*/ background-color: transparent; border: none; border-bottom: 3px solid rgb(225,37,27); } /*tab项进行隐藏并能水平滑动*/ .wjs_product .tab_parent{ width: 100%; overflow: hidden; }
计算ul整体宽度js代码如下:
//计算ul的整体宽度 var ul = $(".wjs_product .nav-tabs"); var lis = ul.find("li"); //定义总宽度 var totals = 0; $(lis).each(function(){ totals += $(this).innerWidth();//内容+padding }); ul.width(totals);
水平滑动js代码如下(注意:页面引入iscroll.js文件):
var myScroll = new IScroll('.tab_parent',{ scrollX:true,scrollY:false });
2 tab面板区
本题一共由7个导航tab选项+7个面板显示区构成,我们只在第一个面板里完成了效果呈现
语法架构如下
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> 在不同分辨率屏幕大小下:超小屏1行一个,小屏1行两个,中屏1行3个(产品小块) 每个小块中分左右两块 左边为可变宽度区域 右边定位后大小不变 </div> </div> </div>
核心样式如下
.wjs_product .wjs_proBox .wjs_pLeft>.row{ /*左侧默认row样式左右外边距调整,默认-15px*/ margin-left: -10px; margin-right: -10px; } .wjs_product .wjs_proBox .wjs_pLeft>.row div:nth-of-type(even){ /*左侧嵌套列中的偶数div,文字靠右对齐*/ text-align: right; } .wjs_product .wjs_proBox .wjs_pRight{ /*盒子右侧样式*/ height: 150px; width: 100px; /*定位*/ position: absolute; right: 0px; top:20px; text-align: center; border-left: 1px dashed lightgrey; padding-top: 30px; } .wjs_product .wjs_proBox .wjs_pRight::after, .wjs_product .wjs_proBox .wjs_pRight::before{ /*定位2个和背景同色的圆,造页面特殊形状,注意宽度,高度,半径,left,top等值的关系*/ content: ""; width: 10px; height: 10px; background-color: rgb(238,238,238); position: absolute; border-radius: 5px; left: -5px; } .wjs_product .wjs_proBox .wjs_pRight::before{ top: -5px; } .wjs_product .wjs_proBox .wjs_pRight::after{ bottom: -5px; } /*高亮的盒子,active样式,注意交集选择器写法,两个选择器间没有空格*/ .wjs_product .wjs_proBox.active{ background-color: rgb(225,37,27) ; color: white; }
3-7 新闻块
该模块的实现,和产品块一样,也需要使用 JavaScript插件 中的 标签页 组件,整体结构如下
<div class="constants"> <div class="row"> <div class="col-md-2 col-md-offset-2"> 新闻的标题块 </div> <div class="col-md-1"> 新闻tab图标(可水平,也可垂直呈现) </div> <div class="col-md-7"> 新闻面板(我们只实现第一个面板) </div> </div> </div>
核心样式
.wjs_news .wjs_news_title::before{ /*新闻块左边标题下边框线条右边的小圆点*/ content: ""; width: 8px; height: 8px; border-radius: 4px; border: 1px solid lightgrey; position: absolute; bottom: -4px; right: -8px; } .wjs_news .nav-tabs li:nth-of-type(-n+3){ /*中间tab导航区,撑高li:最后一个li下方不撑高*/ margin-bottom: 60px; } .wjs_news .wjs_newsLine{ /*中间tab导航区,红色竖虚线*/ width: 1px; height: 100%; border: 1px dashed rgb(225,37,27); position: absolute; left: 45px; } /*中屏下(小于992px)的li横向样式,媒体查询*/ @media screen and (max-width:992px) { .wjs_news .nav-tabs li{ width: 25%; margin-top: 20px; } }
3-8 底部-合作伙伴
整个底部和头部一致,设置对应分辨率下的显隐,样式hidden-xs,hidden-sm
构成:
一个h3+一个ul(9个li,核心字体图标)
样式:
.wjs_partner{ /*整体高度,对齐,背景色的样式处理*/ height: 185px; text-align: center; background-color: rgb(238,238,238); /*溢出内容自动隐藏*/ overflow: hidden; } .wjs_partner li{ /*去除li列表风格(小黑点)*/ list-style: none; /*浮动,水平排列*/ float: left; /*+左外边距*/ margin-left: 25px; } .wjs_partner li .wjs_icon{ /*设置字体图标的大小*/ font-size: 80px; }
###