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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

移动端页面按手机屏幕分辨率自动缩放的js

1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var ph...

67870
来自专栏kwcode

JS禁止鼠标右键、禁止全选、复制、粘贴的方法(所谓的防盗功能)

简述:一个防君子不防小人的鸡肋的功能,针对小白还行。 代码如下: <script> //都能支持 document.oncontextmenu = f...

52960
来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2.1K70
来自专栏小文博客

小文’s blog – WordPress自定义字体

15720
来自专栏一“技”之长

AppleWatch开发入门五——菜单控件的使用

        菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,...

27410
来自专栏Windows Community

Extensions in UWP Community Toolkit - ViewExtensions

概述 UWP Community Toolkit Extensions 中有一个为 View 提供的扩展 - View Extensions,本篇我们结合代码详...

31960
来自专栏程序员同行者

jquery操作select(取值,设置选中)

60220
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

547100
来自专栏吴伟祥

IDEA的快捷键应用 原

Ctrl+Shift+Alt+鼠标 (左手按着ctrl+shift+alt右手鼠标点击想要选择的位置)

10930
来自专栏Android-薛之涛

Android 软键盘遮挡解决

        链接:https://www.jianshu.com/p/9eb57a8ff5e5

1K40

扫码关注云+社区

领取腾讯云代金券