第121天:移动端开发基本知识-阿里云开发者社区

开发者社区> 开发与运维> 正文

第121天:移动端开发基本知识

简介: 1、HTML5文档结构 注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。 1 DOCTYPE html> 2 3 4 5 页面标题 6 7 8 9 10 2、浏览器兼容模式 如果网页在IE中打开,必须用最新的引擎渲...

1、HTML5文档结构

注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>页面标题</title>
 6 </head>
 7 <body>
 8   
 9 </body>
10 </html>

2、浏览器兼容模式

如果网页在IE中打开,必须用最新的引擎渲染打开

快捷方式:sublime中通过emmet meta:compat插入

 1 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

3、favicon站点图标

快捷方式:sublime中通过emmet link:favicon 插入

 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 

4、默认字体

1 body{
2   font-family: "Helvetica Neue", 
3                 Helvetica, 
4                 Microsoft Yahei, 
5                 Hiragino Sans GB, 
6                 WenQuanYi Micro Hei, 
7                 sans-serif;
8 }

5、栅格系统

- Bootstrap中定义了一套响应式的网格系统
- 其使用方式就是将一个容器划分成12列,
- 然后通过col-xx-xx的类名控制每一列的占比

row类

- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距

<div class="container">
  <div class="row"></div>
</div>

 

col-*\*-\*类

- col-xs-[列数]:在超小屏幕下展示几份
- col-sm-[列数]:在屏幕下展示几份
- col-md-[列数]:在中等屏幕下展示几份
- col-lg-[列数]:在大屏幕下展示几份
- __xs__ : 超小屏幕 手机 (<768px)
- __sm__ : 小屏幕 平板 (≥768px)
- __md__ : 中等屏幕 桌面显示器 (≥992px)
- __lg__ : 大屏幕 大桌面显示器 (≥1200px)

6、字体图标

 1 css
 2 @font-face {
 3   font-family: 'itcast';
 4   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');
 5 }
 6 
 7 [class^="icon-"],
 8 [class*=" icon-"] {
 9   /*注意上面选择器中间的空格*/
10   /*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/
11   font-family: itcast;
12   font-style: normal;
13 }
14 
15 .icon-mobilephone::before{
16   content: '\e908';
17 }
 1 html
 2 <div class="col-md-2 text-center">
 3   <a class="mobile-link" href="#">
 4     <i class="icon-mobile"></i>
 5     <span>手机微金所</span>
 6     <!-- 这里使用的是bootstrap中的字体图标 -->
 7     <i class="glyphicon glyphicon-chevron-down"></i>
 8     <img src="..." alt="">
 9   </a>
10 </div>

7、字体文件格式

- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff

8、按钮样式生成

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

可以通过界面生成一个新的按钮样式

 1 .btn-itcast {
 2   color: #ffffff;
 3   background-color: #E92322;
 4   border-color: #DB3B43;
 5 }
 6 
 7 .btn-itcast:hover,
 8 .btn-itcast:focus,
 9 .btn-itcast:active,
10 .btn-itcast.active,
11 .open .dropdown-toggle.btn-itcast {
12   color: #ffffff;
13   background-color: #E92322;
14   border-color: #DB3B43;
15 }
16 
17 .btn-itcast:active,
18 .btn-itcast.active,
19 .open .dropdown-toggle.btn-itcast {
20   background-image: none;
21 }
22 
23 .btn-itcast.disabled,
24 .btn-itcast[disabled],
25 fieldset[disabled] .btn-itcast,
26 .btn-itcast.disabled:hover,
27 .btn-itcast[disabled]:hover,
28 fieldset[disabled] .btn-itcast:hover,
29 .btn-itcast.disabled:focus,
30 .btn-itcast[disabled]:focus,
31 fieldset[disabled] .btn-itcast:focus,
32 .btn-itcast.disabled:active,
33 .btn-itcast[disabled]:active,
34 fieldset[disabled] .btn-itcast:active,
35 .btn-itcast.disabled.active,
36 .btn-itcast[disabled].active,
37 fieldset[disabled] .btn-itcast.active {
38   background-color: #E92322;
39   border-color: #DB3B43;
40 }
41 
42 .btn-itcast .badge {
43   color: #E92322;
44   background-color: #ffffff;
45 }

9、小屏幕隐藏

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

visible-xx-xx:最后一个xx是决定显示时的display到底是什么。

<div class="topbar hidden-xs hidden-sm"></div>

或者

<div class="topbar visible-md visible-lg"></div>

10、Bootstrap扩展

- 通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念
- navbar-default:默认的外观
- navbar-inverse:暗色背景的样式
- 所以我们希望可以通过自定义一套完整的风格:
+ navbar-itcast

```css
.navbar-itcast{
...
}
...具体代码参考navbar-default实现即可
```

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章