【练习】jsonP的实际应用，移动端web，京东手机移动端（开头）

1.百度地图开放平台jsonP的实际应用

http://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2

找到一个端口，把ak改成自己的密钥

              //引入jquery包
      //引入template包

object可以成功输出，但是

Template Error

template

Render Error

Template not found     

是模版引擎有问题吗？       （这个代码就写了1个小时，太慢）

2.移动端web（内核都是webkit）

1）视口属性viewpot（快捷键：mate:vp+tab,装了emmet插件）

width:一般都是设备的宽度，不需要给单位，一般

initial-scale:初始缩放值

minimum-scale/maximum-scale:允许用户的最小/大缩放值

user-scalable:是否允许用户进行缩放，默认no/false

2）快速出测试文字：lorem+tab默认100个，lorem 1000+tab 

3)高亮效果：某些浏览器自带

-webkit-tap-highlight-color:transparent(透明的);/*清除点击高亮效果*/

4）盒子模型

-webkit-box-sizing: border-box;/*webkit内核兼容性写法*/    盒子大小不变，内容会变

content-box:内容不变，盒子大小撑开

5）input默认样式清楚：

在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等

-webkit-appearance: none;

6）最小宽度，最大宽度

max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

7）结构伪类选择器（没太看懂）

nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下

• E:first-of-type匹配同类型中的第一个元素E。
• E:last-of-type匹配同类型中的最后一个元素E。
• E:nth-of-type(n) 匹配同类型中的第n个元素E。

3.京东手机移动端（开头）

base.css    默认样式

*,::before,::after{
padding:0;
margin: 0;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-box-sizing:border-box;
}
input{
border: none;
-webkit-appearance:none;
}
a{
text-decoration: : none;
}
ul,ol{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::before,.clearfix::after,{
content: "";
display: block;
line-height: 0;
height: 0;
visibility: hidden;
clear: both;

}

index.html

   //移动端就要写

   //引入css写在head里
 


  

placeholder='请输入内容'>  //placeholder会让字体颜色灰色

登陆

            //轮播图，第一张前面放最后一张，最后一张后面放第一张

• 


• 


• 


• 


• 


• 


• 


• 


• 


• 

     //current代表当前选中的样式

index.html

.jd_contain{
width:  100%;
}
.header{
width: 100%;
height: 40px;
position: relative;
background: rgb(201,21,35);

padding-left: 70px;                      //logo和login都是定位在header中，而input会随着浏览器的变宽而变宽，因此最好设          padding-right: 60px;                        置为100%，这就需要把父盒子header左右两边撑开放logo和login

}

.header .header_logo{
height: 36px;
width: 60px;
background-image: url("../images/sprites.png");
background-position: 0 -103px;
background-repeat: no-repeat;
background-size: 200px 200px;        //iphone6是视网膜屏幕，即分辨率：像素比=1:2，因此图片需要缩小
position: absolute;                                 iphone6plus是1:3
top: 2px;
left: 5px;
}
.header_search{
width: 100%;
height: 30px;
border-radius: 15px;
padding-left: 10px;
margin-top: 5px;
}
.header_login{
position: absolute;
right: 10px;
top: 0px;
line-height: 40px;
color: white;
font-size: 17px;
}
.header_glass{                  //搜索框中的放大镜用定位定到input中
background-image: url('../images/sprites.png');
background-repeat: no-repeat;
background-position: -60px -109px;
background-size: 200px 200px;
position: absolute;
left: 75px;
top:10px;
}
.banner{                                   //轮播图中的父盒子，宽度和屏幕一样宽，子盒子ul超出的部分用overflow隐藏
width: 100%;
overflow: hidden;
position: relative;
}
.banner_image{                      //一共8张图片，第一张和最后一张前后各一张，一共10张图片，因此宽度是父盒子的十倍
width:1000%;
}
.banner_image li{                 //li的父盒子是ul，因此它的宽度只有父盒子的十分之一
float: left;
width: 10%;
}
.banner_image li a{                //a和img都是行内元素，不能设置宽高，要转成块级元素
display: block;
width: 100%;
}
.banner_image li a img{
display: block;
width: 100%;
}
.banner_index{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -44px;                       //定位的left需要居中，先走50%，再往左走盒子的一半
}
.banner_index li{
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
border:solid 1px white;
margin-left: 5px;
}
.banner_index li.current{
background-color: white;

}

今天总的来说状态还不错，就是敲代码太慢，而且第一个例子废了太多时间，导致最后一个例子都没有好好写。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！