嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Structure

1、说明

1.1、使用YDUI有两种HTML结构可选;

2、方式一(左图)

2.1、溢出.g-scrollview容器出现滚动条,所有HTML内容均位于.g-flexview容器内;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
</head>
<body>

<section class="g-flexview">

<div class="m-navbar">
<!-- 头部导航栏(可选) -->
</div>

<div class="g-scrollview">
<!-- 内容在这里 -->
</div>

<div class="m-tabbar">
<!-- 底部导航栏(可选) -->
</div>

</section>

</body>
</html>

3、方式二(右图)

3.1、溢出body容器出现滚动条,头部和底部导航栏采用fixed定位实现;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
</head>
<body>

<header class="m-navbar navbar-fixed">
<!-- 头部导航栏(可选) -->
</header>

<section class="g-view">
<!-- 内容在这里 -->
</section>

<footer class="m-tabbar tabbarr-fixed">
<!-- 底部导航栏(可选) -->
</footer>

</body>
</html>

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。