移动web微金所实战项目—

# 微金所项目实战

## 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文档结构

```html

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

```

### 1.3.Viewport设置

```html

```

> html中插入视口设置，可以通过emmet __meta:vp__ 插入

### 1.4.浏览器兼容模式

```html

```

> html中插入兼容模式设置，可以通过emmet __meta:compat__ 插入

### 1.5.favicon（站点图标）

```html

```

> html中插入图标链接，可以通过emmet __link:favicon__ 插入

### 1.6.引入相应的第三方文件

```html

...

```

### 1.7.在我们默认的样式表中将默认字体设置为：

```css

body{

font-family: "Helvetica Neue",

Helvetica,

Microsoft Yahei,

Hiragino Sans GB,

WenQuanYi Micro Hei,

sans-serif;

}

```

## 2.完成页面空结构

> 先划分好页面中的大容器，然后在具体看每一个容器中单独的情况

```html

<body>

</body>

```

## 3.构建顶部通栏

```html

</header>

```

### 3.1.container类

-用于定义一个固定宽度且居中的版心

```html

<!--

此处的代码会显示在一个固定宽度且居中的容器中

该容器的宽度会跟随屏幕的变化而变化

-->

</div>

```

### 3.2.栅格系统

-Bootstrap中定义了一套响应式的网格系统，

-其使用方式就是将一个容器划分成12列，

-然后通过col-xx-xx的类名控制每一列的占比

#### 3.2.1.row类

-因为每一个列默认有一个15px的左右外边距

-row类的一个作用就是通过左右-15px屏蔽掉这个边距

```html

</div>

```

#### 3.2.2.col-*\*-\*类

-col-xs-[列数]：在超小屏幕下展示几份

-col-sm-[列数]：在小屏幕下展示几份

-col-md-[列数]：在中等屏幕下展示几份

-col-lg-[列数]：在大屏幕下展示几份

-__xs__ : 超小屏幕手机 (<768px)

-__sm__ : 小屏幕平板 (≥768px)

-__md__ : 中等屏幕桌面显示器 (≥992px)

-__lg__ : 大屏幕大桌面显示器 (≥1200px)

```html

</div>

```

> 此处顶部通栏已经被划分成四列

> text-center的作用就是让内部内容居中显示

### 3.2.字体图标

```css

@font-face {

font-family: 'itcast';

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: itcast;

font-style: normal;

}

.icon-mobilephone::before{

content: '\e908';

}

```

```html

<span>手机微金所</span>

</a>

</div>

```

#### 字体文件格式

-eot : embedded-opentype

-svg : svg

-ttf : truetype

-woff : woff

### 3.4.hover图片展示

```css

.mobile-link:hover > img {

display: block;

}

```

### 3.5.按钮样式生成

-http://blog.koalite.com/bbg/

-可以通过界面生成一个新的按钮样式（其实就是一个btn按钮的css代码生成器）

```css

.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小屏幕隐藏

```html

```

或者

```html

```

-__hidden-xx__ : 在某种屏幕下隐藏

-__visible-xx__ : 在某种屏幕尺寸下显示

+visible-xx-xx：最后一个xx是决定显示时的display到底是啥

## 4.导航通栏

-在使用了boostrap过后，大多数界面元素都是通过bootstrap提供好的界面组件修改得来

```html

</button>

</a>

</div>

</ul>

</ul>

</div>

</nav>

```

### 4.1.Bootstrap扩展

-通过bootstrap文档对导航条样式的设置发现，其实本身是有一个类似于主题的概念

-navbar-default：默认的外观

-navbar-inverse：暗色背景的样式

-所以我们希望可以通过自定义一套完整的风格：

+navbar-itcast

```css

.navbar-itcast{

...

}

...具体代码参考navbar-default实现即可

```

### 4.2.品牌logo

-任然使用字体图标

### 4.3.菜单行高调整

-默认样式中菜单的行高为20px，我们可以调整为自己想要的高度

-一般都是通过自己的样式去覆盖

## 5.轮播图

### 5.1.Bootstrap JS插件使用

-在一个较小屏幕下展示一个超宽的图片，想让图片居中显示

+背景图

+p-a l 50% m-l -width/2

### 5.2.background使用

#### 5.2.1.background-size

-length

+如100px 100px

-percentage

+如90% 90%

-cover

+背景图片的较小边放大到目标大小结束

-contain

+相反

### 5.3.图片响应式

-目的

+各种终端都需要正常显示图片

+移动端应该使用更小（体积）的图片

-实现方式

移动web微金所实战项目——导航栏相关推荐

移动web——微金所实战项目
1.当需要定义一些相互之间没有联系的版块的时候可以用<section></section>标签 2.要注意:nth-child()和:nth-of-type()的区别例如:· ...
移动web微金所实战项目——js
### 4.2.品牌logo - 任然使用字体图标 ### 4.3.菜单行高调整 - 默认样式中菜单的行高为20px,我们可以调整为自己想要的高度 - 一般都是通过自己的样式去覆盖 ## 5.轮播图 ...
web 全栈开发-实战项目-一
一.web 全栈开发-实战项目项目描述: ou-article文章管理系统,包括pc页面展示(自适应移动端),后台文章管理系统(有完整的权限系统),server服务端,以及环境部署. 适合人群: 有 ...
03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
bootstrap实战--微金所项目(导航栏)
导航栏实现一.导航栏展示二.导航栏实现思路导航栏在不同的屏幕大小下呈现不同的样式,移动端下使用手风琴菜单(有现成的代码),在sm屏幕下,除了微金所图标和个人中心外,其余都不可见. 三.相关代码 ...
java项目如何设置导航_java web项目导航栏的制作
导航栏的制作我采用的是Java当中css当中的内容,当菜单栏的菜单大于当前的设置宽度和高度时溢出(overflow :hidden)隐藏,然后用伪类选择器 (hover)设置它当鼠标停留在该菜单项中 ...
浅析我对Web（淘宝网）导航栏的深入理解
首先刚拿到这个项目的实现我也一脸迷茫的,不知道数据库和jsp以及Controller之间的传递流程,下面我为大家浅析一下我对此类导航栏的理解吧. 首先:项目界面大概UI是这个样子的. 一级目录:化妆品 ...
微服务架构实战项目Serverless的持续交付与架构案例
Serverless的持续交付架构图如下: 在这个架构中,我们采用了前后端分离的技术.我们把 HTML,JS, CSS 等静态内容部署在 S3 上,并通过 CloudFront 作为 CDN 构成了 ...
Java Web开发与实战_Java Web开发技术与实战项目
[实例简介] 北大青鸟ACCP6.0 使用JSP/Servlet/Ajax技术开发新闻发布系统第一部分课件以及代码答案1到6章 [实例截图] [核心代码] 7.<JavaWeb开发技术> ...

移动web微金所实战项目——导航栏

移动web微金所实战项目——导航栏相关推荐

最新文章

热门文章