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

半指温柔乐

发布于 2018-09-11 10:23:15

6130

发布于 2018-09-11 10:23:15

文章被收录于专栏：前端知识分享

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 插入

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实现即可 ```

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-12-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度