制作手机静态页面

最新推荐文章于 2022-05-22 18:04:16 发布

qwbtc

最新推荐文章于 2022-05-22 18:04:16 发布

阅读量4.7k

点赞数 1

本文链接：https://blog.csdn.net/qwbtc/article/details/51302026

版权

1.引入库(百度cdn):

引入bootstrap <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" type="text/css">

引入jquery <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.手机适应屏幕：

body {
margin:0px;
height: 100%;
width: 100%
}

3.大小，间隔距离用百分比：

.main_background .user_field{
margin-left:auto;
margin-right:auto;
text-align:left;
width:100%;
height: 10%;
font-family:"幼圆";
text-align: center;
}

.first_div .photo_field div{
width: 100%;
height: 100%;
}

.first_div .photo_field div img{
width: 30%;
height: 60%;
float:left;
margin-left: 2.5%;
}

4.背景图片:

.background_div{
background: url(http://cdn.a0.bnbtrip.com/assets/images/web/2016/04/main_background.jpg) no-repeat;
cursor: pointer;
border: none;
width: 100%;
height: 70%;
background-size: cover;
background-position:center;
}

.box_2{
position:absolute;
width: 300px;
left:50%;
height:250px;
background: url(http://cdn.a0.bnbtrip.com/assets/images/web/2016/04/smile.png) no-repeat;
background-size: cover;
background-position:center;
}

5.手机发送验证短信（ajax）：

点领取按钮领取验证码（ajax），向send_code（action）API发送data数据，即send_code动作内所要用到的params的数据， ajax请求服务器返回类型是dataType:'json'时，则返回render json: json_response('time limit error', 400, [flash[:error]]) and return，通过 success:function(data)回调函数的data接受send_code的返回值, 来判断返回状态，可以在action中判断不同情况来返回不同status的状态来表示是否由错误（比如返回status:401则表示用户名已注册）

tourism_activity.html.erb中：

$(".button").click(function(){
var phone = $("#first_input").val();
var reg = /^1[3458]\d{9}$/;
if (!reg.test(phone)){
layer("手机号格式不符");
return;
}
$.ajax({

dataType:'json',
type: 'post',
url: '/users/send_code',
cach

最低0.47元/天解锁文章

qwbtc

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
制作手机静态页面

1.引入库(百度cdn):引入bootstrap 引入jquery 2.手机适应屏幕：body {margin:0px; height: 100%; width: 100%}3.大小，间隔距离用百分比：.main_background .user_field{margin-left:auto;margin-rig
复制链接

扫一扫