前端项目微金所2
前端项目笔记2
1.搭建Bootstrap页面骨架及项目目录结构
├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 咱们本身的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 本身写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
1.1.约定编码规范
1.1.1.HTML约定
- 在head中引入必要的CSS文件,优先引用第三方的CSS,方便咱们本身的样式覆盖
- 在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件之间的依赖关系,好比bootstrap.js依赖于jQuery,那就应该先引用jQuery.js 而后引用bootstrap.js
1.1.2.CSS约定
- 除了公共级别样式,其他样式所有有 模块前缀(权重尽可能写满)
- 尽可能使用 直接子代选择器, 少用间接子代 避免错杀
1.2.HTML5文档结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> </body> </html>
1.3.Viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
html中插入视口设置,能够经过emmet meta:vp 插入javascript
1.4.浏览器兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
html中插入兼容模式设置,能够经过emmet meta:compat 插入css
1.5.favicon(站点图标)
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
html中插入图标连接,能够经过emmet link:favicon 插入html
1.6.引入相应的第三方文件
<link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="my.css"> ... <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="my.js"></script>
1.7.在咱们默认的样式表中将默认字体设置为:
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
2.完成页面空结构
先划分好页面中的大容器,而后在具体看每个容器中单独的状况,代码中的注释的格式也要学习下哦前端
<body> <!-- 头部区域 --> <header></header> <!-- /头部区域 --> <!-- 广告轮播 --> <section></section> <!-- /广告轮播 --> <!-- 特点介绍 --> <section></section> <!-- /特点介绍 --> <!-- 当即预定 --> <section></section> <!-- /当即预定 --> <!-- 产品推荐 --> <section></section> <!-- /产品推荐 --> <!-- 新闻列表 --> <section></section> <!-- /新闻列表 --> <!-- 合做伙伴 --> <section></section> <!-- /合做伙伴 --> <!-- 脚注区域 --> <footer></footer> <!-- /脚注区域 --> </body>
3.构建顶部通栏
<header> <div class="topbar"></div> </header>
3.1.container类
- 用语定义一个固定宽度且居中的版心
<div class="topbar">
<div class="container">
<!--
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
-->
</div>
</div>
3.2.栅格系统
- Bootstrap中定义了一套响应式的网格系统
- 其使用方式就是将一个容器划分红12列
- 而后经过col-xx-xx的类名控制每一列的占比
3.2.1.row类
- 由于每一列默认有一个15px的左右外边距
- row类的一个做用就是经过左右-15px屏蔽掉这个边距
<div class="container"> <div class="row"></div> </div>
3.2.2.col-XX-XX类
- col-xs-[列数]: 在超小屏幕下展现几份
- col-sm-[列数]: 在小屏幕下展现几份
- col-md-[列数]: 在中等屏幕下展现几份
- col-lg-[列数]: 在大屏幕下展现几份
- xs :超小屏幕 手机 (<768px)
- sm :小屏幕 平板 (da768px)
- md :中等屏幕 桌面显示器 (<768px)
- lg :大屏幕 大桌面显示器 (<768px)
<div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div>
此处顶部通栏已经被划分为四列
text-center的做用就是让内部内容居中显示html5
3.2.字体图标
@font-face {
font-family: 'weijinsuo';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] {
/*注意上面选择器中间的空格*/
/*咱们使用的名为itcast的字体就是上面的@font-face的方式声明的*/
font-family: weijinsuo;
font-style: normal;
}
.icon-mobilephone::before{
content: '\e908';
}
<div class="col-md-2 text-center">
<a class="mobile-link" href="#">
<i class="icon-mobile"></i>
<span>手机微金所</span>
<!-- 这里使用的是bootstrap中的字体图标 -->
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="..." alt="">
</a>
</div>
文字文件格式
- eot : embedded-opentype
- svg : svg
- tff : truetype
- woff : woff
3.4.hover图片展现
.mobile-link:hover > img {
display: block;
}
3.5.按钮样式生成
- http://blog.koalite.com/bbg/
- 能够经过界面生成一个新的按钮样式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .badge {
color: #E92322;
background-color: #ffffff;
}
3.5.小屏幕隐藏
<div class="topbar hidden-xs hidden-sm"></div>
或者java
<div class="topbar visible-md visible-lg"></div>
hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示jquery
4.导航通栏
- 在使用了Bootstrap事后,大多数界面元素都是经过Bootstrap提供好的界面组件修改得来
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><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="#">微论坛</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">我的中心</a></li>
</ul>
</div>
</div>
</nav>
4.1.Bootstrap扩展
- 经过Bootstrap文档对导航条样式的设置发现,其自己是有一个相似于主题的概念
- navbar-default: 默认的外观
- 因此咱们但愿能够经过自定义一套完成的风格
- navbar-weijinsuo
.navbar-weijinsuo{
...
}
...具体代码参考navbar-default实现便可,根据本身的实际要求修改外观
4.2.品牌logo
- 仍然使用字体图标
4.3.菜单行高调整
- 默认样式中菜单的行高为20px,咱们能够调整为本身想要的高度
- 通常都是经过本身的样式去覆盖
5.轮播图
5.1.Bootstrap JS插件使用
对于Bootstrap的JS插件,咱们只须要将文档实例中的代码粘到咱们本身的代码中
而后作出相应的样式调整web
5.1.1.Bootstrap中轮播图插件叫作Carousel
5.1.2.基本的轮播图实现
<!--
如下容器就是整个轮播图组件的总体，
注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
bootstrap.js会自动为当前元素添加图片轮播的特效
-->
<div id="轮播图的ID" class="carousel slide" data-ride="carousel">
<!-- ol标签是图片轮播的控制点 -->
<ol class="carousel-indicators">
<!--
每个li就是一个单独的控制点
data-target属性就是指定当前控制点控制的是哪个轮播图，其目的是若是界面上有多个轮播图，便于区分到底控制哪个
data-slide-to属性是指当前的li元素绑定的是第几个轮播项
注意，默认必须给其中某个li加上active，展现的时候就是焦点项目
-->
<li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
<li data-target="#轮播图的ID" data-slide-to="1"></li>
<!-- ...更多的 -->
</ol>
<!--
.carousel-inner是全部轮播项的容器盒子，
注意role="listbox"表明当前div是一个列表盒子，做用就是给当前div添加一个语义
-->
<div class="carousel-inner" role="listbox">
<!-- 每个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
<div class="item active">
<!-- 轮播项目中展现的图片 -->
<img src="example.jpg" alt="示例图片">
<div class="carousel-caption">
<!-- 标题或说明性文字，若是不须要，直接删除当前div.carousel-caption -->
</div>
</div>
<div class="item">
<!-- ... -->
</div>
<!-- ... -->
</div>
<!-- 图片轮播上左右两个控制按钮，分别点击能够滚动到上一张和下一张 -->
<!-- 此处须要注意的是 该a连接的href属性必须指向须要控制的轮播图ID -->
<!-- 另外a连接中的data-slide="prev"表明点击该连接会滚到上一张，若是设置为next的话则相反 -->
<a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一张</span>
</a>
</div>
5.1.3.因为轮播图片超宽形成的影响
- 美工为了在不一样屏幕下更好的展现将图片两边作的很是宽,可是咱们大多数状况的页面宽度都没法知足这样的图片宽度
- 并且Bootstrap的样式中默认将图片的max-width设置为100%
- 形成界面图片缩放
- 想在一个较小的屏幕下展现一个超宽的图片,并让图片居中显示
- 两种办法:
- 换用背景图的方式,background-position : center center;
- 使img元素绝对定位,left:50%,margin-left: -width/2
- 两种办法:
5.2.background使用
- 将容器的高度固定(410px)
- 将轮播图改成北京显示
- 因为可能图片的高度不必定是410px
- 因此设置CSS3中的background-size
5.2.1.background-size 的四个取值
- length
- 如background-size: 100px 100px,将背景图固定到多大尺寸
- percentage
- 如 background-size: 90% 90%,一百分比的形式设置背景大小
- cover
- 1.背景图片等比例缩放
- 2.让背景图相对较小边放大到目标容器大小结束
- 如: 一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
- 由于背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*\600
- contain
- 1.背景图片等比例缩放
- 2.让背景图相对较大边放大到目标容器大小结束
- 如: 一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
- 由于背景图较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400
图文说明
cover
contain
5.3.图片响应式
- 目的
- 各类终端都须要正常显示图片
- 移动端应该使用更小(体积)的图片
- 实现方式
- 将元素中直接设置的图片背景删除,换成两个data-属性 (如: data-img-sm="小图路径",data-img-lg="大图路径")
- 经过JS的方式获取屏幕的宽度;
- 判断屏幕宽度是否小于必定的值(如: 768)
- 根据从判断状况决定使用具体的大图仍是小图
$(function() {
$(window).on("resize", resize).triggerHandler("resize");
/**
* 屏幕宽度改变触发的方法
* @return {[type]} [description]
*/
function resize() {
// 获取屏幕宽度
var windowW = $(window).width();
var isSmallScreen = windowW < 768;
// 遍历轮播图片
$("#weijinsuo_ad > .carousel-inner > .item").each(function(i, ele) {
// ele是DOM对象,因此须要转换
var $ele = $(ele);
console.log($ele.data("img-sm"));
var imgURL = isSmallScreen ? "url(" + $ele.data("img-sm") + ")" : "url(" + $ele.data("img-lg") + ")";
// 设置背景图片
$ele.css("backgroundImage", imgURL);
if (isSmallScreen) { // 小屏幕不用背景图,直接用img
$ele.html('<img src="' + $ele.data("img-sm") + '" alt="">');
} else {
$ele.empty();
}
});
}
/**
* 初始化Bootstrap中的提示框效果
* @type {String}
*/
$('[data-toggle="tooltip"]').tooltip();
});
5.4.window resize事件
- 因为上一步咱们实现的过程是指在页面加载完成判断一次,
- 当用户手动调整页面宽度事后没有及时发生变化,
- 因此咱们能够经过window的resize事件中从新完成以上操做来解决这个问题
function 窗口变化后执行的函数名(){
// 具体的操做
}
$(window).on('resize', 窗口变化后执行的函数名);
- 这个事件只会在窗口尺寸发生变化后执行,可是咱们须要一开始时执行一次
...
$(window).on('resize', 窗口变化后执行的函数名).triggerHandler('resize');
5.5.小图片不须要使用背景的方式
- 小图若是仍是使用背景图片的方式,当屏幕特别小时,效果不好
- 因此当使用小图,改用img的方式
// 由于咱们须要小图时 尺寸等比例变化，因此小图时咱们使用img方式
if (isSmallScreen) {
$item.html('<img src="' + imgSrc + '" alt="" />');
} else {
$item.empty();
}
- 按照目前的状况,若是是小图展现则不须要给容器加上410px的固定高度
- 因此咱们必须经过CSS媒体查询的方式解决
#weijinsuo_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
@media screen and (min-width: 768px) {
#weijinsuo_ad > .carousel-inner > .item {
height: 410px;
}
}
#weijinsuo_ad > .carousel-inner > .item > img {
width: 100%;
}
6.网站特性
6.1.网格系统
- 该板块当屏幕为中等尺寸时分为3列,较小屏幕是分为2列
- 因此使用网络系统划分
<div class="col-sm-6 col-md-4"> <!-- ... --> </div> <!-- ... -->
6.2.媒体对象样式
- 每个小块的样式能够经过Bootstrap中的媒体对象样式实现
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全称保证支付安全</p>
</div>
</div>
</a>
6.3.响应式辅助类型
- 整个板块在超小屏幕下是隐藏起来的
- 只须要给当前板块加上hidden-xs的class
7.预定投标
7.1.pull-left
- 左边文字段落
7.2.pull-right
- 右边文字段落
8.投资产品
8.1.Tab选项卡
选项卡功能能够经过Bootstrap中提供的相应组件实现
http://v3.bootcss.com/javascript/#tabsbootstrap
<div class="container">
<!-- 全部的选项卡标签，每一个标签点击分别对应面板展现出来 -->
<ul class="nav nav-tabs" role="tablist">
<!--
下面的li定义了一个选项卡的标签，其中a标签的href属性指向的就是对应要展开的面板ID
aria-controls属性是说当前a连接控制的是哪一个元素（注意此属性和功能无关，只是语义）
注意必定要给a标签加上data-toggle="tab"，若是不加则boostrap没法知道这是一个选项卡标签，也就不会有相应的效果
-->
<li role="presentation" class="active"><a href="#第一个标签的ID" aria-controls="第一个标签的ID" role="tab" data-toggle="tab">标签页1</a></li>
<li role="presentation"><a href="#第二个标签的ID" aria-controls="第二个标签的ID" role="tab" data-toggle="tab">标签页2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- .tab-pane定义当前是一个tab面板，经过id和选项卡标签关联起来 -->
<div role="tabpanel" class="tab-pane active" id="第一个标签的ID">
<!-- 标签展开后的内容 -->
</div>
<div role="tabpanel" class="tab-pane" id="第二个标签的ID">...</div>
</div>
</div>
8.2.网格系统
- 和网站特点板块的网格系统定义同样
8.3.::before ::after
.panel-czbk > .panel-heading::before,
.panel-czbk > .panel-heading::after {
content: ' ';
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #f0f0f0;
position: absolute;
}
.panel-czbk > .panel-heading::before {
top: -8px;
left: -8px;
}
.panel-czbk > .panel-heading::after {
bottom: -8px;
left: -8px;
box-shadow: 0 2px 1px #ccc inset;
}
8.5.tooltip插件
- 注意，bootstrap中的tooltip插件必须经过js方式初始化
8.6.选项卡标签横向滚动
- 要给ul加一个容器，这个容器有横向滚动条
- 动态设置ul的宽度，宽度是根据内容大小决定的 width= sum (li.width)
相关文章
- 1. 移动web——微金所实战项目
- 2. 微前端 —— project2项目（VUE）
- 3. 微前端 —— portal项目
- 4. Github前端所用开源项目
- 5. webpack 构建前端项目（2）
- 6. 前端项目
- 7. 微前端在Vue项目的实践
- 8. 微前端项目实战及原理
- 9. cocos2d线上项目落地微前端
- 10. 项目2---十次方项目开发---前端---01
- 更多相关文章...
- • Mozilla 项目 - 浏览器信息
- • Maven 项目模板 - Maven教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 移动web——微金所实战项目
- 2. 微前端 —— project2项目（VUE）
- 3. 微前端 —— portal项目
- 4. Github前端所用开源项目
- 5. webpack 构建前端项目（2）
- 6. 前端项目
- 7. 微前端在Vue项目的实践
- 8. 微前端项目实战及原理
- 9. cocos2d线上项目落地微前端
- 10. 项目2---十次方项目开发---前端---01