亲，你好，很乐意为你解答问题，目前并不是所有手机浏览器都支持HTML5+CSS3的功能
成都创新互联公司从2013年创立，是专业互联网技术服务公司，拥有项目网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元市中做网站,已为上家服务,为市中各地企业和个人服务,联系电话:18982081108
所以并不是你使用了CSS3的制作方法，所有手机就会识别你的制作方法。
首先你要确认你的网站为了哪一部分的手机用户提供服务，
如果有问题，可以继续追问我。
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
h1p折叠1/p/h1
h1p折叠2/p/h1
h1p折叠3/p/h1
h1p折叠4/p/h1
需要js来，最好用jquery来实现
只需要给h1绑定事件，单件它的时候，设置它的p属性，display:none。
HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！
效果：
源码：
这个可以通过绝对定位，配合left设置 或者translate去实现
left的方法：
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
translate
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
这个过程中 需要注意 body需要overflow：hidden; (不然会有滚动条，可设置overflow-x即可)
left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅
我github有类似小组件样式
github： IFmiss
希望能解决你的问题
给你一个JQ的三级联动：
!doctype html
html
head
title/title
meta charset = "utf-8"/
/head
style
/style
body
select id="one"
option value=""请选择省份/option
/select
select id="two"
option value=""请选择城市/option
/select
select id="three"
option value=""请选择区域/option
/select
script type="text/javascript" src="js/jquery-1.12.0.js"/script
script type="text/javascript"
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
];
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index();
var two_index = $("#two option:selected").index();
var three = $("#three");
three.empty().append("option请选择区域/option");
if(two_index 0){
var area = province[one_index-1].city[two_index-1].area;
for(var i = 0 ; i area.length ; i++){
three.append("option"+area[i]+"/option");
}
}
});
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index();
var two = $("#two");
console.log(one_index)
two.empty().append("option请选择城市/option");
$("#three").empty().append("option请选择区域/option");//清除
if(one_index 0){
var city = province[one_index-1].city;
console.log(province[one_index-1].city)
for(var i = 0 ; i city.length ; i++){
two.append("option"+city[i].name+"/option");
}
}
});
init();
function init(){
for(var i = 0 ; i province.length ; i++){
$("#one").append("option"+province[i].name+"/option");
}
}
});
/script
/body
/html
